Skip to content
On this page

色彩设计

Bin-UI 默认具有一套较为美观的配色方案,在开发中也推荐使用一下色板来达到视觉统一效果

设计原则

默认的色彩样式有5个主色调,并根据白色混入得到了若干个色板值,这些颜色基本可以满足中后台设计中对于颜色的要求

颜色值的取值混合主要参考stylus的mix混合,js部分借助 color.js 这个第三方库实现,组件中提供了部分转化函数,可以按需引入。

主色

primary-1#0a5299
primary-2#0b60b3
primary-3#0d6ecc
primary-4#0e7be6
primary-5#1089ff
primary-6#40a1ff
primary-7#70b8ff
primary-8#9fd0ff
primary-9#cfe7ff
primary-10#e7f3ff
primary-11#f3f9ff
success-1#317610
success-2#398912
success-3#429d15
success-4#4ab017
success-5#52c41a
success-6#75d048
success-7#97dc76
success-8#bae7a3
success-9#dcf3d1
success-10#eef9e8
success-11#f6fcf4
info-1#202c38
info-2#253342
info-3#2a3a4b
info-4#304255
info-5#35495e
info-6#5d6d7e
info-7#86929e
info-8#aeb6bf
info-9#d7dbdf
info-10#ebedef
info-11#f5f6f7
warning-1#96540d
warning-2#af620f
warning-3#c87012
warning-4#e17e14
warning-5#fa8c16
warning-6#fba345
warning-7#fcba73
warning-8#fdd1a2
warning-9#fee8d0
warning-10#fff4e8
warning-11#fff9f3
danger-1#93141b
danger-2#ac181f
danger-3#c41b24
danger-4#dd1f29
danger-5#f5222d
danger-6#f74e57
danger-7#f97a81
danger-8#fba7ab
danger-9#fdd3d5
danger-10#fee9ea
danger-11#fff4f5

自定义色板

如果自定的配色不能满足要求,则可以取如下色板,默认会给生成不同的色板值,可供使用

purple-1#441c7d
purple-2#502092
purple-3#5b25a7
purple-4#6729bc
purple-5#722ed1
purple-6#8e58da
purple-7#aa82e3
purple-8#c7abed
purple-9#e3d5f6
purple-10#f1eafa
purple-11#f8f5fd
magenta-1#8d1c5a
magenta-2#a52169
magenta-3#bc2678
magenta-4#d42a87
magenta-5#eb2f96
magenta-6#ef59ab
magenta-7#f382c0
magenta-8#f7acd5
magenta-9#fbd5ea
magenta-10#fdeaf5
magenta-11#fef5fa
cyan-1#0b7474
cyan-2#0d8888
cyan-3#0f9b9b
cyan-4#11afaf
cyan-5#13c2c2
cyan-6#42cece
cyan-7#71dada
cyan-8#a1e7e7
cyan-9#d0f3f3
cyan-10#e7f9f9
cyan-11#f3fcfc
lime-1#60820a
lime-2#70980c
lime-3#80ae0e
lime-4#90c30f
lime-5#a0d911
lime-6#b3e141
lime-7#c6e870
lime-8#d9f0a0
lime-9#ecf7cf
lime-10#f6fbe7
lime-11#fafdf3
volcano-1#963211
volcano-2#af3b14
volcano-3#c84316
volcano-4#e14c19
volcano-5#fa541c
volcano-6#fb7649
volcano-7#fc9877
volcano-8#fdbba4
volcano-9#feddd2
volcano-10#ffeee8
volcano-11#fff6f4
geekblue-1#1c328d
geekblue-2#213ba5
geekblue-3#2643bc
geekblue-4#2a4cd4
geekblue-5#2f54eb
geekblue-6#5976ef
geekblue-7#8298f3
geekblue-8#acbbf7
geekblue-9#d5ddfb
geekblue-10#eaeefd
geekblue-11#f5f6fe

中性色

中性色包含了黑、白、灰。在后台设计中被大量使用到,合理地选择中性色能够令页面信息具备良好的主次关关系。

gary-1 #ffffff
gary-2 #fafafa
gary-3 #f5f5f5
gary-4 #f0f0f0
gary-5 #d9d9d9
gary-6 #bfbfbf
gary-7 #8c8c8c
gary-8 #595959
gary-9 #434343
gary-10 #262626
gary-11 #1f1f1f
gary-12 #141414
gary-13 #000000

文字

提供了几个文字颜色,色板中可自己定义使用

text-1 #17233d
text-2 #515a6e
text-3 #808695
text-4 #c5c8ce
text-5 #C0C4CC

色板工具

如果上面的色板还不能满足你的需求,你可以选择一个主色,这里会生成一个色板。

选择你的主色
color-1 #0a5299
color-2 #0b60b3
color-3 #0d6ecc
color-4 #0e7be6
color-5 #1089ff
color-6 #40a1ff
color-7 #70b8ff
color-8 #9fd0ff
color-9 #cfe7ff
color-10 #e7f3ff
color-11 #f3f9ff
#1089ff

注意:亮度和饱和度建议在70以上,以生成更好的效果