HTML本身不直接设置颜色，真正起作用的是CSS；通过style属性、标签或外部CSS文件控制color、background-color等属性，支持十六进制、RGB、RGBA、HSL及预定义名等多种格式，需避免使用已废弃的bgcolor和标签。
HTML 本身不直接设置颜色，真正起作用的是 CSS；所谓“HTML 设置颜色”，实际是通过 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 的废弃属性，已被完全移除，现代浏览器不保证兼容
这段文字深灰，背景浅灰
用
比内联更干净，适合单页多处复用同一套配色逻辑，也便于后期提取为外部文件。
- 必须放在
内（或开头，但不推荐），否则可能触发重排 - 可使用类选择器（
.text-primary）、ID（#header）或标签名（p）精准控制 - 注意优先级：内联
style>中的规则 > 外部 CSS（除非加!important，但应避免）
警告文字
带蓝色侧边栏的卡片
用十六进制、RGB 和 HSL 怎么选？
没有绝对优劣，取决于使用场景和协作习惯：
广告通知单行滚动插件BreakingNews
下载
在浏览网页时，经常能看到间歇滚动的内容，比如公告、动态、滚动新闻等等。今天介绍的这款 jQuery插件——BreakingNews 就能够制作这种间歇滚动效果。通过配置，它能够设置标题、标题颜色、字体大小、宽度、自动滚动、间歇时间等等，同时它还好提供两种过度方式——淡入淡出（fade）和向上滑动（slide）。
立即学习“前端免费学习笔记（深入）”；
- 十六进制（
#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在暗色背景下会不可读
真正麻烦的从来不是“怎么写颜色”，而是“为什么这里没变”——多数时候问题出在层叠顺序、继承关系或选择器范围，而不是颜色值本身。
