颜色是设计系统非常重要的组成部分。颜色色盘决定了产品的视觉识别程度、外观风格的和谐甚至能够影响用户的情绪。Semi Design 定义了下面这一套色盘，当然你也可以使用我们的主题编辑器来智能生成颜色色盘。
建议
在网页中使用颜色变量 (CSS Variable) 来更容易地实现深色模式以及更灵活地实现未来更多的样式需求。以下所有颜色名称对应的 CSS Variable 转换规则为：Primary → var(--color-primary), Fill 0 → var(--color-fill-0)。

主要颜色

Semi Design 默认主题选取蓝色作为主色。你也可以到主题编辑器来自定义主色。主色为最主要的强调颜色。
名称使用场景颜色值
Primary主要颜色。仅在需要非常强调的情况下使用。
rgba(0,119,250, 1)
rgba(84,169,255, 1)

次要颜色

次要颜色为第二重要的颜色，通常情况下，次要颜色保留为蓝色，是因为：
  1. 大多数用户习惯认知蓝色的文本为可以点击的文本。在将主色定为其他颜色（如橙色、黄色等）的情况下，我们将次要颜色保留为蓝色，由此，应用了非蓝色为主色的主题仍然能够在界面时使用用户所习惯的蓝色链接、按钮等。
  2. Semi Design 默认主题以蓝色为主色，并且不希望引入更多的颜色，因此将主要颜色和次要颜色定为相同的蓝色。
名称使用场景颜色值
Secondary次要颜色。强调作用次于主要颜色，但仍然具有强调作用。
rgba(0,119,250, 1)
rgba(84,169,255, 1)
注意
使用 Semi Design 默认主题时，无需在意主要和次要颜色的差异。

第三颜色

第三颜色作为最不强调的颜色。默认主题下，第三颜色为深灰色。
名称使用场景颜色值
Tertiary第三颜色。可以在页面上多次使用。
rgba(107,112,117, 1)
rgba(136,141,146, 1)

功能色

功能色应保留给对应的使用场景，其他场景下尽量不使用功能色。
名称使用场景颜色值
Success表示安全、成功、开启的状态
rgba(59,179,70, 1)
rgba(93,194,100, 1)
Warning表示警告、不安全
rgba(252,136,0, 1)
rgba(255,174,67, 1)
Danger表示危险的操作、或需要特别注意的危险信息
rgba(249,57,32, 1)
rgba(252,114,90, 1)

文本/图标颜色

变量名用法说明色值
Text 0最主要的文本颜色
rgba(28,31,35, 1)
rgba(249,249,249, 1)
Text 1稍次要的文本颜色
rgba(28,31,35, 0.8)
rgba(249,249,249, 0.8)
Text 2次要的文本颜色
rgba(28,31,35, 0.6)
rgba(249,249,249, 0.6)
Text 3最次要的文本颜色或用于图标的填充颜色
rgba(28,31,35, 0.2)
rgba(249,249,249, 0.2)

填充颜色

对于一个元素，满足以下两个条件：
  • 如果这个元素所处的容器背景颜色不是固定的
  • 这个元素的填充色与最上层背景色的对比度比较小
这是应该考虑将这个元素使用填充颜色来填充这个元素，确保这个元素不会“融于”某一级别背景颜色中。
变量名用法说明色值
Fill 0用于大多数组件如按钮、输入框的默认填充色，或无边框组件的悬停状态填充色
rgba(46,50,56, 0.05)
rgba(255, 255, 255, 0.05)
Fill 1悬停状态的填充色，或无边框组件的按下状态填充色
rgba(46,50,56, 0.09)
rgba(255, 255, 255, 0.09)
Fill 2按下状态的填充色
rgba(46,50,56, 0.13)
rgba(255, 255, 255, 0.13)

完整色盘

