HTML颜色代码需按标准格式书写：#RRGGBB或#RGB（小写无引号），rgb()/hsl()适合动态调色，颜色名语义模糊且不支持透明度，DevTools预览可能失真因忽略filter等上下文影响。
HTML 颜色代码不是“制作”出来的，而是按规则写出来的——你不需要生成器，只需要知道怎么选、怎么写、怎么避坑。
十六进制颜色怎么写才不会被浏览器忽略
浏览器只认标准格式：#RRGGBB（6位）或简写 #RGB（3位），字母必须小写，不能带空格或引号。大写虽然多数浏览器也认，但 CSS 自动化工具（比如 PostCSS、Tailwind CLI）可能报错或转换异常。
-
#ff0000✅ 正确（红色） -
#FF0000⚠️ 大部分能用，但某些构建流程会警告 -
#f00✅ 简写合法（等价于#ff0000） -
#f0❌ 错误：少一位，浏览器直接当无效值丢弃 -
"#ff0000"❌ 引号是字符串语法，HTML/CSS 里不加引号
rgb() 和 hsl() 函数在什么场景下比十六进制更实用
当你需要动态调整透明度、做颜色渐变、或基于设计系统批量修改色调时，rgb() 和 hsl() 比死记硬背十六进制灵活得多。
-
rgb(255, 0, 0)和rgb(255 0 0)都合法（后者是新语法，支持空格分隔，但 IE 不支持） -
rgba(255, 0, 0, 0.5)可直接加 alpha，不用换hex→rgba转换（比如#ff000080是 8 位 hex，但兼容性差） -
hsl(0, 100%, 50%)更容易调亮/暗：改第三个参数（%）就能变浅灰或深红，不用查表换算 - 注意：
hsl()的色相（第一个值）是角度（0–360），不是百分比，写成hsl(50%, ...)会直接失效
颜色名（如 red、darkslategray）为什么建议少用
140 个标准颜色名虽方便，但语义模糊、不可控、难维护。
立即学习“前端免费学习笔记（深入）”；
-
red在所有浏览器都等于#ff0000，没问题；但orange是#ffa500，和设计稿常有偏差 -
lightgray和grey在 Chrome/Firefox 渲染不同（前者是#d3d3d3，后者是#808080），IE 甚至把gray当grey - 团队协作时，
brand-blue这种变量名比steelblue更可靠——后者既不是品牌色，也不能一眼看出明暗 - 所有颜色名都不支持透明度，想半透只能切到
rgba()或hsla()
Chrome 开发者工具里改颜色，为什么实时预览有时不准
DevTools 的颜色拾取器默认显示当前计算后的 RGB 值，但它不反映继承、filter、mix-blend-mode 或 backdrop-filter 的叠加效果。
- 元素加了
filter: brightness(1.2)，DevTools 显示的仍是原始色值，不是人眼看到的颜色 - 父级设置了
opacity: 0.8，子元素颜色会变淡，但子元素自己的color值在面板里还是原始值 - 用
getComputedStyle(el).color查到的是最终解析值（通常是rgb(...)），但不包含 opacity/filter 影响 - 真要确认视觉效果，得截图+取色器比对，或者临时禁用相关样式再看
真正卡住人的往往不是“怎么写颜色”，而是没意识到颜色值只是输入，而渲染结果取决于上下文样式、设备色彩配置、甚至用户系统设置（比如 macOS 的深色模式自动映射）。写完别急着提交，打开几个主流设备真机看看实际显示。
