HTML 颜色代码直接写在属性值里，用 # 开头的十六进制字符串，或者 rgb()/hsl() 函数 —— 不需要“输入方法”，它就是文本值本身。
颜色写在哪？style 里还是 class 里？
绝大多数时候写在 style 属性里，比如：<div style="color: #333; background-color: rgb(240, 240, 240)">。但更推荐抽到 CSS 文件里用 <code>class 管理，避免重复和维护困难。
常见错误现象：在 Vue/React 的内联样式中写成 style="color: '#ff6b6b'"（加了引号又套引号），实际应写成 :style="{ color: '#ff6b6b' }"（JS 对象语法，单引号只包整个值）。
-
style是 HTML 属性，值是字符串，所以style="color: #f00"合法；style="color: '#f00'"也合法但多余，浏览器会忽略外层引号里的引号 - 在 JS 动态赋值时（如 React 的
style对象、Vue 的:style），值是 JS 字符串，必须用引号包裹：{ color: "#f00" } - 不要在 CSS 文件里给颜色值再加引号：
.text-red { color: "#e74c3c" }是错的，正确是color: #e74c3c
#fff、#ffffff、white 有啥区别？
语义和兼容性不同，不是“哪个更对”。#fff 和 #ffffff 完全等价，前者是简写形式（每位重复一次）；white 是命名色，可读性好但只有 140 个左右标准名，且不支持透明度。
立即学习“前端免费学习笔记（深入）”；
使用场景：团队协作项目建议统一用六位十六进制（如 #2d8cf0），避免简写引发的比对误差（#abc vs #aabbcc 看似一样，但工具可能解析不一致）；快速原型可用命名色或 rgb(255, 255, 255) 方便后续加 alpha。
- 简写色（
#000）不能直接转成rgba()，得先扩成六位再改函数 -
rgb(255, 255, 255)和hsl(0, 0%, 100%)在可访问性调试工具里更易识别亮度，适合做对比度检查 - IE8 及以下不支持
hsl()和 3 位简写色（但基本不用管了）
为什么写了 #ff0000 没变红？
大概率是选择器没生效，或者被更高优先级样式覆盖。颜色代码本身不会“失效”——它要么被解析，要么报错（而浏览器对错颜色值通常静默降级为 transparent 或继承父级）。
排查步骤：
- 打开浏览器开发者工具，选中元素，看
Computed标签页里color或background-color最终值是不是你写的 - 检查是否拼错属性名，比如写成
colour（英式拼写，无效）或bg-color（不存在） - 确认没被
!important或内联style覆盖；CSS 优先级中，ID 选择器 > 类 > 标签，别小看一个#header就能干掉一整页 class - 注意大小写：HTML 中颜色值不区分大小写，但某些构建工具（如 Webpack + CSS Modules）可能把
#F00当变量处理，建议统一小写
真正容易被忽略的是：颜色不是孤立存在的。对比度、色盲适配、深色模式下自动反转，这些都会让同一个 #333 在不同上下文里“看起来不是它自己”。别只盯着怎么输对代码，先想清楚它该在什么背景下被看见。
