翻译：德育处主任
前端周刊进群：flowus.cn/48d73381-69...
为什么表示颜色的方式有这么多种？
你知道什么事情总让我觉得好笑吗？在 CSS 里，同一种颜色居然能有四种不同的写法，而浏览器还会点点头表示 "嗯，没问题，有效"。试想一下，如果你把 "blue（蓝色）" 拼成 blu 、blew 、bloo 或 bl00，你的英语老师每次都给你打 A。CSS 对待颜色的方式差不多就是这样。
图片来源：Robert Katzki，来自Unsplash
我常用的是十六进制（HEX）代码，因为它写起来简单，看起来清爽 ------ 作为前端开发者，还能要求更多吗！但最近我深入研究了这些格式的工作原理，说实话，这事儿特别有意思，就那种 "为什么没人早点告诉我" 的感觉。
我们先从 RGB 说起。表面上看，它像一堆乱码 ------ 括号里的三个数字，用逗号分隔。但其实，它就是个 "配方"：红（Red）、绿（Green）、蓝（Blue）。按不同的强度混合，瞧！屏幕上所有的颜色就都出来了。数字范围是 0 到 255，这听起来很随机，直到你意识到计算机就喜欢处理 8 位的数据块。8 位能提供 256 种可能的值，所以 0 代表 "完全无光"，255 代表 "亮度拉满"。
所以，如果你写rgb(255, 0, 0)，意思就是 "只要红色，谢谢"；而rgb(0, 0, 0)是纯黑色，因为没有任何光线。把它们加起来，比如rgb(255, 255, 255)，就得到了白色 ------ 这就是光的工作原理。突然间，这些数字就不那么吓人了，反而变得稍微好理解一点。
理解了 RGB 之后，你会遇到它更酷的 "兄弟"：RGBA。这里的 "A" 代表阿尔法（alpha），它控制颜色的透明度。最后那个数字就像一个透明度滑块。写rgba(255, 0, 0, 0.5)，你会得到半透明的红色，能和它背后的颜色混合。就像在颜色上盖了一层描图纸。
截图来自 RGBA 颜色选择器（rgbacolorpicker.com）
"alpha" 这个词不是随便起的，它源自早期的计算机图形学 ------ 当时人们正在研究如何把一张图片叠在另一张上面。
他们想出了一个公式，乍一看很吓人：
scss
// The Alpha Blending Equation
result = alpha * foreground_color + (1 - alpha) * background_color但它的实际意思很简单：如果阿尔法值是 1，你只能看到上面的内容；如果是 0，你只能看到下面的内容；如果在中间，你就会得到混合效果。有点像做冰沙：一根香蕉、半颗芒果、一点酸奶 ------ 只不过这里混合的是像素而非水果。
然后是十六进制（HEX）代码。这些是以井号开头的六位数 "小怪物"，比如#FF5733或#00FF00。它们只是 RGB 的另一种写法，只不过用的是十六进制（基数为 16）而非十进制（基数为 10）。
不过别慌，这只意味着数字范围是 0 到 15。因为计算机痴迷于 2 的幂，所以这对它们来说很合理。对人类来说虽然没那么直观，但看起来很简洁。FF其实就是 255 的 "伪装"，00就是 0。所以#FFFFFF是白色，#000000是黑色。
《图像颜色选择器》（imagecolorpicker.com）
还有简写形式，#FFF可以自动变成#FFFFFF。就像用 "lol" 代替 "laughing out loud（哈哈大笑）" 一样，很方便，但只适用于特定颜色。
最后是 HSL，即色相（hue）、饱和度（saturation）和亮度（lightness）。这种方式对人类更友好，因为你不用摆弄那些 "吓人" 的数字，而是像跟朋友描述颜色一样自然。色相是彩虹色轮上的具体颜色（红、蓝、绿等）；饱和度是颜色的浓烈程度（是灰调的柔和色还是刺眼的霓虹色）；亮度则决定颜色更接近黑色、白色，还是介于两者之间。
所以，如果你写hsl(200, 100%, 50%)，意思就是 "给我一个鲜亮、浓烈的蓝色"。把饱和度调到 20%，它就变成了柔和、淡雅的婴儿蓝；把亮度调到 90%，就进入了马卡龙色系。这很直观，就像在调色机上转动旋钮，而不是计算那些 "机器人密码"。
截图来自www.w3schools.com/colors/colo...
现在有个真正的问题：为什么 CSS 要给我们这么多选择？说实话，这归根结底是使用场景的问题。
- 有些开发者可能喜欢 RGB，因为它贴近计算机的思维方式；
- 设计师通常喜欢 HSL，因为调整颜色时不容易把一切搞砸；
- 十六进制成了互联网的 "简写"，因为它简洁且便于复制粘贴（我的最爱）；
- RGBA 的存在是为了让你在需要透明度时不用抓狂。
图片来源：Ruvim Noga，来自Unsplash
在 CSS 之外，颜色的 "派对" 也没结束。打印机用 CMYK，因为它们处理的是墨水而非光线；科学家和硬核颜色爱好者用 LAB，因为它更贴合人类的视觉感知；最新的 CSS 版本甚至引入了更高级的选项，比如 color() 和 lch()，用于超精确的色调。就好像宇宙看到我们有四种选择后说："不行，还不够。"
所以，没错，你可以选自己喜欢的 "风味"。实现方式有无数种。归根结底，CSS 中的颜色确实有点混乱、无序，但也暗藏魔力。
无论你选哪种方式，最终呈现在屏幕上的效果都差不多，只是带着你的个人风格。这也深刻地提醒我们：从来没有唯一的 "正确" 路径...... 说实话，这就是编程的核心。不信你看看 LeetCode 上大家给出的五花八门的答案就知道了。