Color

color

文字配色的工具類別。基本色與色票群的色彩類別名稱前綴詞為 .u-clr:;品牌色類別名稱前綴詞為 .u-tbc:;灰階類別名稱前綴詞為 .u-bk:

基本色
.u-clr:primary
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:secondary
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:dark
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:light
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

狀態色
.u-clr:success
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:warning
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:danger
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

色票群
.u-clr:red
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:orange
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:fire
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:yellow
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:olive
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:sapphire
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:cyan
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:magenta
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:bone
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:silver
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:momo
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:rosewood
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:skin
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:chartreuse
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:green
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:aegean
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:blue
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:violet
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:brown
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:gray
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:black
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:beige
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-clr:khaki
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

品牌色
.u-tbc:youtube
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-tbc:googleplus
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-tbc:pinterest
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-tbc:weibo
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-tbc:rss
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-tbc:snapchat
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-tbc:whatsapp
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-tbc:wechat
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-tbc:line
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-tbc:slack
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-tbc:tumblr
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-tbc:behance
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-tbc:messager
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-tbc:skype
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-tbc:dropbox
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-tbc:viemo
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-tbc:twitter
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-tbc:linkedin
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-tbc:facebook
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-tbc:vk
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-tbc:paypal
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-tbc:yahoo
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

無彩度
.u-bk:0
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bk:2
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bk:5
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bk:8
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bk:10
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bk:12
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bk:15
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bk:20
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bk:30
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bk:40
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bk:50
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bk:60
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bk:70
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bk:80
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bk:90
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.u-bk:100
Lorem ipsum dolor sit amet, consectetur adipisicing elit.