HTML本身不直接设置颜色，真正起作用的是CSS；通过style属性、<style>标签或外部CSS文件控制color、background-color等属性，支持十六进制、RGB、RGBA、HSL及预定义名等多种格式，需避免使用已废弃的bgcolor和<font>标签。
HTML 本身不直接设置颜色，真正起作用的是 CSS；所谓“HTML 设置颜色”，实际是通过 style 属性、内联样式、<style> 标签或外部 CSS 文件控制元素的 color（文字）、background-color（背景）、border-color（边框）等属性。
用 style 属性写内联颜色样式最直接
这是最快上手的方式，适合单个元素临时调试或简单页面。注意：它会覆盖外部样式表中同名规则，且无法复用。
-
color控制文字颜色，如style="color: #ff6b35;" -
background-color控制背景色，如style="background-color: rgba(0, 0, 0, 0.8);" - 支持多种格式：十六进制（
#fff/#ffffff）、RGB（rgb(255, 107, 53)）、RGBA（rgba(255, 107, 53, 0.7)）、HSL（hsl(14, 100%, 60%)）、预定义名（style="color: crimson;"） - 别写错属性名——
bgcolor是 HTML4 的废弃属性，<font color="red">已被完全移除，现代浏览器不保证兼容
<p style="color: #2c3e50; background-color: #ecf0f1; padding: 12px;">这段文字深灰，背景浅灰</p>
用 <style> 标签在 <head> 中写局部样式
比内联更干净，适合单页多处复用同一套配色逻辑，也便于后期提取为外部文件。
- 必须放在
<head>内（或<body>开头，但不推荐），否则可能触发重排 - 可使用类选择器（
.text-primary）、ID（#header）或标签名（p）精准控制 - 注意优先级：内联
style><style>中的规则 > 外部 CSS（除非加!important，但应避免）
<head>
<style>
.highlight { color: #e74c3c; font-weight: bold; }
.card { background-color: #f8f9fa; border-left: 4px solid #3498db; }
</style>
</head>
<body>
<p class="highlight">警告文字</p>
<div class="card">带蓝色侧边栏的卡片</div>
</body>
用十六进制、RGB 和 HSL 怎么选？
没有绝对优劣，取决于使用场景和协作习惯：
立即学习“前端免费学习笔记（深入）”；
- 十六进制（
#3498db）最通用，设计师给的颜色稿基本都是这个格式，复制粘贴零成本 - RGBA 最适合需要透明度的场景，比如半透蒙层（
rgba(0, 0, 0, 0.5)），但注意 IE8 及以下不支持 - HSL 更符合人眼直觉：调整亮度（
L）不改变色相，调饱和度（S）不影响明暗，适合主题色动态生成（如用 CSS 变量：--primary-h: 200; --primary-s: 80%; --primary-l: 50%;） - 预定义名（
tomato、rebeccapurple）语义弱、数量少（仅 140+ 个），仅建议用于原型或教学演示
常见颜色相关错误和排查点
颜色没生效？大概率不是写错了值，而是被其他规则覆盖或作用域不对：
- 检查是否拼错属性：把
color写成colour（英式拼法无效）、bg-color（不存在） - 用浏览器开发者工具（F12）看“Computed”面板，确认最终生效的
color值和来源行号 - 父元素设置了
color，子元素未显式声明时会继承——有时你以为没生效，其实是被继承了 - 使用
currentColor时，它取的是当前元素的color值，常用于 SVG 图标或边框同步文字色，但容易误判为“没效果” - 深色模式下，某些系统级颜色（如
CanvasText）可能随系统变化，纯硬编码的#000在暗色背景下会不可读
真正麻烦的从来不是“怎么写颜色”，而是“为什么这里没变”——多数时候问题出在层叠顺序、继承关系或选择器范围，而不是颜色值本身。
