Lazy loaded image
🟥WEB 标准颜色表
字数 448阅读时长 2 分钟
2025-9-26
2025-9-28
type
status
date
slug
summary
tags
category
icon
password
🚩
近期在博客搭建期间经常会用到CSS色号,临时搜索数值便遇到了广告的困扰。索性用些时间把常用的RBG颜色整理出来,方便使用。利用自己的小站发布出来,同样也方便大家,欢迎使用。
本文档按「红、橙、黄、绿、蓝、紫、粉、棕、灰、白、黑」11 大主体色系分类,每个色系含 12-13 个颜色,均按「观感由深至浅」排序(依据颜色明度:明度越低越靠前,越高越靠后),包含可视化颜色卡及多维度属性,可直接用于网页设计与博客素材。

一、红色系(热情、警示)

序号
颜色卡
中文颜色名
英文色彩名称
CSS 色号 (RGB16 进制)
RGB 10 进制
词源 / 备注
1
褐红 / 栗红
Maroon
#800020
(128, 0, 32)
源自法语 “marron”(栗子),最深的红色系颜色,显沉稳,适合复古标题
2
暗红 / 墨红
DarkRed
#8B0000
(139, 0, 0)
接近 “墨色” 的深红色,适合深色模式下的强调色
3
火砖红
FireBrick
#B22222
(178, 34, 34)
模拟火砖烧制后的深棕红,常用于庄重场景的边框 / 按钮
4
深红 / 猩红
Crimson
#DC143C
(220, 20, 60)
源自古拉丁语 “carmesinus”(昆虫染料色),比火砖红更亮,显优雅
5
宝石红 /ruby 红
RubyRed
#E0115F
(224, 17, 95)
模拟红宝石的深红色,带微粉调,适合美妆、珠宝类设计
6
印度红
IndianRed
#CD5C5C
(205, 92, 92)
因印度传统染料常用此色得名,偏棕红,适合复古背景
7
鲑鱼红
Salmon
#FA8072
(250, 128, 114)
匹配鲑鱼肉的橙红色,显柔和,适合健康、食品类界面
8
番茄红
Tomato
#FF6347
(255, 99, 71)
模拟成熟番茄的亮橙红,活泼不刺眼,适合生活类标签
9
橙红 / 火焰红
OrangeRed
#FF4500
(255, 69, 0)
介于红与橙之间,色调如火焰,适合高关注度按钮
10
浅绯红
LightCrimson
#FF6B6B
(255, 107, 107)
比番茄红更浅,带微粉,适合儿童、母婴类界面
11
淡红 / 浅珊瑚红
LightCoral
#FF8C8C
(255, 140, 140)
偏浅的珊瑚红色,适合医疗、养生类背景色
12
纯红
Red
#FF0000
(255, 0, 0)
WEB 标准基础红色,明度最高,常用于警示标识(如 “禁止”)

二、橙色系(活力、温暖)

