颜色代码转换教程：HEX、RGB、HSL 互转方法与使用场景选择

HEX、RGB、HSL 是网页设计和前端开发中最常用的三种颜色表示法，它们描述的是同一个颜色空间中的同一种颜色，只是组织方式不同。你可以把 HEX 和 RGB 理解为「面向机器」的写法，把 HSL 理解为「面向人」的写法。三者之间可以无损互转，选择哪一种取决于你当前要解决的问题：写 CSS 值用 HEX 或 RGB，调色、生成同色系变体、做主题换肤则优先用 HSL。\n\n## 三种颜色表示法分别是什么\n\n### HEX 十六进制\n\n以 # 开头，后跟 6 位十六进制数字，是 Web 上使用最广泛的颜色格式。每两位一组，依次代表红、绿、蓝三个通道，取值范围从 00 到 FF，对应十进制的 0 到 255。\n\n例如 #FF5733：\n\n- 红色通道 FF 对应 255\n- 绿色通道 57 对应 87\n- 蓝色通道 33 对应 51\n\nHEX 还支持 3 位简写形式。当每一组两位数字相同（如 #FF、#88）时，可以缩写成一位。例如 #FF8800 可以写成 #F80，#FFFFFF 可以写成 #FFF。简写只是书写上的省略，浏览器解析时会自动把每一位复制成两位，颜色值完全一致。如果两位数字不相同，就不能简写。\n\n### RGB 红绿蓝\n\n直接指定红、绿、蓝三个通道的数值，每个通道取值范围 0 到 255，写法为 rgb(255, 87, 51)。它和 HEX 表达的是同一组通道值，只是进制不同：HEX 用十六进制，RGB 用十进制。\n\nRGB 还支持 alpha 透明度通道，写成 rgba(255, 87, 51, 0.5)。alpha 取值范围是 0 到 1，0 表示完全透明，1 表示完全不透明。现代 CSS 也允许在 rgb() 中直接写第四个参数表示 alpha。HEX 同样有带透明度的写法，即在 6 位之后追加两位表示 alpha，例如 8 位十六进制。\n\n### HSL 色相、饱和度、亮度\n\nHSL 由三个分量组成：\n\n- 色相 Hue：0 到 360 度，表示在色轮上的位置。0 度是红色，120 度附近是绿色，240 度附近是蓝色，360 度回到红色。\n- 饱和度 Saturation：0% 到 100%，表示颜色的纯度。0% 是灰色，100% 是最鲜艳的状态。\n- 亮度 Lightness：0% 到 100%，表示明暗程度。0% 是黑色，100% 是白色，50% 是「标准」亮度。\n\n写法为 hsl(9, 100%, 60%)，同样可以附加 alpha 通道。\n\nHSL 的核心优势是直觉性。当你想得到「同一个色系但更亮一点」的颜色时，只需要提高亮度值；想得到「更灰一点」的版本，只需要降低饱和度。而在 HEX 或 RGB 中做同样的调整，你必须重新计算三个通道，很难靠肉眼完成。\n\n## 转换公式与原理\n\n### HEX 转 RGB\n\n按位取值再转成十进制即可：\n\n- R = parseInt(HEX 第 1 到 2 位, 16)\n- G = parseInt(HEX 第 3 到 4 位, 16)\n- B = parseInt(HEX 第 5 到 6 位, 16)\n\n如果是 3 位简写，先把每一位复制成两位，再按上面的方式计算。\n\n### RGB 转 HEX\n\n把每个通道的十进制值转成两位十六进制，不足两位前面补零，然后拼接起来，前面加 #。例如 255 转成 FF，87 转成 57，51 转成 33，拼成 #FF5733。\n\n### RGB 转 HSL\n\n先把每个通道除以 255 归一化到 0 到 1：\n\n- R' = R/255，G' = G/255，B' = B/255\n- Cmax = max(R', G', B')\n- Cmin = min(R', G', B')\n- Δ = Cmax − Cmin\n\n然后：\n\n- 亮度 L = (Cmax + Cmin) / 2\n- 饱和度 S = Δ / (1 − |2L − 1|)\n- 色相 H 根据 Δ 是否为零、以及 Cmax 对应哪个通道，用分段公式计算，最终结果落在 0 到 360 度之间\n\n分段的原因是色相在色轮上是环形分布的，红、绿、蓝三个区间需要分别处理。实际开发中不必手算，浏览器开发者工具、设计软件和在线转换器都能直接给出结果，理解公式的意义在于知道转换是无损的、可以放心互转。\n\n### HSL 转 RGB\n\n这是上面过程的逆运算：先由色相确定落在哪个 60 度区间，再结合饱和度和亮度还原出三个通道值，最后乘以 255。同样，工具可以完成，理解逻辑即可。\n\n## 分步操作：把一套主题色从 HEX 迁移到 HSL\n\n如果你想把现有项目里的颜色体系改用 HSL 管理，可以按下面的步骤操作。\n\n第一步，收集现有颜色值。把项目中所有用到的 HEX 颜色值列出来，包括主色、辅助色、文字色、边框色、背景色。\n\n第二步，逐个转换为 HSL。使用开发者工具的颜色选择器或任意在线转换工具，把每个 HEX 值转成 HSL 三元组，记录下色相、饱和度、亮度三个数值。\n\n第三步，归类色相。观察这些颜色的色相值，你会发现同一套主题色往往集中在少数几个色相附近。把属于同一色系的颜色归为一组。\n\n第四步，提取统一的饱和度与亮度规律。比如主色可能是某个亮度值，悬停态比它更亮，按下态比它更暗。把这种规律写成可复用的变量。\n\n第五步，用 CSS 变量定义。把色相、饱和度、亮度拆成独立变量，例如定义一个色相变量、一个饱和度变量，再为不同状态定义各自的亮度变量。这样换肤时只需要改变色相变量，整套颜色会一起变化。\n\n第六步，验证对比度。颜色调整后，重新检查文字与背景的对比度是否仍然可读，尤其是正文文字和按钮文字。\n\n## 常见错误与注意事项\n\n第一，混淆 HEX 的 3 位简写条件。只有当每一组两位完全相同才能简写，#F80 合法，#F8A 不合法。\n\n第二，忘记 alpha 的取值范围。在 rgba() 中 alpha 是 0 到 1 的小数，不是 0 到 255。写 rgba(255, 87, 51, 128) 不会得到半透明效果。\n\n第三，误以为 HSL 的亮度 50% 就是「最鲜艳」。实际上饱和度为 100%、亮度为 50% 时颜色最纯，亮度偏离 50% 会同时向黑或白靠近，视觉上饱和度会下降。\n\n第四，在 HSL 中做渐变时直接线性插值色相。由于色相是环形的，从 350 度过渡到 10 度如果直接走数值会绕一大圈，需要走跨越 0 度的短路径。\n\n第五，把 HSL 当作感知均匀的颜色模型。HSL 并不是感知均匀的，相同亮度值下不同色相给人的明暗感受并不一致，做严格的可访问性对比度计算时应使用专门的对比度公式或工具。\n\n## 适用与不适用场景\n\nHEX 适合直接书写在样式表中，简短、通用、复制粘贴方便，是设计稿交付的默认格式。但它不适合做程序化的颜色计算，因为三个通道是压缩在一起的。\n\nRGB 适合需要按通道计算的场景，也适合需要显式控制透明度的场景。\n\nHSL 适合设计系统的主题管理、同色系变体生成、换肤功能，以及需要对颜色做直觉化调整的场景。它不适合需要精确感知均匀度的场景，也不适合需要与设计稿逐位比对的场景。\n\n## 常见问题\n\n问：HEX、RGB、HSL 互相转换会丢失精度吗？\n答：不会。三者描述的是同一个颜色空间，转换只是进制和坐标系的换算，只要按标准公式计算并正确取整，颜色值可以完整还原。\n\n问：为什么设计稿给的是 HEX，代码里却建议用 HSL？\n答：HEX 便于交付和复制，HSL 便于程序化生成变体和统一管理。常见做法是设计稿用 HEX 沟通，代码中用 HSL 变量组织主题。\n\n问：3 位 HEX 和 6 位 HEX 有什么区别？\n答：只是书写简写，3 位会按位复制成 6 位，颜色完全相同。不能简写的颜色必须写满 6 位。\n\n问：HSL 的色相为什么是 0 到 360 而不是 0 到 255？\n答：色相表示色轮上的角度，用度数描述更符合直觉。360 度正好绕色轮一圈，回到起点。\n\n问：做渐变色时用哪种格式更好？\n答：如果渐变跨越多个色相，HSL 更容易控制过渡方向；如果只是同一色系的明暗过渡，调整亮度值即可。无论用哪种格式，都要实际渲染出来检查过渡是否自然。