0Pricing
CSS Academy · 课时

颜色值：名称、十六进制、RGB、HSL

学习 CSS 中的各种颜色格式：命名颜色、十六进制代码、rgb() 和 hsl() 函数。

颜色值：名称、十六进制、RGB、HSL 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

CSS 颜色格式

CSS 支持多种颜色格式。选择哪种格式取决于您的工作流程、工具，以及是否需要透明度或动态处理。

命名颜色

CSS 定义了140 多种命名颜色，例如 red、tomato 和 cornflowerblue。它们非常适合快速原型设计，但精确度有限。

<h1>Named Colors</h1>
  <button>cornflowerblue button</button>

十六进制颜色

十六进制颜色使用 # 后跟 6 位十六进制数字（简写形式使用 3 位）。每两位数字分别表示红、绿、蓝三种颜色（0–255）。

<p class="full-hex">Full hex: #ff6347</p>
  <p class="shorthand-hex">Shorthand hex: #f64</p>

带透明度的十六进制颜色

添加第 4 对十六进制数字（简写形式中添加第 4 位数字）即可表示透明度：

<div class="hex-alpha-full">8-digit hex alpha</div>
  <div class="hex-alpha-short">4-digit shorthand alpha</div>

RGB 颜色

rgb() 接受三个整数（0–255），分别表示红、绿、蓝三个通道。这种格式可读性很强，也便于以编程方式理解和处理。

<p class="rgb-tomato">rgb(255, 99, 71)</p>
  <p class="rgb-black">rgb(0, 0, 0)</p>
  <p class="rgb-white">rgb(255, 255, 255)</p>

RGBA 颜色

在 rgb() 中添加第四个参数（0–1）即可表示透明度。这等同于采用斜杠语法的新版 rgb()。

<p class="rgba-legacy">rgba(255, 99, 71, 0.5)</p>
  <p class="rgba-modern">rgb(255 99 71 / 0.5)</p>

HSL 颜色

hsl() 通过色相（0–360°）、饱和度（0–100%）和明度（0–100%）定义颜色。这种格式更适合直观地创建调色板和颜色变体。

<p class="hsl-tomato">hsl(9, 100%, 64%)</p>
  <p class="hsl-steelblue">hsl(210, 70%, 50%)</p>

HSLA 颜色

与 rgba() 类似，hsla() 会添加透明度通道。现代 CSS 允许改用斜杠分隔符：

<p class="hsla-legacy">hsla(9, 100%, 64%, 0.5)</p>
  <p class="hsla-modern">hsl(9 100% 64% / 0.5)</p>

使用 HSL 创建颜色变体

HSL 非常适合生成浅色和深色变体。保持色相和饱和度不变，调整明度：

<button class="btn-light">Light</button>
  <button class="btn">Base</button>
  <button class="btn-dark">Dark</button>

currentColor 关键字

currentColor 是一个动态值，等于元素当前的 color 属性值。您可以使用它，让边框、阴影或 SVG 填充自动继承文字颜色。

<a href="#">Link with currentColor border</a>

transparent 关键字

transparent 关键字等于 rgba(0,0,0,0)，表示完全透明。它适用于悬停效果，例如将颜色从透明平滑过渡为某种颜色。

<button>Transparent background</button>

快速检查

哪种颜色格式最便于创建同一色相的浅色和深色变体？

回顾

CSS 提供命名颜色、十六进制、RGB 和 HSL 颜色格式。HSL 非常适合以编程方式处理颜色。所有格式都支持透明度通道。currentColor 和 transparent 是两个实用的特殊关键字。

常见问题解答

「颜色值：名称、十六进制、RGB、HSL」课时是免费的吗？

是的 — 「颜色值：名称、十六进制、RGB、HSL」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「颜色值：名称、十六进制、RGB、HSL」这节课中我会学到什么？

学习 CSS 中的各种颜色格式：命名颜色、十六进制代码、rgb() 和 hsl() 函数。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。

「颜色值：名称、十六进制、RGB、HSL」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 颜色值：名称、十六进制、RGB、HSL
  2. 背景颜色与图像
  3. 渐变：线性与径向
  4. 不透明度与 RGBA 透明效果
← 返回 CSS Academy