序号
颜色卡
中文颜色名
英文色彩名称
CSS 色号 (RGB16 进制)
RGB 10 进制
词源 / 备注
13
焦橙 /burnt 橙
BurntOrange
#CC5500
(204, 85, 0)
模拟 “烧焦” 的深橙色,带棕调,适合复古、工装风格
14
暗橙 / 琥珀橙
DarkOrange
#FF8C00
(255, 140, 0)
比标准橙深,接近琥珀色,适合秋冬主题设计
15
南瓜橙
Pumpkin
#FF6B35
(255, 107, 53)
匹配成熟南瓜的深橙,色调浓郁,适合万圣节、秋季界面
16
赭石橙
BurntSienna
#E2725B
(226, 114, 91)
源自天然赭石矿物色,偏棕橙,适合手绘、艺术类设计
17
杏橙
Apricot
#FF9F43
(255, 159, 67)
模拟杏肉的浅橙,显清新,适合美妆、食品类界面
18
珊瑚橙
Coral
#FF7F50
(255, 127, 80)
匹配珊瑚的自然橙粉,柔和不刺眼,适合母婴类设计
19
标准橙
Orange
#FFA500
(255, 165, 0)
WEB 标准基础橙色,源自 “橙子” 果皮色,传递活力
20
脐橙色
NavelOrange
#FFA07A
(255, 160, 122)
模拟脐橙果肉的浅橙,显温暖,适合餐饮类界面
21
浅橙 / 柑橘橙
LightOrange
#FFB347
(255, 179, 71)
比标准橙浅,接近柑橘果肉,适合夏季主题设计
22
桃粉橙
PeachPuff
#FFDAB9
(255, 218, 185)
模拟水蜜桃的浅橙粉,显温柔,适合女性向界面
23
鹿皮橙
Moccasin
#FFE4B5
(255, 228, 181)
匹配鹿皮鞋的浅橙棕,适合家居、服饰类设计
24
超浅橙
VeryLightOrange
#FFF3CD
(255, 243, 205)
接近白色的浅橙,适合作为背景色避免视觉疲劳

三、黄色系(明亮、愉悦)

序号
颜色卡
中文颜色名
英文色彩名称
CSS 色号 (RGB16 进制)
RGB 10 进制
词源 / 备注
25
橄榄褐黄
OliveDrab
#6B8E23
(107, 142, 35)
带褐调的深黄,接近橄榄枝叶,适合军事、户外风格
26
橄榄黄
Olive
#556B2F
(85, 107, 47)
源自拉丁语 “olīva”(橄榄),显稳重,适合工装类设计
27
金棕黄
GoldenBrown
#DAA520
(218, 165, 32)
模拟黄金与棕色的混合色,显华贵,适合高端装饰元素
28
金色 / 琥珀黄
Gold
#FFD700
(255, 215, 0)
匹配黄金的金属光泽,适合庆典、高端品牌按钮
29
琥珀黄
Amber
#FFC107
(255, 193, 7)
源自阿拉伯语 “ʿanbar”(琥珀),比金色柔和,显复古
30
芥末黄
Mustard
#FFDB58
(255, 219, 88)
模拟芥末酱的深黄,显浓郁,适合餐饮、警示标签
31
纯黄
Yellow
#FFFF00
(255, 255, 0)
WEB 标准基础黄色,明度最高,常用于 “注意” 标识
32
苍金黄
PaleGoldenRod
#EEE8AA
(238, 232, 170)
偏浅的金黄色,显柔和,适合田园、自然主题背景
33
柠檬雪纺黄
LemonChiffon
#FFFACD
(255, 250, 205)
字面意为 “柠檬雪纺”,浅黄带微白,适合轻量设计背景
34
玉米黄
Cornsilk
#FFF8DC
(255, 248, 220)
模拟玉米丝的浅黄,显温暖,适合农业、生活类界面
35
浅黄
LightYellow
#FFFFE0
(255, 255, 224)
比玉米黄更浅,适合作为卡片底色或次要背景
36
超浅黄
VeryLightYellow
#FFFFF0
(255, 255, 240)
接近白色的浅黄,适合浅色模式下的大面积背景

四、绿色系(自然、健康)

