配色方案

样式

基础配色方案

#e4eaec
#526069
#3e8ef7
#0bb2d4
#17b3a3
#eb6709
#ff4c52
#9463f7

色卡

red
  • 800 / #e62020
  • 700 / #f2353c
  • 600 / #ff4c52
  • 500 / #ff666b
  • 400 / #ff8589
  • 300 / #ffbfc1
  • 200 / #ffbfc1
  • 100 / #ffdbdc
pink
  • 800 / #e6155e
  • 700 / #eb2f71
  • 600 / #f74584
  • 500 / #ff5e97
  • 400 / #ff7daa
  • 300 / #ff9ec0
  • 200 / #ffbad2
  • 100 / #ffd9e6
purple
  • 800 / #7231f5
  • 700 / #8349f5
  • 600 / #9463f7
  • 500 / #a57afa
  • 400 / #b693fa
  • 300 / #c8aefc
  • 200 / #d9c7fc
  • 100 / #eae1fc
indigo
  • 800 / #364ff5
  • 700 / #4d64fa
  • 600 / #667afa
  • 500 / #7d8efa
  • 400 / #96a3fa
  • 300 / #afb9fa
  • 200 / #c7cffc
  • 100 / #e1e4fc
blue
  • 800 / #0b69e3
  • 700 / #247cf0
  • 600 / #3e8ef7
  • 500 / #589ffc
  • 400 / #79b2fc
  • 300 / #99c5ff
  • 200 / #b8d7ff
  • 100 / #d9e9ff
cyan
  • 800 / #007d96
  • 700 / #0099b8
  • 600 / #0bb2d4
  • 500 / #28c0de
  • 400 / #54cbe3
  • 300 / #77d9ed
  • 200 / #9de6f5
  • 100 / #c2f5ff
teal
  • 800 / #008577
  • 700 / #089e8f
  • 600 / #17b3a3
  • 500 / #28c7b7
  • 400 / #45d6c8
  • 300 / #6be3d7
  • 200 / #92f0e6
  • 100 / #c3f7f2
green
  • 800 / #008c4d
  • 700 / #05a85c
  • 600 / #11c26d
  • 500 / #28d17c
  • 400 / #49de94
  • 300 / #72e8ab
  • 200 / #99f2c2
  • 100 / #c2fadc
light-green
  • 800 / #4a7800
  • 700 / #5a9101
  • 600 / #6da611
  • 500 / #7eb524
  • 400 / #94cc39
  • 300 / #add966
  • 200 / #c3e887
  • 100 / #dcf7b0
yellow
  • 800 / #faa700
  • 700 / #fcb900
  • 600 / #ffcd17
  • 500 / #ffdc2e
  • 400 / #ffe54f
  • 300 / #ffed78
  • 200 / #fff39c
  • 100 / #fff6b5
orange
  • 800 / #b53f00
  • 700 / #de4e00
  • 600 / #eb6709
  • 500 / #f57d1b
  • 400 / #fa983c
  • 300 / #fab06b
  • 200 / #ffc894
  • 100 / #ffe1c4
brown
  • 800 / #6b534c
  • 700 / #82675f
  • 600 / #997b71
  • 500 / #ab8c82
  • 400 / #bda299
  • 300 / #cfb8b0
  • 200 / #e0cdc5
  • 100 / #f5e2da
grey
  • 800 / #424242
  • 700 / #616161
  • 600 / #757575
  • 500 / #9e9e9e
  • 400 / #bdbdbd
  • 300 / #e0e0e0
  • 200 / #eeeeee
  • 100 / #fafafa
blue-grey
  • 800 / #263238
  • 700 / #37474f
  • 600 / #526069
  • 500 / #76838f
  • 400 / #a3afb7
  • 300 / #ccd5db
  • 200 / #e4eaec
  • 100 / #f3f7f9

配色应用

色卡

激活颜色

#247cf0
700

基础颜色

#3e8ef7
600

鼠标悬停颜色

#589ffc
500

背景颜色

#d9e9ff
100

激活颜色

#f2353c
700

基础颜色

#ff4c52
600

鼠标悬停颜色

#ff666b
500

背景颜色

#ffdbdc
100

文本配色

标题颜色

#37474f

副标题颜色

文本颜色

#76838f

提示颜色

#a3afb7

图标和分割线使用 Alpha

暗灰色

普通 40%

鼠标悬停 60%

激活 100%

普通 60%

鼠标悬停 80%

激活 100%

灰色
分隔线 10%

边框颜色

边框颜色

#e4eaec