颜色模型与前端配色完整指南：从 HEX/RGB/HSL 到可访问性

配色不仅影响美观，更影响信息传达效率与可读性。理解颜色模型（HEX/RGB/HSL）与转换关系，结合系统化的状态与主题策略，你可以在工程实践中建立可维护的配色体系。

一、模型概览

• HEX：十六进制，简洁并便于在 CSS 中使用
• RGB：以光的三基色表示颜色，适合动画与渐变控制
• HSL：色相/饱和度/亮度，更符合人类直觉的调整方式

二、转换与应用

在 Color Converter 中可一键在三者间转换与预览。如 #3B82F6 → rgb(59, 130, 246) → hsl(217, 91%, 60%)，随后在 HSL 中以 L 调整亮度即可获得不同状态色。

三、配色流程

1. 确定品牌主色与辅助色
2. 在 HSL 中为组件建立状态色阶（Hover/Active/Disabled）
3. 建立语义色（成功/警告/错误/信息）与中性色阶
4. 在浅/深主题中校验对比度与层级

四、可访问性

遵循 WCAG 对比度规范：一般文本至少 4.5:1，大字 3:1。所有前景/背景搭配先计算对比度再定稿，避免“好看但看不清”。

五、状态与交互

将状态色阶固化为规则，如主色亮度在 45–55% 区间随状态切换，并统一在 CSS 变量或主题配置中管理。

六、主题切换

深色主题需要重新考虑边框、分割线与阴影。用 HSL 变量调节亮度与饱和度确保层级与可读性。

七、工具协作

搭配 JSON Formatter 管理色板与主题 JSON，配合 Case Converter 统一代码风格。

八、常见误区

• 忽视可访问性导致信息难以阅读
• 临时选色造成风格不一致
• 未考虑深色主题

结语

当你以颜色模型为基础，构建状态、语义与主题的系统，并用在线工具验证，配色将成为“工程资产”，而非一次性的“视觉灵感”。