序号
颜色卡
中文颜色名
英文色彩名称
CSS 色号 (RGB16 进制)
RGB 10 进制
词源 / 备注
37
深绿
DarkGreen
#006400
(0, 100, 0)
最深的标准绿色,接近森林深处的枝叶,显庄重
38
森林绿
ForestGreen
#228B22
(34, 139, 34)
模拟森林中成熟树叶的绿色,适合生态、户外类设计
39
海绿
SeaGreen
#2E8B57
(46, 139, 87)
带蓝调的深绿,接近海水藻类颜色,适合水族、旅游界面
40
中海水绿
MediumSeaGreen
#3CB371
(60, 179, 113)
比海绿浅,显清新,适合健康、环保类品牌主色
41
鲜绿 / 苹果绿
LimeGreen
#32CD32
(50, 205, 50)
模拟青苹果的亮绿,适合食品、儿童类界面
42
标准绿
Green
#008000
(0, 128, 0)
WEB 标准基础绿色,象征健康,常用于 “成功” 状态(如√图标)
43
酸橙绿
Lime
#00FF00
(0, 255, 0)
源自波斯语 “līmū”(酸橙),比标准绿更亮,显活泼
44
春绿
MediumSpringGreen
#00FA9A
(0, 250, 154)
模拟春天新叶的浅绿,显生机,适合春季主题设计
45
浅绿 / 薄荷绿
LightGreen
#90EE90
(144, 238, 144)
接近薄荷叶片的浅绿,适合医疗、美妆类背景
46
淡绿
PaleGreen
#98FB98
(152, 251, 152)
比薄荷绿更浅,显柔和,适合母婴、儿童类界面
47
超浅绿
VeryLightGreen
#F0FFF0
(240, 255, 240)
接近白色的浅绿,适合浅色模式下的大面积背景
48
薄荷霜绿
MintCream
#F5FFFA
(245, 255, 250)
带微蓝的超浅绿,显清新,适合养生、美妆类设计

五、蓝色系(冷静、信任)

序号
颜色卡
中文颜色名
英文色彩名称
CSS 色号 (RGB16 进制)
RGB 10 进制
词源 / 备注
49
午夜蓝
MidnightBlue
#191970
(25, 25, 112)
最深的标准蓝色,接近午夜夜空,显神秘,适合暗黑风格
50
藏蓝 / 海军蓝
Navy
#000080
(0, 0, 128)
源自 “海军制服色”,显庄重,适合企业官网、政府平台
51
深蓝
DarkBlue
#00008B
(0, 0, 139)
比藏蓝浅,适合深色模式下的文字、边框
52
皇家蓝
RoyalBlue
#4169E1
(65, 105, 225)
源自欧洲王室常用色,显高贵,适合高端品牌主色
53
中蓝
MediumBlue
#0000CD
(0, 0, 205)
介于深蓝与标准蓝之间,适合按钮、标题强调色
54
纯蓝
Blue
#0000FF
(0, 0, 255)
WEB 标准基础蓝色,象征信任,常用于科技、金融类网站
55
天蓝
SkyBlue
#1E90FF
(30, 144, 255)
模拟晴朗天空的蓝色,显明亮,适合旅游、航空类界面
56
浅天蓝
LightSkyBlue
#87CEEB
(135, 206, 235)
比天蓝浅,接近清晨天空,适合轻量设计背景
57
婴儿蓝
BabyBlue
#89CFF0
(137, 207, 240)
偏浅的蓝,显温柔,适合母婴、儿童类界面
58
粉蓝
PowderBlue
#B0E0E6
(176, 224, 230)
带微白的浅蓝,适合美妆、女性向设计
59
淡蓝
LightBlue
#ADD8E6
(173, 216, 230)
比粉蓝更浅,适合作为卡片底色或次要背景
60
爱丽丝蓝
AliceBlue
#F0F8FF
(240, 248, 255)
接近白色的浅蓝,适合浅色模式下的大面积背景

六、紫色系(神秘、高贵)

