freeCodeCamp 基础 CSS 实战：用 RGB 值表示并混合元素颜色-编程实验室

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

【免费下载链接】freeCodeCampfreeCodeCamp.org's open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp

本篇指南基于 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"的递进关系：

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即黑色；
Use Hex Code to Mix Colors与Use Abbreviated Hex Code：练习用 hex 混合颜色及使用三位缩写；
本篇挑战Use RGB values to Color Elements（curriculum/challenges/english/blocks/basic-css/bad87fee1348bd9aede08718.md）；
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校验浏览器实际渲染出的颜色，又用正则强制要求源码中出现指定记法，两者缺一不可。