常用颜色代码对照表 - HEX / RGB / HSL 速查

纯红、纯绿、纯蓝、黑白灰、天蓝、金、紫等常用颜色的 HEX、RGB、HSL 对照，查色抄色直接用。

这张表怎么用

这张表把常用颜色在三种写法下的值并排列出来，四列分别是颜色名、HEX、RGB、HSL。同一行说的是同一个颜色，写 CSS、改主题色、抄设计稿标注时，按行取对应的值即可。第一列的颜色名只是方便认读的俗称，真正决定颜色的是后三列的数值。

HEX 和 RGB 是同一件事

HEX 和 RGB 说的是同一个颜色，区别只在进制。HEX 写成 #RRGGBB，每两位一段，按十六进制读出来就是红、绿、蓝的十进制值：FF=255、80=128、33=51、CC=204。所以表里 #FF0000 对应 rgb(255, 0, 0)，#808080 对应 rgb(128, 128, 128)。把 RGB 每个数字转成两位十六进制再拼起来，就是 HEX，两个方向都能互推。

HSL 换了个角度描述颜色

HSL 用色相（H）、饱和度（S）、明度（L）三个参数描述颜色。色相是 0~360 的度数，红在 0 度、绿在 120 度、蓝在 240 度；饱和度 0~100% 表示颜色有多艳，0 就是灰；明度 0~100% 表示明暗，0 是黑、100% 是白，纯色都落在 50% 这一层。所以纯红是 hsl(0, 100%, 50%)，黑是 hsl(0, 0%, 0%)，白是 hsl(0, 0%, 100%)。

为什么纯色都在 50% 明度

看表里的纯红、纯绿、纯蓝、纯黄、青、品红，它们的 HSL 明度都是 50%。原因是明度到 100% 就变成白、到 0 就变成黑，颜色最饱满的位置正好在中间那一层。这也解释了为什么调亮或调暗一个纯色，只要把 L 往上或往下拖，颜色就会向白或黑靠拢，而色相基本不变。

灰阶为什么饱和度是 0

表里的黑、白、灰、深灰、浅灰，HSL 饱和度都是 0。因为灰阶的红绿蓝三个分量数值相等，没有哪一种是主导，色相就无从谈起，饱和度也就归零。所以判断一个颜色是不是灰阶，看它的 RGB 三个数是否相等，或看 HSL 的饱和度是不是 0，两个办法都行。

缩写：六位能变三位，但有条件

CSS 允许把六位 HEX 缩写成三位，条件是红、绿、蓝每一段的两个字符完全相同。#FFFFFF 三段都是 FF，可以缩成 #FFF；#FFCC00 三段各自成对，也能缩成 #FC0。反过来，像 #FF8000 就不能缩——绿段是 80，两个字符不一样，硬缩成 #F80 会被浏览器读成 #FF8800，颜色就变了。判断标准就一条：每一段是否两两相同。

查表之外：几个容易搞混的点

一是别把 HEX 和 RGB 当成两种不同的颜色，它们只是同一个值的两种写法。二是别看到 #F00 就以为是别的颜色，它展开就是 #FF0000。三是 HSL 里的百分号不能漏，hsl(0, 100, 50) 这种不带百分号的写法浏览器不认。四是表里的颜色名是俗称，同一个名字在不同场合可能指不同色值，以数值为准。

想换色或微调，用转换工具更省事

这张表适合查固定色值；如果你手上是一个具体颜色、想换成另一种写法，或者想在此基础上调亮调暗，用颜色转换器会更方便——输入任一种写法就能得到其余几种，还能拖滑杆微调明度和饱和度。表是速查，工具是换算，两者配合着用最顺。