序号
颜色卡
中文颜色名
英文色彩名称
CSS 色号 (RGB16 进制)
RGB 10 进制
词源 / 备注
61
靛蓝紫
Indigo
#4B0082
(75, 0, 130)
源自希腊语 “indikon”(印度染料),最深的紫色系颜色
62
暗紫 / 墨紫
DarkPurple
#301934
(48, 25, 52)
接近 “墨色” 的深紫,显神秘,适合暗黑、科技风格
63
紫晶色
DarkOrchid
#9932CC
(153, 50, 204)
模拟紫水晶的深紫,显优雅,适合珠宝、美妆类设计
64
蓝紫 / 紫罗兰
BlueViolet
#8A2BE2
(138, 43, 226)
带蓝调的深紫,适合文艺、创意类品牌主色
65
标准紫
Purple
#800080
(128, 0, 128)
WEB 标准基础紫色,象征高贵,常用于艺术、时尚类网站
66
薰衣草紫
MediumPurple
#9370DB
(147, 112, 219)
模拟薰衣草花田的紫色,显柔和,适合家居、养生类设计
67
兰紫
Orchid
#DA70D6
(218, 112, 214)
带粉调的浅紫,适合女性向、婚庆类界面
68
李紫
Plum
#DDA0DD
(221, 160, 221)
源自 “李子” 果皮色,比兰紫深,显温柔
69
蔷薇粉紫
PaleVioletRed
#DB7093
(219, 112, 147)
带红调的浅紫,适合美妆、婚庆类设计
70
紫罗兰浅紫
Violet
#EE82EE
(238, 130, 238)
比薰衣草紫浅,显活泼,适合儿童、文艺类界面
71
淡薰衣草紫
Lavender
#E6E6FA
(230, 230, 250)
接近白色的浅紫,适合作为背景色避免视觉疲劳
72
超浅紫
VeryLightPurple
#F5F0FF
(245, 240, 255)
最浅的紫色系颜色,适合浅色模式下的大面积背景

七、粉色系(温柔、浪漫)

序号
颜色卡
中文颜色名
英文色彩名称
CSS 色号 (RGB16 进制)
RGB 10 进制
词源 / 备注
73
暗粉 / 紫罗兰红
MediumVioletRed
#C71585
(199, 21, 133)
最深的粉色系颜色,带紫调,显优雅,适合高端美妆设计
74
深红粉 / 玫瑰红
DeepPink
#FF1493
(255, 20, 147)
偏红的深粉,模拟红玫瑰,适合婚庆、庆典类界面
75
亮粉 / 桃红
HotPink
#FF69B4
(255, 105, 180)
色调鲜艳的粉,接近桃花,显活泼,适合时尚、美妆类设计
76
灰粉 / 雾粉
DustyRose
#D8BFD8
(216, 191, 216)
带灰调的浅粉,显高级,适合极简、文艺类界面
77
品红粉
Fuchsia
#FF00FF
(255, 0, 255)
带紫调的亮粉,显独特,适合创意、艺术类设计
78
标准粉
Pink
#FFC0CB
(255, 192, 203)
源自 “石竹花” 色,WEB 标准基础粉色,适合女性向设计
79
薰衣草粉
LavenderPink
#FBAED2
(251, 174, 210)
带紫调的浅粉,模拟薰衣草花,适合家居、养生类界面
80
浅粉 / 浅桃红
LightPink
#FFB6C1
(255, 182, 193)
比标准粉浅,显柔和,适合母婴、儿童类设计
81
淡紫粉
Mauve
#E0B0FF
(224, 176, 255)
带紫调的超浅粉,显清新,适合美妆、文艺类界面
82
婴儿粉
BabyPink
#FFD1DC
(255, 209, 220)
偏白的浅粉,显温柔,适合母婴、儿童类背景
83
淡粉 / 苍白粉
PalePink
#FFE4E1
(255, 228, 225)
接近白色的浅粉,适合作为卡片底色或次要背景
84
超浅粉
VeryLightPink
#FFE6F2
(255, 230, 242)
最浅的粉色系颜色,适合浅色模式下的大面积背景

八、棕色系(沉稳、复古)

