HTML 颜色代码表:147 个 CSS 命名颜色,含 hex/RGB/HSL,可搜可排。
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
排序:
共 147 个，显示 147 个
black黑rgb(0, 0, 0)
hsl(0, 0%, 0%)
maroon栗rgb(128, 0, 0)
hsl(0, 100%, 25%)
darkred深红rgb(139, 0, 0)
hsl(0, 100%, 27%)
brown棕rgb(165, 42, 42)
hsl(0, 59%, 41%)
dimgray暗灰rgb(105, 105, 105)
hsl(0, 0%, 41%)
dimgrey暗灰 (英式)rgb(105, 105, 105)
hsl(0, 0%, 41%)
firebrick砖红rgb(178, 34, 34)
hsl(0, 68%, 42%)
gray灰rgb(128, 128, 128)
hsl(0, 0%, 50%)
grey灰 (英式)rgb(128, 128, 128)
hsl(0, 0%, 50%)
red红rgb(255, 0, 0)
hsl(0, 100%, 50%)
indianred印度红rgb(205, 92, 92)
hsl(0, 53%, 58%)
rosybrown玫瑰棕rgb(188, 143, 143)
hsl(0, 25%, 65%)
darkgray深灰rgb(169, 169, 169)
hsl(0, 0%, 66%)
darkgrey深灰 (英式)rgb(169, 169, 169)
hsl(0, 0%, 66%)
lightcoral浅珊瑚rgb(240, 128, 128)
hsl(0, 79%, 72%)
silver银rgb(192, 192, 192)
hsl(0, 0%, 75%)
lightgray浅灰rgb(211, 211, 211)
hsl(0, 0%, 83%)
lightgrey浅灰 (英式)rgb(211, 211, 211)
hsl(0, 0%, 83%)
gainsboro庚斯博罗灰rgb(220, 220, 220)
hsl(0, 0%, 86%)
whitesmoke烟白rgb(245, 245, 245)
hsl(0, 0%, 96%)
snow雪rgb(255, 250, 250)
hsl(0, 100%, 99%)
white白rgb(255, 255, 255)
hsl(0, 0%, 100%)
salmon鲑色rgb(250, 128, 114)
hsl(6, 93%, 71%)
mistyrose雾玫瑰rgb(255, 228, 225)
hsl(6, 100%, 94%)
tomato番茄红rgb(255, 99, 71)
hsl(9, 100%, 64%)
darksalmon深鲑色rgb(233, 150, 122)
hsl(15, 72%, 70%)
orangered橙红rgb(255, 69, 0)
hsl(16, 100%, 50%)
coral珊瑚rgb(255, 127, 80)
hsl(16, 100%, 66%)
lightsalmon浅鲑色rgb(255, 160, 122)
hsl(17, 100%, 74%)
sienna赭rgb(160, 82, 45)
hsl(19, 56%, 40%)
saddlebrown马鞍棕rgb(139, 69, 19)
hsl(25, 76%, 31%)
chocolate巧克力rgb(210, 105, 30)
hsl(25, 75%, 47%)
seashell海贝rgb(255, 245, 238)
hsl(25, 100%, 97%)
sandybrown沙棕rgb(244, 164, 96)
hsl(28, 87%, 67%)
peachpuff蜜桃rgb(255, 218, 185)
hsl(28, 100%, 86%)
peru秘鲁rgb(205, 133, 63)
hsl(30, 59%, 53%)
linen亚麻rgb(250, 240, 230)
hsl(30, 67%, 94%)
darkorange深橙rgb(255, 140, 0)
hsl(33, 100%, 50%)
bisque陶坯黄rgb(255, 228, 196)
hsl(33, 100%, 88%)
tan茶色rgb(210, 180, 140)
hsl(34, 44%, 69%)
burlywood硬木色rgb(222, 184, 135)
hsl(34, 57%, 70%)
antiquewhite古董白rgb(250, 235, 215)
hsl(34, 78%, 91%)
navajowhite纳瓦白rgb(255, 222, 173)
hsl(36, 100%, 84%)
blanchedalmond杏仁白rgb(255, 235, 205)
hsl(36, 100%, 90%)
papayawhip番木瓜rgb(255, 239, 213)
hsl(37, 100%, 92%)
moccasin鹿皮鞋rgb(255, 228, 181)
hsl(38, 100%, 85%)
orange橙rgb(255, 165, 0)
hsl(39, 100%, 50%)
wheat麦色rgb(245, 222, 179)
hsl(39, 77%, 83%)
oldlace旧蕾丝rgb(253, 245, 230)
hsl(39, 85%, 95%)
floralwhite花卉白rgb(255, 250, 240)
hsl(40, 100%, 97%)
darkgoldenrod深金菊rgb(184, 134, 11)
hsl(43, 89%, 38%)
goldenrod金菊黄rgb(218, 165, 32)
hsl(43, 74%, 49%)
cornsilk玉米丝白rgb(255, 248, 220)
hsl(48, 100%, 93%)
gold金rgb(255, 215, 0)
hsl(51, 100%, 50%)
khaki卡其rgb(240, 230, 140)
hsl(54, 77%, 75%)
lemonchiffon柠檬绸黄rgb(255, 250, 205)
hsl(54, 100%, 90%)
palegoldenrod苍金菊rgb(238, 232, 170)
hsl(55, 67%, 80%)
darkkhaki深卡其rgb(189, 183, 107)
hsl(56, 38%, 58%)
olive橄榄rgb(128, 128, 0)
hsl(60, 100%, 25%)
yellow黄rgb(255, 255, 0)
hsl(60, 100%, 50%)
lightgoldenrodyellow浅金菊黄rgb(250, 250, 210)
hsl(60, 80%, 90%)
beige米白rgb(245, 245, 220)
hsl(60, 56%, 91%)
lightyellow浅黄rgb(255, 255, 224)
hsl(60, 100%, 94%)
ivory象牙白rgb(255, 255, 240)
hsl(60, 100%, 97%)
olivedrab橄榄褐rgb(107, 142, 35)
hsl(80, 60%, 35%)
yellowgreen黄绿rgb(154, 205, 50)
hsl(80, 61%, 50%)
darkolivegreen深橄榄绿rgb(85, 107, 47)
hsl(82, 39%, 30%)
greenyellow绿黄rgb(173, 255, 47)
hsl(84, 100%, 59%)
lawngreen草坪绿rgb(124, 252, 0)
hsl(90, 100%, 49%)
chartreuse黄绿rgb(127, 255, 0)
hsl(90, 100%, 50%)
darkgreen深绿rgb(0, 100, 0)
hsl(120, 100%, 20%)
green绿rgb(0, 128, 0)
hsl(120, 100%, 25%)
forestgreen森林绿rgb(34, 139, 34)
hsl(120, 61%, 34%)
lime酸橙绿rgb(0, 255, 0)
hsl(120, 100%, 50%)
limegreen酸橙绿rgb(50, 205, 50)
hsl(120, 61%, 50%)
darkseagreen深海绿rgb(143, 188, 143)
hsl(120, 25%, 65%)
lightgreen浅绿rgb(144, 238, 144)
hsl(120, 73%, 75%)
palegreen苍绿rgb(152, 251, 152)
hsl(120, 93%, 79%)
honeydew蜜瓜白rgb(240, 255, 240)
hsl(120, 100%, 97%)
seagreen海绿rgb(46, 139, 87)
hsl(146, 50%, 36%)
mediumseagreen中海绿rgb(60, 179, 113)
hsl(147, 50%, 47%)
springgreen春绿rgb(0, 255, 127)
hsl(150, 100%, 50%)
mintcream薄荷奶油rgb(245, 255, 250)
hsl(150, 100%, 98%)
mediumspringgreen中春绿rgb(0, 250, 154)
hsl(157, 100%, 49%)
mediumaquamarine中碧绿rgb(102, 205, 170)
hsl(160, 51%, 60%)
aquamarine碧绿rgb(127, 255, 212)
hsl(160, 100%, 75%)
turquoise绿松石rgb(64, 224, 208)
hsl(174, 72%, 56%)
lightseagreen浅海绿rgb(32, 178, 170)
hsl(177, 70%, 41%)
mediumturquoise中绿松石rgb(72, 209, 204)
hsl(178, 60%, 55%)
darkslategray深岩灰rgb(47, 79, 79)
hsl(180, 25%, 25%)
darkslategrey深岩灰 (英式)rgb(47, 79, 79)
hsl(180, 25%, 25%)
teal青绿rgb(0, 128, 128)
hsl(180, 100%, 25%)
darkcyan深青rgb(0, 139, 139)
hsl(180, 100%, 27%)
aqua水绿rgb(0, 255, 255)
hsl(180, 100%, 50%)
cyan青rgb(0, 255, 255)
hsl(180, 100%, 50%)
paleturquoise苍绿松石rgb(175, 238, 238)
hsl(180, 65%, 81%)
lightcyan浅青rgb(224, 255, 255)
hsl(180, 100%, 94%)
azure苍白蓝rgb(240, 255, 255)
hsl(180, 100%, 97%)
darkturquoise深绿松石rgb(0, 206, 209)
hsl(181, 100%, 41%)
cadetblue军服蓝rgb(95, 158, 160)
hsl(182, 25%, 50%)
powderblue粉末蓝rgb(176, 224, 230)
hsl(187, 52%, 80%)
deepskyblue深天蓝rgb(0, 191, 255)
hsl(195, 100%, 50%)
lightblue浅蓝rgb(173, 216, 230)
hsl(195, 53%, 79%)
skyblue天蓝rgb(135, 206, 235)
hsl(197, 71%, 73%)
lightskyblue浅天蓝rgb(135, 206, 250)
hsl(203, 92%, 75%)
steelblue钢蓝rgb(70, 130, 180)
hsl(207, 44%, 49%)
aliceblue爱丽丝蓝rgb(240, 248, 255)
hsl(208, 100%, 97%)
slategray岩灰rgb(112, 128, 144)
hsl(210, 13%, 50%)
slategrey岩灰 (英式)rgb(112, 128, 144)
hsl(210, 13%, 50%)
lightslategray浅岩灰rgb(119, 136, 153)
hsl(210, 14%, 53%)
lightslategrey浅岩灰 (英式)rgb(119, 136, 153)
hsl(210, 14%, 53%)
dodgerblue道奇蓝rgb(30, 144, 255)
hsl(210, 100%, 56%)
lightsteelblue浅钢蓝rgb(176, 196, 222)
hsl(214, 41%, 78%)
cornflowerblue矢车菊蓝rgb(100, 149, 237)
hsl(219, 79%, 66%)
royalblue皇室蓝rgb(65, 105, 225)
hsl(225, 73%, 57%)
navy海军蓝rgb(0, 0, 128)
hsl(240, 100%, 25%)
darkblue深蓝rgb(0, 0, 139)
hsl(240, 100%, 27%)
midnightblue午夜蓝rgb(25, 25, 112)
hsl(240, 64%, 27%)
mediumblue中蓝rgb(0, 0, 205)
hsl(240, 100%, 40%)
blue蓝rgb(0, 0, 255)
hsl(240, 100%, 50%)
lavender薰衣草紫rgb(230, 230, 250)
hsl(240, 67%, 94%)
ghostwhite幽灵白rgb(248, 248, 255)
hsl(240, 100%, 99%)
darkslateblue深岩蓝rgb(72, 61, 139)
hsl(248, 39%, 39%)
slateblue岩蓝rgb(106, 90, 205)
hsl(248, 53%, 58%)
mediumslateblue中岩蓝rgb(123, 104, 238)
hsl(249, 80%, 67%)
mediumpurple中紫rgb(147, 112, 219)
hsl(260, 60%, 65%)
blueviolet蓝紫rgb(138, 43, 226)
hsl(271, 76%, 53%)
indigo靛蓝rgb(75, 0, 130)
hsl(275, 100%, 25%)
darkorchid深兰花紫rgb(153, 50, 204)
hsl(280, 61%, 50%)
darkviolet深紫罗兰rgb(148, 0, 211)
hsl(282, 100%, 41%)
mediumorchid中兰花紫rgb(186, 85, 211)
hsl(288, 59%, 58%)
purple紫rgb(128, 0, 128)
hsl(300, 100%, 25%)
darkmagenta深品红rgb(139, 0, 139)
hsl(300, 100%, 27%)
fuchsia紫红rgb(255, 0, 255)
hsl(300, 100%, 50%)
magenta品红rgb(255, 0, 255)
hsl(300, 100%, 50%)
violet紫罗兰rgb(238, 130, 238)
hsl(300, 76%, 72%)
plum梅红rgb(221, 160, 221)
hsl(300, 47%, 75%)
thistle蓟紫rgb(216, 191, 216)
hsl(300, 24%, 80%)
orchid兰花紫rgb(218, 112, 214)
hsl(302, 59%, 65%)
mediumvioletred中紫罗兰红rgb(199, 21, 133)
hsl(322, 81%, 43%)
deeppink深粉rgb(255, 20, 147)
hsl(328, 100%, 54%)
hotpink亮粉rgb(255, 105, 180)
hsl(330, 100%, 71%)
palevioletred苍紫罗兰红rgb(219, 112, 147)
hsl(340, 60%, 65%)
lavenderblush薰衣草红rgb(255, 240, 245)
hsl(340, 100%, 97%)
crimson深红rgb(220, 20, 60)
hsl(348, 83%, 47%)
pink粉rgb(255, 192, 203)
hsl(350, 100%, 88%)
lightpink浅粉rgb(255, 182, 193)
hsl(351, 100%, 86%)
WCAG 对比度检查
点下方任意两色 → 自动算 WCAG AA / AAA 是否达标。
春风又绿江南岸，明月何时照我还。1234567890。
比值:2.97:1不达标
这个工具能做什么
147 个标准 CSS 命名颜色全表,W3C 自 IE 4 起每个浏览器都支持的固定清单。 每张卡片都有真色大色块、英文名 (`cornflowerblue`)、中文名 (矢车菊蓝)，以及 hex / rgb() / hsl() 三种格式，配 4 个一键复制按钮。支持按英文名、中文名、 hex 片段搜索 (输入 `#ff` 一秒挑出所有红色系)。整张表可按色相 (0°→360° 走 一遍彩虹)、亮度 (最白→最黑)、饱和度 (鲜艳→灰)、字母 A→Z 4 种方式重排。 Filter 标签可切到暖色 (红橙黄粉)、冷色 (蓝绿)、中性色 (灰白)、青色品红一族。 底部 WCAG 对比度检查器：点任意两个色块，立刻算 WCAG 2.1 对比度，标出 AA / AA Large / AAA 是否达标。全部本地计算，零追踪、零接口、不需要登录。
工具细节
- 输入
- 文本 + 数值 + 结构化内容
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 免账号使用
- 打开页面即可使用；刷新后是否保留结果取决于具体工具。
- 性能预算
- 首屏 JS ≤ 25 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 程序员
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
HTML 颜色代码表 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
没有设计系统时,临时写一个错误提示框
你在补一个没接 Tailwind 的后台管理页,只有一份裸 CSS,想马上 要一个柔和的红色警告框,不想去翻 hex。在搜索框输入「红」或 「red」,扫一眼偏粉的那几个色块,直接抄 `background: mistyrose; border-color: salmon`。两个命名颜色搞定,下一个看 CSS 的同事 一眼就懂你要的是哪种红。
提交配色前,先确认两个颜色过 AA
同事提议 `cornsilk` 卡片上放 `goldenrod` 文字,看着还行,但你 怀疑对比度不够。在网格里点这两个色块,底部检查器显示 1.6:1, 离 AA 的 4.5:1 底线差远了。你把文字换成 `saddlebrown` (5.2:1) 就过了,不用再补一张无障碍整改单。
给双语风格指南配上中文颜色名
你的中文设计文档里,每个强调色既要英文关键字也要一个读得顺的 中文标签。搜 `cornflowerblue`,看到旁边配好的「矢车菊蓝」,两个 一起填进文档。147 张卡片各自带审过的中文名,省得你把 「lightgoldenrodyellow」硬翻成一串没法读的字。
给 CSS 颜色速查表挑一个能打印的排列顺序
你在给一场工作坊做单页参考表。把网格按色相排,147 个颜色就 沿彩虹 0°→360° 走一遍,截图下来就是一张顺着逻辑排的色表,而 不是 A 到 Z 乱序、`darkred` 和 `red` 隔了 90 张卡的版本。再按 亮度排一遍,还能多出一张从灰到艳的副表。
常见踩坑
以为 `gray` 和 `grey` 是两种颜色,其实完全一样,`darkgray` 和 `darkgrey` 都是
默认任意命名颜色搭配都可读,`goldenrod` 配 `cornsilk` 只有 1.6:1,把一个当文字色前先在底部检查器点这两块算一下对比度。
在设计系统里用命名颜色,它表达不了 `red-500`/`red-600` 这种色阶,留给 demo 和错误态就好,别拿来当需要浓淡分级的 token。
隐私说明
这个页面全部在你的浏览器里跑。147 个颜色是内置的静态清单,搜索框、排序、筛选标签、对比度检查器选的色块都是本地算的。你输入或点的任何内容默认不发服务器、不记日志、也不写进网址,没有接口调用、没有追踪像素,也不需要登录。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。