Hex颜色值一改就偏色，因其缺乏语义：#4a90e2不表明色相与明暗关系，调e2易偏青、压4a易发灰；而HSL中hsl(210,70%,60%)可锁定色相与饱和度，仅调亮度值（如60%→72%）即可实现悬停变亮等可预期效果，并通过CSS变量统一维护，保障主题切换与团队协作一致性。
Hex在大规模项目里不是“不能用”，而是“改不动、对不上、不敢动”——它缺乏语义，所有调整都靠人眼硬猜。
Hex颜色值为什么一改就偏色
因为#4a90e2不告诉你它是蓝还是青，更不告诉你“再亮一点”该调哪个数字。想让按钮悬停时变浅，有人动e2（blue通道），结果偏青；有人压4a（red通道），又容易发灰。RGB是设备模型，不是人眼模型。HSL则不同：hsl(210, 70%, 60%)中，只调60%就能稳定变亮，色相210和饱和度70%锁死，整套色系不会跑调。
设计系统里Hex导致的协作断层
设计师给#ff6b35，前端写进CSS，测试发现深色模式下文字对比度不够，想调暗——但#cc552a是不是它？#e05c28又对不对？没人敢拍板。而如果一开始就用变量管理：--brand-h: 12; --brand-s: 100%; --brand-l: 60%;，那禁用态只需改成hsl(var(--brand-h), var(--brand-s), 40%)，语义清晰，团队共识明确。
Hex在主题切换和自动化流程中的失效点
- 构建工具（如PostCSS插件）无法从
#4a90e2反推明暗关系，没法自动出深色模式变体 - CI/CD中做颜色可访问性检查时，
#4a90e2需先转成Lab或LCH才能算对比度，多一步就多一个出错环节 - 设计系统文档若只列Hex值，开发无法直接复用逻辑（比如“主色+20%亮度=悬停色”），每次都要手动查表或靠取色器肉眼比对
- Git diff里
#4a90e2 → #4b91e3看不出意图，但--brand-l: 60% → 62%一眼可知是微调亮度
什么时候还必须用Hex
真要兼容IE8或交付静态PDF样式快照时，#rrggbb仍是唯一稳妥选择。但注意：
- 必须用6位全写，别用#f60这类简写，避免误判和工具解析不一致
- 所有Hex值应在:root中统一声明为变量，如--color-primary: #4a90e2;，而非散落在各处
- 即便用Hex，也要配一套HSL中间层：用开发者工具右键复制为hsl()，把H和S抽成变量，只让L随场景变化——这是兼顾兼容与可维护的折中解
真正难的不是写对一个颜色，而是让一百个颜色在三年后还能被同一个人、同一个逻辑、同一种方式准确修改。Hex本身没错，错的是把它当终点，而不是起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