序号
颜色卡
中文颜色名
英文色彩名称
CSS 色号 (RGB16 进制)
RGB 10 进制
词源 / 备注
85
深棕 / 黑棕
DarkBrown
#3C2A21
(60, 42, 33)
最深的棕色系颜色,接近 “黑棕”,显庄重,适合复古家具设计
86
马鞍棕
SaddleBrown
#8B4513
(139, 69, 19)
模拟马鞍皮革的深棕,显复古,适合工装、户外风格
87
巧克力棕
Chocolate
#D2691E
(210, 105, 30)
匹配巧克力的深棕,显浓郁,适合餐饮、甜品类界面
88
标准棕
Brown
#A52A2A
(165, 42, 42)
WEB 标准基础棕色,源自英语 “brūn”,适合家具、皮革类设计
89
秘鲁棕
Peru
#CD853F
(205, 133, 63)
源自 “秘鲁” 传统染料色,偏浅棕,适合自然、田园主题
90
沙棕
SandyBrown
#F4A460
(244, 164, 96)
模拟沙滩的浅棕,显温暖,适合旅游、户外类界面
91
小麦棕
Tan
#D2B48C
(210, 180, 140)
匹配小麦成熟后的颜色,偏浅棕,适合美妆(肤色参考)
92
硬木棕
BurlyWood
#DEB887
(222, 184, 135)
模拟硬木的浅棕,显自然,适合家具、建筑类设计
93
浅棕
LightBrown
#C19A6B
(193, 154, 107)
比硬木棕浅,显柔和,适合家居、服饰类背景
94
小麦色
Wheat
#F5DEB3
(245, 222, 179)
接近小麦粉的浅棕,适合食品、农业类界面
95
纳瓦霍棕
NavajoWhite
#FFDEAD
(255, 222, 173)
源自印第安纳瓦霍部落传统色,偏浅棕黄,适合复古设计
96
超浅棕
VeryLightBrown
#E8DCCA
(232, 220, 202)
最浅的棕色系颜色,适合浅色模式下的背景

九、灰色系(中性、简约)

序号
颜色卡
中文颜色名
英文色彩名称
CSS 色号 (RGB16 进制)
RGB 10 进制
词源 / 备注
97
深灰黑
DarkSlateGray
#333333
(51, 51, 51)
最深的标准灰色,接近黑色,适合深色模式背景
98
暗灰
DimGray
#696969
(105, 105, 105)
比深灰黑浅,适合深色模式下的次要文字
99
石板灰
SlateGray
#708090
(112, 128, 144)
带蓝调的深灰,模拟石板颜色,适合工业、科技风格
100
标准灰
Gray
#808080
(128, 128, 128)
WEB 标准基础灰色,中性色,常用于分隔线、次要文字
101
浅石板灰
LightSlateGray
#778899
(119, 136, 153)
比石板灰浅,适合边框、卡片阴影
102
暗浅灰
DarkGray
#A9A9A9
(169, 169, 169)
比标准灰浅,适合浅色模式下的边框
103
银灰
Silver
#C0C0C0
(192, 192, 192)
模拟银金属的浅灰,显高级,适合装饰元素
104
浅灰
LightGray
#D3D3D3
(211, 211, 211)
比银灰浅,适合浅色模式下的分隔线、卡片背景
105
超浅灰
Gainsboro
#DCDCDC
(220, 220, 220)
接近白色的浅灰,适合输入框、列表背景
106
灰褐
LavenderGray
#C9C0BB
(201, 192, 187)
带棕调的浅灰,显柔和,适合家居、服饰类设计
107
极浅灰
VeryLightGray
#F0F0F0
(240, 240, 240)
比超浅灰更浅,适合浅色模式下的次要背景
108
烟灰
WhiteSmoke
#F5F5F5
(245, 245, 245)
最浅的灰色系颜色,适合大面积背景避免视觉疲劳

十、白色系(纯净、简洁)

