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 怎么选？
没有绝对优劣，取决于使用场景和协作习惯：
SUN2008 企业网站管理系统2.0 beta
下载
1、数据调用该功能使界面与程序分离实施变得更加容易，美工无需任何编程基础即可完成数据调用操作。2、交互设计该功能可以方便的为栏目提供个性化性息功能及交互功能，为产品栏目添加产品颜色尺寸等属性或简单的留言和订单功能无需另外开发模块。3、静态生成触发式静态生成。4、友好URL设置网页路径变得更加友好5、多语言设计1)UTF8国际编码; 2)理论上可以承担一个任意多语言的网站版本。6、缓存机制减轻服务器
立即学习“前端免费学习笔记（深入）”；
- 十六进制（
#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在暗色背景下会不可读
真正麻烦的从来不是“怎么写颜色”，而是“为什么这里没变”——多数时候问题出在层叠顺序、继承关系或选择器范围，而不是颜色值本身。