完整色盘包含 16 个不同的颜色，每一个颜色具有 10 个颜色级别。
Semi Red 0254,242,237
AAA
Semi Red 1254,221,210
AAA
Semi Red 2253,183,165
AAA
Semi Red 3251,144,120
AAA
Semi Red 4250,102,76
AAA
Semi Red 5249,57,32
AA LargeAA
Semi Red 6213,37,21
AAAA Large
Semi Red 7178,20,12
AAA
Semi Red 8142,8,5
AAA
Semi Red 9106,1,3
AAA
Semi Pink 0253,236,239
AAA
Semi Pink 1251,207,216
AAA
Semi Pink 2246,160,181
AAA
Semi Pink 3242,115,150
AAA
Semi Pink 4237,72,123
AA LargeAA
Semi Pink 5233,30,99
AA LargeAA
Semi Pink 6197,19,86
AAAA Large
Semi Pink 7162,11,72
AAA
Semi Pink 8126,5,58
AAA
Semi Pink 990,1,43
AAA
Semi Purple 0247,233,247
AAA
Semi Purple 1239,202,240
AAA
Semi Purple 2221,155,224
AAA
Semi Purple 3201,111,209
AA LargeAA
Semi Purple 4180,73,194
AA LargeAA
Semi Purple 5158,40,179
AAAA Large
Semi Purple 6135,30,158
AAA
Semi Purple 7113,22,138
AAA
Semi Purple 892,15,117
AAA
Semi Purple 973,10,97
AAA
Semi Violet 0243,237,249
AAA
Semi Violet 1226,209,244
AAA
Semi Violet 2196,167,233
AAA
Semi Violet 3166,127,221
AA LargeAA
Semi Violet 4136,91,210
AAAA Large
Semi Violet 5106,58,199
AAAA Large
Semi Violet 687,47,179
AAA
Semi Violet 770,37,158
AAA
Semi Violet 854,28,138
AAA
Semi Violet 940,20,117
AAA
Semi Indigo 0236,239,248
AAA
Semi Indigo 1209,216,240
AAA
Semi Indigo 2167,179,225
AAA
Semi Indigo 3128,144,211
AA LargeAA
Semi Indigo 494,111,196
AAAA
Semi Indigo 563,81,181
AAAA Large
Semi Indigo 651,66,161
AAA
Semi Indigo 740,52,140
AAA
Semi Indigo 831,40,120
AAA
Semi Indigo 923,29,99
AAA
Semi Blue 0234,245,255
AAA
Semi Blue 1203,231,254
AAA
Semi Blue 2152,205,253
AAA
Semi Blue 3101,178,252
AAA
Semi Blue 450,149,251
AA LargeAA
Semi Blue 50,119,250
AA LargeAA
Semi Blue 60,98,214
AAAA Large
Semi Blue 70,79,179
AAA
Semi Blue 80,61,143
AAA
Semi Blue 90,44,107
AAA
Semi Cyan 0229,247,248
AAA
Semi Cyan 1194,239,240
AAA
Semi Cyan 2138,221,226
AAA
Semi Cyan 388,203,211
AAA
Semi Cyan 444,184,197
AAA
Semi Cyan 55,164,182
AA LargeAA
Semi Cyan 63,134,152
AA LargeAA
Semi Cyan 71,105,121
AAAA Large
Semi Cyan 80,77,91
AAA
Semi Cyan 90,50,61
AAA
Semi Teal 0228,247,244
AAA
Semi Teal 1192,240,232
AAA
Semi Teal 2135,224,211
AAA
Semi Teal 384,209,193
AAA
Semi Teal 439,194,176
AAA
Semi Teal 50,179,161
AAA
Semi Teal 60,149,137
AA LargeAA
Semi Teal 70,119,111
AAAA Large
Semi Teal 80,89,85
AAA
Semi Teal 90,60,58
AAA
Semi Green 0236,247,236
AAA
Semi Green 1208,240,209
AAA
Semi Green 2164,224,167
AAA
Semi Green 3125,209,130
AAA
Semi Green 490,194,98
AAA
Semi Green 559,179,70
AAA
Semi Green 648,149,59
AA LargeAA
Semi Green 737,119,47
AAAA Large
Semi Green 827,89,36
AAA
Semi Green 917,60,24
AAA
Semi Lime 0242,250,230
AAA
Semi Lime 1227,246,197
AAA
Semi Lime 2203,237,142
AAA
Semi Lime 3183,227,91
AAA
Semi Lime 4167,218,44
AAA
Semi Lime 5155,209,0
AAA
Semi Lime 6126,174,0
AAA
Semi Lime 799,139,0
AA LargeAA
Semi Lime 872,104,0
AAAA Large
Semi Lime 947,70,0
AAA
Semi Yellow 0255,253,234
AAA
Semi Yellow 1254,251,203
AAA
Semi Yellow 2253,243,152
AAA
Semi Yellow 3252,232,101
AAA
Semi Yellow 4251,218,50
AAA
Semi Yellow 5250,200,0
AAA
Semi Yellow 6208,170,0
AAA
Semi Yellow 7167,139,0
AA LargeAA
Semi Yellow 8125,106,0
AAAA Large
Semi Yellow 983,72,0
AAA
Semi Amber 0254,251,235
AAA
Semi Amber 1252,245,206
AAA
Semi Amber 2249,232,158
AAA
Semi Amber 3246,216,111
AAA
Semi Amber 4243,198,65
AAA
Semi Amber 5240,177,20
AAA
Semi Amber 6200,138,15
AAA
Semi Amber 7160,102,10
AAAA Large
Semi Amber 8120,70,6
AAA
Semi Amber 980,43,3
AAA
Semi Orange 0255,248,234
AAA
Semi Orange 1254,238,204
AAA
Semi Orange 2254,217,152
AAA
Semi Orange 3253,193,101
AAA
Semi Orange 4253,166,51
AAA
Semi Orange 5252,136,0
AAA
Semi Orange 6210,103,0
AA LargeAA
Semi Orange 7168,74,0
AAAA Large
Semi Orange 8126,49,0
AAA
Semi Orange 984,29,0
AAA
Semi Grey 0249,249,249
AAA
Semi Grey 1230,232,234
AAA
Semi Grey 2198,202,205
AAA
Semi Grey 3167,171,176
AAA
Semi Grey 4136,141,146
AA LargeAA
Semi Grey 5107,112,117
AAAA Large
Semi Grey 685,91,97
AAAA Large
Semi Grey 765,70,76
AAA
Semi Grey 846,50,56
AAA
Semi Grey 928,31,35
AAA

颜色转换

根据颜色的 HEX 值或 rgb() 的颜色值获取相近的颜色变量名称。
search