序号
颜色卡
中文颜色名
英文色彩名称
CSS 色号 (RGB16 进制)
RGB 10 进制
词源 / 备注
109
米白 /beige 白
Beige
#F5F5DC
(245, 245, 220)
带黄调的深白色,显温暖,适合家居、服饰类背景
110
亚麻白
Linen
#FAF0E6
(250, 240, 230)
模拟亚麻布的白色,带浅棕调,适合复古、文艺设计
111
古董白
AntiqueWhite
#FAEBD7
(250, 235, 215)
带黄调的浅白,显复古,适合艺术、手工类界面
112
老 lace 白
OldLace
#FDF5E6
(253, 245, 230)
模拟蕾丝的白色,带浅黄调,适合婚庆、女性向设计
113
奶油白
Cream
#FFFDDC
(255, 253, 220)
模拟奶油的白色,带黄调,适合食品、美妆类界面
114
象牙白
Ivory
#FFFFF0
(255, 255, 240)
模拟象牙的白色,显高贵,适合高端珠宝、服饰设计
115
贝壳白
Seashell
#FFF5EE
(255, 245, 238)
模拟贝壳的白色,带粉调,适合美妆、母婴类设计
116
雪花白
Snow
#FFFAFA
(255, 250, 250)
接近雪花的白色,带微粉,显纯净,适合冬季主题
117
蜜瓜白
Honeydew
#F0FFF0
(240, 255, 240)
带绿调的浅白,显清新,适合健康、养生类界面
118
爱丽丝白
AliceBlue
#F0F8FF
(240, 248, 255)
带蓝调的浅白,显优雅,适合文艺、女性向设计
119
纯白
White
#FFFFFF
(255, 255, 255)
WEB 标准基础白色,象征纯净,最常用的背景色

十一、黑色系(庄重、神秘)

序号
颜色卡
中文颜色名
英文色彩名称
CSS 色号 (RGB16 进制)
RGB 10 进制
词源 / 备注
121
纯黑
Black
#000000
(0, 0, 0)
WEB 标准基础黑色,明度最低,象征庄重,常用于文字、边框
122
超暗黑
UltraDarkCharcoal
#121212
(18, 18, 18)
比纯黑略浅,避免压抑感,适合暗黑模式背景
123
深灰黑
DarkCharcoal
#1A1A1A
(26, 26, 26)
适合暗黑模式下的卡片背景,增强层次感
124
暗石板黑
DarkSlate
#202938
(32, 41, 56)
带蓝调的深黑,显科技感,适合科技、游戏类界面
125
石板黑
Slate
#2C3E50
(44, 62, 80)
比暗石板黑浅,适合暗黑模式下的按钮、标题
126
炭黑
Charcoal
#36454F
(54, 69, 79)
模拟木炭的颜色,显自然,适合工业、复古风格
127
中炭黑
MediumCharcoal
#4A4A4A
(74, 74, 74)
适合暗黑模式下的次要文字,增强可读性
128
浅炭黑
LightCharcoal
#555555
(85, 85, 85)
比中炭黑浅,适合暗黑模式下的注释文字
129
灰黑
MediumGrayBlack
#666666
(102, 102, 102)
介于黑与灰之间,适合浅色模式下的深色文字
130
浅灰黑
LightGrayBlack
#777777
(119, 119, 119)
适合浅色模式下的次要文字、边框
131
极浅灰黑
VeryLightGrayBlack
#888888
(136, 136, 136)
比浅灰黑浅,适合浅色模式下的注释文字
132
近灰黑
NearGrayBlack
#999999
(153, 153, 153)
最浅的黑色系颜色,适合过渡到灰色系的衔接色

备注说明

  1. 排序逻辑:每个色系按「颜色明度」从低到高排序(观感由深至浅),明度计算参考公式:明度 = (299R + 587G + 114B) / 1000(R/G/B 为 0-255 数值),确保视觉上的深浅过渡自然;
  1. 色号兼容性:所有色号均符合 CSS 2.1 及以上标准,可直接用于backgroundcolor等样式属性,兼容主流浏览器;
 
上一篇
温铁军:房地产金融化推高社会成本,城镇化不能翻版城市化【温言铁语】
下一篇
浅谈“预制菜”:别只纠结 “是不是预制”,看看预制背后有哪些门道