freeCodeCamp 基础 CSS 实战：用 RGB 值表示并混合元素颜色

本篇指南基于 freeCodeCamp 响应式网页设计（Responsive Web Design）课程中 "Basic CSS" 模块的 Use RGB values to Color Elements 挑战文档，完整讲解 CSS 中 RGB 颜色值的语法、取值范围及其与十六进制颜色码的数学等价关系。读完本篇，你将能熟练使用 rgb() 函数为元素着色、完成 hex 到 RGB 的换算，并理解 freeCodeCamp 课程如何用浏览器运行时断言和正则匹配来验证这类 CSS 练习。

什么是 RGB 颜色值

CSS 除了使用颜色关键字（如 black）和十六进制代码（hex code）外，还可以使用 RGB 值来表示颜色。RGB 分别代表红色（Red）、绿色（Green）、蓝色（Blue）三个颜色分量，每个分量用一个 0 到 255 之间的整数表示亮度：

• 黑色的 RGB 值：rgb(0, 0, 0) —— 三个分量全部为 0，即没有任何光线；
• 白色的 RGB 值：rgb(255, 255, 255) —— 三个分量全部拉满，即三种色光完全叠加。

以把 body 背景设为橙色为例，RGB 写法如下：

body {
  background-color: rgb(255, 165, 0);
}

这与 rgb() 函数的含义一致：括号内按 红, 绿, 蓝 的顺序给出三个 0–255 的数值。橙色 rgb(255, 165, 0) 表示红色分量拉满、绿色分量取约三分之二、蓝色分量不发光。

RGB 与十六进制的数值等价性

原文档中给出了一个值得展开的数学说明：

十六进制中，一个颜色分量用两位十六进制数字表示。两位十六进制数的组合数是 16 × 16 = 256 种取值；而 RGB 从 0 开始计数到 255，正好也是 256 个取值。因此 RGB 与 hex code 能表示的颜色数量完全相同。

换句话说，两者只是同一组 256 级灰度分量的两种记数法：hex 用十六进制书写（每位 0–F），RGB 用十进制书写（0–255）。在 freeCodeCamp 的课程脉络里，这一挑战正安排在三个十六进制挑战之后，构成"先学 hex、再学 RGB"的递进关系：

1. Use Hex Code for Specific Colors（curriculum/challenges/english/blocks/basic-css/bad87fee1348bd9aedf08726.md）：介绍十六进制是 16 进制数，0–9 对应十进制 0–9，A–F 对应 10–15，6 位十六进制数字按两位一组分别表示 R、G、B 分量，如 #000000 即黑色；
2. Use Hex Code to Mix Colors 与 Use Abbreviated Hex Code：练习用 hex 混合颜色及使用三位缩写；
3. 本篇挑战 Use RGB values to Color Elements（curriculum/challenges/english/blocks/basic-css/bad87fee1348bd9aede08718.md）；
4. Use RGB to Mix Colors（curriculum/challenges/english/blocks/basic-css/bad82fee1348bd9aedf08721.md）：把一组 hex 值转换为对应的 RGB 值。

这一挑战顺序在 curriculum/structure/blocks/basic-css.json 的 challengeOrder 数组中有明确记载，而 basic-css 本身是响应式网页设计超级块中的第二个模块（见 curriculum/structure/superblocks/responsive-web-design.json，位于 basic-html-and-html5 之后）。

实战练习：把 hex 换成 rgb

该挑战的原始任务（instructions）是：把 body 元素背景色中的十六进制代码替换为黑色的 RGB 值 rgb(0, 0, 0)。

挑战提供的初始代码（seed）如下：

<style>
  body {
    background-color: #F00;
  }
</style>

#F00 是三位缩写 hex，展开即 #FF0000——红色分量拉满、绿蓝为零。题目要求用十进制的 RGB 记法表达纯黑，最终答案（solutions）为：

<style>
  body {
    background-color: rgb(0, 0, 0);
  }
</style>

这个练习看似简单，实际覆盖了两类能力：一是 rgb() 函数的基本语法；二是 hex 与 RGB 之间的换算——#F00 中红色分量 FF（十六进制）恰好等于十进制 255，而纯黑则要求三个分量全部归零。

课程如何验证你的答案

从文档中的测试代码可以看到 freeCodeCamp 验证这道题的两层机制，这对理解"答案必须写成什么形式"很有参考价值。

第一层是运行时样式断言：

const body = document.querySelector('body');
const backgroundColor = window.getComputedStyle(body)['background-color'];
assert.strictEqual(backgroundColor, 'rgb(0, 0, 0)');

浏览器通过 window.getComputedStyle() 读取 body 的计算样式，并要求 background-color 精确等于字符串 rgb(0, 0, 0)。值得注意的是：无论你在 CSS 中写 #000、#000000 还是 rgb(0, 0, 0)，浏览器计算样式序列化出的结果都是 rgb(0, 0, 0) 这一形式——这也从侧面说明了 hex 与 RGB 在浏览器内部是同一种颜色。

第二层是源码正则匹配，用于确认你确实使用了 rgb 记法，而非仅靠结果相同蒙混过关：

assert.match(__helpers.removeCssComments(code), /rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/gi);

这条正则要求代码（在剥离 CSS 注释后）中必须出现形如 rgb(0, 0, 0) 的写法，且 \s* 允许数字和逗号周围存在任意空白——也就是说 rgb(0,0,0) 与 rgb( 0 , 0 , 0 ) 都能通过。

进阶：用 RGB 混合颜色

完成本篇挑战后，课程的下一题 Use RGB to Mix Colors 会把 hex 转 RGB 的换算变成批量练习。其题目要求把一段 <style> 中的四个 hex 颜色替换为正确的 RGB 值，并给出对照表：

颜色	RGB 值
Blue	rgb(0, 0, 255)
Red	rgb(255, 0, 0)
Orchid	rgb(218, 112, 214)
Sienna	rgb(160, 82, 45)

其中三个单分量颜色（纯红、纯蓝）正好印证了"单通道拉满"的规律；而 Orchid（兰色）与 Sienna（赭色）则是混合色，每个通道各取 0–255 之间的中间值。该挑战的四个测试用例（对 .red-text、.orchid-text、.sienna-text、.blue-text 分别断言 color 的计算值与源码正则）完整地保留在 curriculum/challenges/english/blocks/basic-css/bad82fee1348bd9aedf08721.md 中，可以对照阅读。

小结：CSS 颜色记法速查

结合本挑战文档及其前后的课程材料，可以整理出如下要点：

• 关键字：background-color: black; 等命名颜色，适合常见颜色；
• 十六进制：#RRGGBB 六位，或 #RGB 三位缩写（每一位展开为两个相同数字，如 #F00 → #FF0000），每位是 16 进制；
• RGB 函数：rgb(r, g, b)，三个参数为 0–255 的十进制整数，顺序固定为红、绿、蓝；
• 等价关系：一个 hex 分量的两位十六进制数（16² = 256 种）与一个 RGB 分量（0–255 共 256 个值）取值空间完全一致，如 #FF = 255、#00 = 0；
• 验证方式：freeCodeCamp 的测试既用 getComputedStyle 校验浏览器实际渲染出的颜色，又用正则强制要求源码中出现指定记法，两者缺一不可。

理解这套"两种记数法、同一种颜色"的机制后，你在实际开发中选择 hex 还是 RGB 就纯粹是书写习惯与可读性问题，而不是表达能力问题——这正是本篇挑战文档希望传达的核心结论。