用对颜色值，写得更省心

在网页设计里，颜色是情绪的调色板，写法却要专业、稳定。一套规范的颜色值写法，能减少调试时间，也让团队协作更顺畅。

从场景出发，选对颜色表达

在稿纸上随手画个色块，你会碰到三种常见写法：十六进制（#rrggbb）、RGB（rgb(r,g,b)）和百分比（rgb(r%,g%,b%)）。选哪种不在于流行，而在于场景与用途。

• 代码层高频计算时，RGB百分比更直观，便于调试透明度和对比度。
• 十六进制在样式表中使用频繁，渲染快，适合直接覆盖背景或边框。
• RGB在需要精确数值时更合适，比如设备色域受限或需要严格校正的项目。

统一命名与命名空间

颜色不是随意起名，统一命名能避免“同色不同名”的混乱。用语义化命名比堆砌十六进制更易懂：

• 用语义替代色块：primary、secondary、background、text-1、text-2。
• 建立命名空间：base-、error-、success-、warning- 等前缀，让每个类名自洽。
• 避免在类名里直接写颜色值，保持样式与语义分离。

透明度与混合：别把事情复杂化

透明度是颜色的“身份证”之一，写法上要清楚、统一：

• 优先使用RGBA：rgba(r,g,b,a)；在需要透明蒙版或混合图层时，写法最直接。
• 仅在不支持透明度的旧环境使用Alpha通道（#rrggbb aa），且需说明兼容边界。
• 用混合模式时，关注浏览器兼容与性能；在不影响视觉的前提下，尽量用CSS混合模式替代过度的透明叠加。

颜色对比与可访问性

颜色不只是美观，更是可用性的一部分。遵循对比度标准，能提升无障碍体验：

• 用工具计算文本与背景的对比度（至少4.5:1），确保可读性。
• 在高反差环境下（如低光或高亮）也要保持可读，考虑使用渐变或图层叠加提升可识别度。
• 对于图标与交互元素，优先选择高对比度配色。

从实践到规范：可复用与可维护

把颜色规范做成变量与模块，让样式可复用、可维护：

• 在CSS预处理器中集中管理：$primary、$background 等，便于全局替换。
• 建立统一的注释规范，说明来源、用途与兼容范围。
• 通过部分选择器或混合（@mixin）复用，减少代码冗余。

结语

一套清晰的颜色值写法，不只是一串代码，更是一个团队的沟通语言。用对方式，颜色就能更准确地表达设计意图，减少不必要的返工，让项目更稳健地成长。