HTML 颜色
你已经用 style 属性改变过外观，也用格式化和引用标出了含义。颜色塑造氛围与可读性。在这条入门 HTML 路径中，你要在 style 里练习颜色值：名称、hex 代码以及 rgb() 函数。完整的设计系统稍后属于 CSS；这里先学会正确读写这几种形式。当眼睛一眼就能认出每种写法时，把同样的颜色迁到共享样式表会更轻松，不必重新学习“值的语法”。
什么是 HTML 颜色值？
颜色值告诉浏览器：对于 color 或 background-color 这类 CSS 属性，该使用哪种颜色。同一种值形式在内联 style 和样式表里都适用。初学者先接触三种实用形式：可读名称（tomato）、hex 代码（#c0392b），以及 rgb() 混合（rgb(192, 57, 43)）。它们可以用不同写法描述同一色调。把值想成颜色的“配方”；属性决定配方用在哪里——文字、背景，或以后 CSS 允许的其他地方。现在掌握配方，等规则从属性迁到 .css 文件时就不容易混淆。
直接回答
用 color 设置文字，用 background-color 设置内容背后的区域。按当下需要选择值形式：快速演示用名称，从调色板复制时用 hex，按 0 到 255 的红/绿/蓝通道思考时用 rgb()。保持足够强的对比度以便阅读。随着项目变大，把共享颜色移到 CSS，而不是在每一页重复很长的内联属性。单页演示里内联便于立刻看到效果；多页站点上把同一 hex 重复几十次会拖慢维护并造成不一致。
值形式一览
📊 颜色值形式
| 形式 | 示例 | 说明 |
|---|---|---|
| 名称 | tomato | 易读；官方/常用集合有限 |
| Hex | #336699 | 通常是 # 加六位十六进制（RRGGBB） |
| RGB | rgb(51, 102, 153) | 红、绿、蓝通道各为 0–255 |
用名称设置颜色
命名颜色是最友好的起点。仔细搭配文字色与背景色，让词语保持可读。darkgreen、navy、lightblue 这类名称可以读出声，有助于在不打开取色器的情况下记住效果。可用集合仍然有限：并非每个英文颜色词都是有效的 CSS 名称。从你已经验证过能工作的名称开始，并在浏览器中确认，再把它们当成“理所当然”。
用名称设置颜色
html<p style="color: darkgreen;">深绿色文字</p>
<p style="background-color: lightblue; color: navy;">浅蓝底上的海军蓝</p>阅读示例
- 第一段只改变文字颜色
- 第二段同时设置背景与文字，使海军蓝在浅蓝上保持清晰
- CSS 中名称不区分大小写，但小写是清晰的习惯
- 并非每个英文颜色词都是有效 CSS 名称——坚持使用你已核实的常用名称
- 若只改背景而文字仍用浏览器默认，对比度可能在无提示的情况下变差
Hex 颜色
hex 颜色通常以 # 开头，后跟六个来自 0–9 与 a–f 的字符。每两位表示红、绿、蓝。#000000 是黑；#ffffff 是白。不必背诵目录——从调色板选取并仔细粘贴。许多设计工具默认显示 hex，因此从稿面复制颜色时这种形式很常见。少一位数字或漏掉 # 可能让值静默失效，所以把 hex 当作保存前值得目视检查的一小段代码。
Hex 颜色值
html<p style="color: #c0392b;">Hex 红色文字</p>
<p style="background-color: #f7f7f7; color: #222222;">浅灰底上的深灰</p>Hex 提示
- 保留
#——在本课形式中，单独的336699与#336699并不相同 - 只使用有效十六进制数字；字母到
f为止 - CSS 里存在三位短 hex（
#333），但本课程阶段六位代码已足够 - 再次检查复制/粘贴，避免缺位数字静默失败
#000000与#ffffff是有用的锚点：帮助感受色阶的暗端与亮端
rgb() 颜色
rgb() 函数用 0 到 255 的数字混合红、绿、蓝。rgb(255, 0, 0) 是纯红。当你一次只调一个通道时，这种形式很方便——例如只提高绿色，保持红、蓝不变。课堂演示中，rgb() 让“三种光的混合”变得可见；在实际工作中，它仍是你在 CSS 里会看到的同一套语法。只要通道对应，也可以用名称或 hex 描述同一色调。
rgb 颜色值
html<p style="color: rgb(39, 174, 96);">RGB 绿色文字</p>
<p style="background-color: rgb(241, 196, 15); color: #222222;">RGB 金色背景</p>把几种形式连起来
同一色调往往可以写成名称、hex 或 rgb。每个演示只选一种形式，让眼睛学会语法。之后在 CSS 里还会遇到其他写法；这三种覆盖早期 HTML 练习。当你在调色板看到 #c0392b、在别处看到 rgb(192, 57, 43) 时，记住它们可能是同一种红——差别在写法，不一定在颜色本身。现在练熟三种形式，进入样式表时就不容易觉得像在学“三种语言”。
对比度与可读性
合法的颜色仍可能是糟糕的选择。白底上的浅黄文字可能解析正常，却仍然难读。当你同时设置 color 与 background-color 时，请确认文字足够突出。在真实站点上，对比度属于无障碍的一部分——即使在小演示里也要从现在养成习惯。逼读者费力的“好看”样式并没有完成页面目标。简单规则是深色配浅底（或谨慎地反过来），这能避免入门阶段大部分可读性问题。
在编辑器中练习
- 在标题下写三个短段落。
- 用名称给第一段文字上色（
teal或类似）。 - 用 hex 值给第二段文字上色。
- 给第三段用
rgb()设置background-color，如需对比度再设深色color。 - 保存并刷新。确认每种形式都生效。
- 故意弄坏一个 hex（删掉一位），刷新后再修好——这能训练细致的语法。
把每一步当作小实验：一次只改一件事，才能看清是哪个值出了问题。若三种形式在同一文档中都成功，你就有了面向后续演示以及迁到共享 CSS 的扎实心智模型。
会隐藏或削弱颜色的错误
- 混淆
color（文字）与background-color（文字背后） - 本意是六位代码却写成
#33、#gggggg或没有#的 hex - 看起来“有样式”但难以阅读的低对比组合
- 只用重复的内联样式搭整套品牌主题，而不继续学习共享 CSS
- 未经核实就假定每个英文颜色词都是有效 CSS 名称
- 复制六位 hex 时丢掉
#或中间某个字符
这些错误很常见，因为页面可能“看起来差不多对”：HTML 仍然合法，但颜色不出现或文字难读。当颜色“什么都不做”时，先查属性，再查值的语法，最后查对比度。
小结
- 快速颜色演示可在
style中使用color与background-color - 值：名称、hex（
#RRGGBB）或rgb(r, g, b) - hex 两位一组对应红、绿、蓝；rgb 通道范围是 0 到 255
- 文字落在彩色背景上时，优先保证可读对比度
- 随着页面与项目变大，把共享颜色移到 CSS
- 用保存与刷新确认；当颜色“什么都不做”时仔细修正语法
掌握这三种形式和两条清晰属性后，你已经能可预期地给 HTML 演示上色。自然的下一步是把同样规则集中到共享位置——CSS——以免在每一段重复同一个值。
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部