FF5733适用于需快速复用、静态品牌色及团队协作强调一致性的场景，如文本色、边框、纯色背景等不需动态调整的用途，且被所有浏览器原生支持。
什么时候该用 #FF5733（Hex）？
当你需要快速复用设计稿里的颜色、写静态品牌色、或者团队协作中强调一致性时，#RRGGBB 或简写 #RGB 是最稳妥的选择。它被所有浏览器原生支持，复制粘贴零转换，Figma/Photoshop 导出也默认给这个。
- 适合：文本色、边框、纯色背景、图标填充等「不需动态调整」的场景
- 坑点：
#F53看似省事，但容易误读（比如把#F53当成#FF5533而不是#FF5533→ 实际是#FF5533？错——简写规则是每位扩展一次，#F53=#FF5533✅，但人眼极易看串，建议除非是#000/#fff这类极简值，否则统一用六位 - 透明度？Hex 本身不带 alpha，想用半透得切到
#RRGGBBAA格式（如#FF573380），但 IE 完全不认，现代项目可用，老兼容需求慎用
rgb(255, 87, 51) 和 rgba(255, 87, 51, 0.6) 适合哪些动态操作？
当你在 JS 里算颜色、做渐变过渡、或需要精确控制透明度时，rgb() 和 rgba() 是唯一能直接参与计算的格式——数值直观，加减乘除不费劲。
- 适合：模态框遮罩层（
rgba(0, 0, 0, 0.5)）、按钮悬停透明变化、Canvas 绘图传参、CSS 自定义属性动态赋值（--btn-bg: rgb(255, 87, 51);） - 注意：
rgb()和rgba()的前三位必须同为数字（0–255）或同为百分比（0%–100%），混用会失效；alpha只能是 0–1 的小数，不是百分比（rgba(0,0,0,50%)❌） - 性能无差别，但写法略长，别为了“看起来高级”硬套——没透明需求时，
rgb()不如#FF5733干脆
为什么改主题色优先选 hsl(12, 100%, 60%)？
因为 HSL 天然支持「语义化调色」：想让主色变浅一点？调 lightness；想更灰？降 saturation；想换蓝绿基调？只动 hue。不用开取色器，心算就能出一套配色。
- 适合：设计系统、暗黑模式切换（
hsl(210, 20%, 15%)→hsl(210, 20%, 95%)）、组件库中的状态色（成功/警告/错误用同一hue，仅调lightness和saturation） - 兼容性已不是问题：Chrome 10+、Firefox 10+、Safari 15.4+ 全支持
hsl()和hsla() - 别直接从设计工具抄 HSL——多数工具输出 Hex/RGB，强行转 HSL 可能失真；不如用 DevTools 颜色面板点一下自动转，或用
color-mix()+hsl()组合生成衍生色
别踩的三个隐形坑
真正让人半夜改样式的是这些细节：
立即学习“前端免费学习笔记（深入）”；
-
transparent不是颜色值，而是独立关键字，它等价于rgba(0,0,0,0)，但语义更清晰，且在background-color上表现更稳定（尤其遇到渐变 fallback 时） - 命名色如
tomato、rebeccapurple虽有趣，但 140 个名字来源混乱（darkgray比gray还亮），生产环境禁用，仅限 demo 或教学占位 - 现代 CSS 支持
color(display-p3 ...)和lab()，但它们目前无法被 JSgetComputedStyle正确读取为数值，做颜色运算或动画时仍得回退到 RGB/HSL
