在日常的工作中,我们经常会使用到色彩,主流的色彩体系有 Material Design、Ant Design 等等。这里将主流的色彩体系做一个汇总收录,方便查找和使用。

# Material Design

官网:Material Design

Red

50 #FFEBEE
100 #FFCDD2
200 #EF9A9A
300 #E57373
400 #EF5350
500 #F44336
600 #E53935
700 #D32F2F
800 #C62828
900 #B71C1C
A100 #FF8A80
A200 #FF5252
A400 #FF1744
A700 #D50000

Pink

50 #FCE4EC
100 #F8BBD0
200 #F48FB1
300 #F06292
400 #EC407A
500 #E91E63
600 #D81B60
700 #C2185B
800 #AD1457
900 #880E4F
A100 #FF80AB
A200 #FF4081
A400 #F50057
A700 #C51162

Purple

50 #F3E5F5
100 #E1BEE7
200 #CE93D8
300 #BA68C8
400 #AB47BC
500 #9C27B0
600 #8E24AA
700 #7B1FA2
800 #6A1B9A
900 #4A148C
A100 #EA80FC
A200 #E040FB
A400 #D500F9
A700 #AA00FF

Deep purple

50 #EDE7F6
100 #D1C4E9
200 #B39DDB
300 #9575CD
400 #7E57C2
500 #673AB7
600 #5E35B1
700 #512DA8
800 #4527A0
900 #311B92
A100 #B388FF
A200 #7C4DFF
A400 #651FFF
A700 #6200EA

Indigo

50 #E8EAF6
100 #C5CAE9
200 #9FA8DA
300 #7986CB
400 #5C6BC0
500 #3F51B5
600 #3949AB
700 #303F9F
800 #283593
900 #1A237E
A100 #8C9EFF
A200 #536DFE
A400 #3D5AFE
A700 #304FFE

Blue

50 #E3F2FD
100 #BBDEFB
200 #90CAF9
300 #64B5F6
400 #42A5F5
500 #2196F3
600 #1E88E5
700 #1976D2
800 #1565C0
900 #0D47A1
A100 #82B1FF
A200 #448AFF
A400 #2979FF
A700 #2962FF

Light Blue

50 #E1F5FE
100 #B3E5FC
200 #81D4FA
300 #4FC3F7
400 #29B6F6
500 #03A9F4
600 #039BE5
700 #0288D1
800 #0277BD
900 #01579B
A100 #80D8FF
A200 #40C4FF
A400 #00B0FF
A700 #0091EA

Cyan

50 #E0F7FA
100 #B2EBF2
200 #80DEEA
300 #4DD0E1
400 #26C6DA
500 #00BCD4
600 #00ACC1
700 #0097A7
800 #00838F
900 #006064
A100 #84FFFF
A200 #18FFFF
A400 #00E5FF
A700 #00B8D4

Teal

50 #E0F2F1
100 #B2DFDB
200 #80CBC4
300 #4DB6AC
400 #26A69A
500 #009688
600 #00897B
700 #00796B
800 #00695C
900 #004D40
A100 #A7FFEB
A200 #64FFDA
A400 #1DE9B6
A700 #00BFA5

Green

50 #E8F5E9
100 #C8E6C9
200 #A5D6A7
300 #81C784
400 #66BB6A
500 #4CAF50
600 #43A047
700 #388E3C
800 #2E7D32
900 #1B5E20
A100 #B9F6CA
A200 #69F0AE
A400 #00E676
A700 #00C853

Light Green

50 #F1F8E9
100 #DCEDC8
200 #C5E1A5
300 #AED581
400 #9CCC65
500 #8BC34A
600 #7CB342
700 #689F38
800 #558B2F
900 #33691E
A100 #CCFF90
A200 #B2FF59
A400 #76FF03
A700 #64DD17

Lime

50 #F9FBE7
100 #F0F4C3
200 #E6EE9C
300 #DCE775
400 #D4E157
500 #CDDC39
600 #C0CA33
700 #AFB42B
800 #9E9D24
900 #827717
A100 #F4FF81
A200 #EEFF41
A400 #C6FF00
A700 #AEEA00

Yellow

50 #FFFDE7
100 #FFF9C4
200 #FFF59D
300 #FFF176
400 #FFEE58
500 #FFEB3B
600 #FDD835
700 #FBC02D
800 #F9A825
900 #F57F17
A100 #FFFF8D
A200 #FFFF00
A400 #FFEA00
A700 #FFD600

Amber

50 #FFF8E1
100 #FFECB3
200 #FFE082
300 #FFD54F
400 #FFCA28
500 #FFC107
600 #FFB300
700 #FFA000
800 #FF8F00
900 #FF6F00
A100 #FFE57F
A200 #FFD740
A400 #FFC400
A700 #FFAB00

Orange

50 #FFF3E0
100 #FFE0B2
200 #FFCC80
300 #FFB74D
400 #FFA726
500 #FF9800
600 #FB8C00
700 #F57C00
800 #EF6C00
900 #E65100
A100 #FFD180
A200 #FFAB40
A400 #FF9100
A700 #FF6D00

Deep Orange

50 #FBE9E7
100 #FFCCBC
200 #FFAB91
300 #FF8A65
400 #FF7043
500 #FF5722
600 #F4511E
700 #E64A19
800 #D84315
900 #BF360C
A100 #FF9E80
A200 #FF6E40
A400 #FF3D00
A700 #DD2C00

