HTML颜色代码需精准选取而非随意生成：用#RRGGBB表示RGB值，推荐浏览器DevTools调色；rgb()和hsl()更易动态调整；粘贴时防隐藏字符；多用CSS变量统一管理；最终以人眼实测为准。
HTML 颜色代码不是“弄出来”的，而是选出来的——关键在怎么选得准、用得稳、改得快。
怎么用 #RRGGBB 写出想要的颜色
十六进制颜色码本质是 RGB 三通道的压缩写法，#FF5733 就是红=255、绿=87、蓝=51。别靠脑算，打开浏览器开发者工具（F12），点元素的 color 或 background-color，右边颜色小方块点开就能拖拽调色，实时生成 # 值。
- 三位简写（如
#f53）等价于六位（#ff5533），但只适用于每通道值相同的情况，别硬凑 - 大小写不敏感，
#FF5733和#ff5733效果一样，但团队协作建议统一小写 - 别手输带空格或符号的值，
# FF5733或#FF5733!会直接失效，浏览器当无效声明忽略
为什么 rgb() 和 hsl() 比 # 更好调
当你需要动态改色、做明暗渐变、或者和设计稿对不上时，rgb() 和 hsl() 更直观。比如想让一个按钮悬停时变暗 20%，用 hsl(12, 100%, 45%) 改成 hsl(12, 100%, 25%) 比换 # 码快得多。
-
rgb(255, 87, 51)直接对应通道数值，适合从 PS / Figma 的 RGB 面板抄数 -
hsl(12, 100%, 45%)中的h是色相（0–360），s是饱和度，l是明度——调灰度、做主题色变体更可控 - 所有现代浏览器都支持，但 IE8 及以下只认
#，如果还要兼容老系统，就别用hsl()
复制粘贴颜色时常见失效原因
设计稿里复制的“#FF5733”粘到 CSS 里却没反应？大概率是格式污染。Figma、Sketch、甚至微信聊天窗口复制的颜色值，常带不可见 Unicode 字符（如零宽空格 ）或全角符号。
立即学习“前端免费学习笔记（深入）”；
- 粘贴后立刻检查：光标在
#后按左右键，看是否跳过多个位置——有跳就是混入了隐藏字符 - 最稳做法：粘到记事本（非 Word 或富文本编辑器）里再复制一次，或者手动删掉重输
#后面的全部内容，重新敲 - Chrome DevTools 里看到颜色预览小方块消失、或属性名变成灰色斜体，说明该值被浏览器判定为无效
要不要用 CSS 变量存颜色？
如果项目里同一个主色用了 10 次以上，或者要支持深色模式切换，那就必须用 --primary-color: #FF5733 这类自定义属性。否则改个品牌色就得全局搜替换，漏一处就露馅。
- 定义在
:root下，全局可用；也可以局部作用域定义，比如.card { --bg: #f9f9f9; } - 不能直接在 HTML 的
style属性里用变量，style="color: var(--primary)"可以，但style="color: --primary"不行 - VS Code 装 Color Highlight 插件，能实时渲染变量对应的色块，避免“看着名字以为是蓝，其实是紫”这种低级误判
真正麻烦的从来不是怎么写出颜色代码，而是颜色在不同屏幕、不同上下文、不同缩放比例下看起来不一样。别迷信某个值“绝对正确”，多在真机上看，多让非设计师的人扫一眼——人眼才是最终验收标准。
