Skip to content

Color Design

Bin-UI comes with a well-designed color scheme by default. We recommend using these color palettes to achieve visual consistency in your development.

Design Principles

The default color scheme has 5 primary hues, each with multiple palette values derived from mixing with white. These colors should cover the color needs of most admin and middle-platform designs.

The color value mixing primarily references Stylus's mix function, with the JavaScript side implemented using the color.js library. The library provides some conversion functions that can be imported on demand.

Primary Colors

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

Custom Color Palettes

If the default color scheme doesn't meet your needs, you can use the following palettes. Different palette values are generated automatically for each base color.

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

Neutral Colors

Neutral colors include black, white, and gray. They are widely used in admin interface design. Choosing neutral colors wisely helps establish a clear visual hierarchy for page content.

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 Colors

Several text colors are provided. You can define your own in the palette.

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

Color Palette Tool

If the palettes above don't meet your needs, you can pick a primary color and a palette will be generated for you.

Pick your primary color
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

Note: Brightness and saturation are recommended to be above 70 for better results.