Brown

50 #EFEBE9
100 #D7CCC8
200 #BCAAA4
300 #A1887F
400 #8D6E63
500 #795548
600 #6D4C41
700 #5D4037
800 #4E342E
900 #3E2723

Gray

50 #FAFAFA
100 #F5F5F5
200 #EEEEEE
300 #E0E0E0
400 #BDBDBD
500 #9E9E9E
600 #757575
700 #616161
800 #424242
900 #212121

Blue Gray

50 #ECEFF1
100 #CFD8DC
200 #B0BEC5
300 #90A4AE
400 #78909C
500 #607D8B
600 #546E7A
700 #455A64
800 #37474F
900 #263238
Black #000000
White #FFFFFF

Color Theme

Primary #6200EE
Primary Variant #3700B3
Secondary #03DAC6
Secondary Variant #018786
Background #FFFFFF
Surface #FFFFFF
Error #B00020
On Primary #FFFFFF
On Secondary #000000
On Background #000000
On Surface #000000
On Error #FFFFFF

# Ant Design

官网:Ant Design

Dust Red / 薄暮

斗志、奔放

red-1 #fff1f0
red-2 #ffccc7
red-3 #ffa39e
red-4 #ff7875
red-5 #ff4d4f
red-6 #f5222d
red-7 #cf1322
red-8 #a8071a
red-9 #820014
red-10 #5c0011

Volcano / 火山

醒目、澎湃

volcano-1 #fff2e8
volcano-2 #ffd8bf
volcano-3 #ffbb96
volcano-4 #ff9c6e
volcano-5 #ff7a45
volcano-6 #fa541c
volcano-7 #d4380d
volcano-8 #ad2102
volcano-9 #871400
volcano-10 #610b00

Sunset Orange / 日暮

温暖、欢快

orange-1 #fff7e6
orange-2 #ffe7ba
orange-3 #ffd591
orange-4 #ffc069
orange-5 #ffa940
orange-6 #fa8c16
orange-7 #d46b08
orange-8 #ad4e00
orange-9 #873800
orange-10 #612500

Calendula Gold / 金盏花

活力、积极

gold-1 #fffbe6
gold-2 #fff1b8
gold-3 #ffe58f
gold-4 #ffd666
gold-5 #ffc53d
gold-6 #faad14
gold-7 #d48806
gold-8 #ad6800
gold-9 #874d00
gold-10 #613400

Sunrise Yellow / 日出

出生、阳光

yellow-1 #feffe6
yellow-2 #ffffb8
yellow-3 #fffb8f
yellow-4 #fff566
yellow-5 #ffec3d
yellow-6 #fadb14
yellow-7 #d4b106
yellow-8 #ad8b00
yellow-9 #876800
yellow-10 #614700

Lime / 青柠

自然、生机

lime-1 #fcffe6
lime-2 #f4ffb8
lime-3 #eaff8f
lime-4 #d3f261
lime-5 #bae637
lime-6 #a0d911
lime-7 #7cb305
lime-8 #5b8c00
lime-9 #3f6600
lime-10 #254000

Polar Green / 极光绿

健康、创新

green-1 #f6ffed
green-2 #d9f7be
green-3 #b7eb8f
green-4 #95de64
green-5 #73d13d
green-6 #52c41a
green-7 #389e0d
green-8 #237804
green-9 #135200
green-10 #092b00

Cyan / 明青

希望、坚强

cyan-1 #e6fffb
cyan-2 #b5f5ec
cyan-3 #87e8de
cyan-4 #5cdbd3
cyan-5 #36cfc9
cyan-6 #13c2c2
cyan-7 #08979c
cyan-8 #006d75
cyan-9 #00474f
cyan-10 #002329

Daybreak Blue / 拂晓蓝

包容、科技、普惠

blue-1 #e6f7ff
blue-2 #bae7ff
blue-3 #91d5ff
blue-4 #69c0ff
blue-5 #40a9ff
blue-6 #1890ff
blue-7 #096dd9
blue-8 #0050b3
blue-9 #003a8c
blue-10 #002766

Geek Blue / 极客蓝

探索、钻研

geekblue-1 #f0f5ff
geekblue-2 #d6e4ff
geekblue-3 #adc6ff
geekblue-4 #85a5ff
geekblue-5 #597ef7
geekblue-6 #2f54eb
geekblue-7 #1d39c4
geekblue-8 #10239e
geekblue-9 #061178
geekblue-10 #030852

Golden Purple / 酱紫

优雅、浪漫

purple-1 #f9f0ff
purple-2 #efdbff
purple-3 #d3adf7
purple-4 #b37feb
purple-5 #9254de
purple-6 #722ed1
purple-7 #531dab
purple-8 #391085
purple-9 #22075e
purple-10 #120338

Magenta / 法式洋红

明快、感性

magenta-1 #fff0f6
magenta-2 #ffd6e7
magenta-3 #ffadd2
magenta-4 #ff85c0
magenta-5 #f759ab
magenta-6 #eb2f96
magenta-7 #c41d7f
magenta-8 #9e1068
magenta-9 #780650
magenta-10 #520339

Gray / 中性

主次关系

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