色彩扩展
基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。
基本
primary
#e8f2fe = #1875f0 + 90% #FFFFFF #d1e3fc = #1875f0 + 80% #FFFFFF #a3c8f9 = #1875f0 + 60% #FFFFFF #74acf6 = #1875f0 + 40% #FFFFFF #4691f3 = #1875f0 + 20% #FFFFFF #1875f0 #1569d8 = #1875f0 + 10% #000000 #1152a8 = #1875f0 + 30% #000000 #1152a8 = #1875f0 + 50% #000000 #0a2f60 = #1875f0 + 60% #000000
warning
#fef4e8 = #F18F1C + 90% #FFFFFF #fce9d2 = #F18F1C + 80% #FFFFFF #f9d2a4 = #F18F1C + 60% #FFFFFF #f7bc77 = #F18F1C + 40% #FFFFFF #f4a549 = #F18F1C + 20% #FFFFFF #F18F1C #d98119 = #F18F1C + 10% #000000 #a96414 = #F18F1C + 30% #000000 #79480e = #F18F1C + 50% #000000 #60390b = #F18F1C + 60% #000000
danger
#ffe8e9 = #FF1023 + 90% #FFFFFF #ffcfd3 = #FF1023 + 80% #FFFFFF #ff9fa7 = #FF1023 + 60% #FFFFFF #ff707b = #FF1023 + 40% #FFFFFF #ff404f = #FF1023 + 20% #FFFFFF #ff1023 #e60e20 = #FF1023 + 10% #000000 #b30b19 = #FF1023 + 30% #000000 #800812 = #FF1023 + 50% #000000 #66060e = #FF1023 + 60% #000000
success
#eefbe8 = #50d116 + 90% #FFFFFF #dcf6d0 = #50d116 + 80% #FFFFFF #b9eda2 = #50d116 + 60% #FFFFFF #96e373 = #50d116 + 40% #FFFFFF #73da45 = #50d116 + 20% #FFFFFF #50d116 #48bc14 = #50d116 + 10% #000000 #38920f = #50d116 + 30% #000000 #28690b = #50d116 + 50% #000000 #205409 = #50d116 + 60% #000000
info
#eaf7fc = #2cace4 + 90% #FFFFFF #d5eefa = #2cace4 + 80% #FFFFFF #abdef4 = #2cace4 + 60% #FFFFFF #80cdef = #2cace4 + 40% #FFFFFF #56bde9 = #2cace4 + 20% #FFFFFF #2cace4 #289bcd = #2cace4 + 10% #000000 #1f78a0 = #2cace4 + 30% #000000 #165672 = #2cace4 + 50% #000000 #12455b = #2cace4 + 60% #000000
subsidiary
#eeeefa = #5553ce + 90% #FFFFFF #ddddf5 = #5553ce + 80% #FFFFFF #bbbaeb = #5553ce + 60% #FFFFFF #9998e2 = #5553ce + 40% #FFFFFF #7775d8 = #5553ce + 20% #FFFFFF #5553ce #5553ce = #5553ce + 10% #000000 #3c3a90 = #5553ce + 30% #000000 #2b2a67 = #5553ce + 50% #000000 #222152 = #5553ce + 60% #000000
基础色板共计 120 个颜色,包含 12 个主色以及衍生色。常用于前台展示项目及后台管理系统中。
扩展
纯红色
#FFEAEA = #FF3232 + 90% #FFFFFF #FFD6D6 = #FF3232 + 80% #FFFFFF #FFADAD = #FF3232 + 60% #FFFFFF #FF8383 = #FF3232 + 40% #FFFFFF #FF5B5B = #FF3232 + 20% #FFFFFF #FF3232 #E62D2D = #FF3232 + 10% #000000 #B22222 = #FF3232 + 30% #000000 #7F1818 = #FF3232 + 50% #000000 #671414 = #FF3232 + 60% #000000
橙红色
#FFEDE8 = #FF501E + 90% #FFFFFF #FFDCD2 = #FF501E + 80% #FFFFFF #FFB9A5 = #FF501E + 60% #FFFFFF #FF9577 = #FF501E + 40% #FFFFFF #FF734B = #FF501E + 20% #FFFFFF #FF501E #E6481B = #FF501E + 10% #000000 #B23714 = #FF501E + 30% #000000 #7F270E = #FF501E + 50% #000000 #67200C = #FF501E + 60% #000000
深橙色
#FFF3E7 = #FF8C14 + 90% #FFFFFF #FFE8D0 = #FF8C14 + 80% #FFFFFF #FFD1A1 = #FF8C14 + 60% #FFFFFF #FFB971 = #FF8C14 + 40% #FFFFFF #FFA343 = #FF8C14 + 20% #FFFFFF #FF8C14 #E67E12 = #FF8C14 + 10% #000000 #B2610D = #FF8C14 + 30% #000000 #7F4509 = #FF8C14 + 50% #000000 #673808 = #FF8C14 + 60% #000000
橙色
#FFF6E7 = #FFAA14 + 90% #FFFFFF #FFEED0 = #FFAA14 + 80% #FFFFFF #FFDDA1 = #FFAA14 + 60% #FFFFFF #FFCB71 = #FFAA14 + 40% #FFFFFF #FFBB43 = #FFAA14 + 20% #FFFFFF #FFAA14 #E69912 = #FFAA14 + 10% #000000 #B2760D = #FFAA14 + 30% #000000 #7F5409 = #FFAA14 + 50% #000000 #674408 = #FFAA14 + 60% #000000
金色
#FFFBE7 = #FFDC14 + 90% #FFFFFF #FFF1A1 = #FFDC14 + 80% #FFFFFF #FFF1A1 = #FFDC14 + 60% #FFFFFF #FFE971 = #FFDC14 + 40% #FFFFFF #FFE343 = #FFDC14 + 20% #FFFFFF #FFDC14 #E5C511 = #FFDC14 + 10% #000000 #B39A0E = #FFDC14 + 30% #000000 #806E0A = #FFDC14 + 50% #000000 #675808 = #FFDC14 + 60% #000000
黄绿色
#F5FAE7 = #A0D214 + 90% #FFFFFF #ECF6D0 = #A0D214 + 80% #FFFFFF #D9EDA1 = #A0D214 + 60% #FFFFFF #C5E371 = #A0D214 + 40% #FFFFFF #B3DB43 = #A0D214 + 20% #FFFFFF #A0D214 #8FBC11 = #A0D214 + 10% #000000 #70930E = #A0D214 + 30% #000000 #50690A = #A0D214 + 50% #000000 #405408 = #A0D214 + 60% #000000
酸橙绿色
#EDF9E7 = #50C814 + 90% #FFFFFF #DCF4D0 = #50C814 + 80% #FFFFFF #B9E9A1 = #50C814 + 60% #FFFFFF #95DD71 = #50C814 + 40% #FFFFFF #73D343 = #50C814 + 20% #FFFFFF #50C814 #47B311 = #50C814 + 10% #000000 #388C0E = #50C814 + 30% #000000 #28640A = #50C814 + 50% #000000 #205008 = #50C814 + 60% #000000
深绿宝石色
#E7F9F9 = #14C8C8 + 90% #FFFFFF #D0F4F4 = #14C8C8 + 80% #FFFFFF #A1E9E9 = #14C8C8 + 60% #FFFFFF #71DDDD = #14C8C8 + 40% #FFFFFF #43D3D3 = #14C8C8 + 20% #FFFFFF #14C8C8 #11B3B3 = #14C8C8 + 10% #000000 #0E8C8C = #14C8C8 + 30% #000000 #0A6464 = #14C8C8 + 50% #000000 #085050 = #14C8C8 + 60% #000000
道奇蓝色
#E7F3FE = #148CFA + 90% #FFFFFF #D0E8FE = #148CFA + 80% #FFFFFF #A1D1FD = #148CFA + 60% #FFFFFF #71B9FB = #148CFA + 40% #FFFFFF #43A3FB = #148CFA + 20% #FFFFFF #148CFA #117DE0 = #148CFA + 10% #000000 #0E62AF = #148CFA + 30% #000000 #0A467D = #148CFA + 50% #000000 #083864 = #148CFA + 60% #000000
皇家蓝
#EAEDFC = #3250E6 + 90% #FFFFFF #D6DCFA = #3250E6 + 80% #FFFFFF #ADB9F5 = #3250E6 + 60% #FFFFFF #8395EF = #3250E6 + 40% #FFFFFF #5B73EB = #3250E6 + 20% #FFFFFF #3250E6 #2C47CE = #3250E6 + 10% #000000 #2338A1 = #3250E6 + 30% #000000 #192873 = #3250E6 + 50% #000000 #14205C = #3250E6 + 60% #000000
适中的紫色
#F0EAFA = #6E32D2 + 90% #FFFFFF #E2D6F6 = #6E32D2 + 80% #FFFFFF #C5ADED = #6E32D2 + 60% #FFFFFF #A783E3 = #6E32D2 + 40% #FFFFFF #8B5BDB = #6E32D2 + 20% #FFFFFF #6E32D2 #622CBC = #6E32D2 + 10% #000000 #4D2393 = #6E32D2 + 30% #000000 #371969 = #6E32D2 + 50% #000000 #2C1454 = #6E32D2 + 60% #000000
深粉红
#FCEAF4 = #E63296 + 90% #FFFFFF #FAD6EA = #E63296 + 80% #FFFFFF #F5ADD5 = #E63296 + 60% #FFFFFF #EF83BF = #E63296 + 40% #FFFFFF #EB5BAB = #E63296 + 20% #FFFFFF #E63296 #CE2C86 = #E63296 + 10% #000000 #A12369 = #E63296 + 30% #000000 #73194B = #E63296 + 50% #000000 #5C143C = #E63296 + 60% #000000
基础色板共计 120 个颜色,包含 12 个主色以及衍生色。常用于前台展示项目及后台管理系统中。
  • 色彩扩展
  • 基本
  • 扩展