🎨 网页配色基础：HEX、RGB 与颜色搭配实用指南

颜色在网页中的两种表示

在 CSS 中，颜色最常用的表示方式有两种：HEX（十六进制）和 RGB（红绿蓝三通道）。它们描述的是同一种颜色模型——通过红、绿、蓝三个分量的强度混合出任意颜色。

HEX 格式 #RRGGBB 用两位十六进制数表示每个通道（00-FF），如 #4F46E5。RGB 格式 rgb(r, g, b) 用十进制表示每个通道（0-255），如 rgb(79, 70, 229)。两者精确等价：4F 的十进制是 79，46 的十进制是 70，E5 的十进制是 229。

现代 CSS 还支持 rgba()（增加透明度）、hsl()（色相、饱和度、亮度）和 color-mix() 等更丰富的颜色函数，但 HEX 和 RGB 依然是最常用、兼容性最好的格式。

色彩基础：色相、饱和度与亮度

理解 HSL 色彩模型有助于搭配颜色：色相（Hue）决定颜色种类（0-360 度，红橙黄绿青蓝紫的循环），饱和度（Saturation）决定颜色鲜艳程度，亮度（Lightness）决定颜色明暗。

• 主色 — 网站的品牌色，占据最大视觉比重，通常 60% 左右
• 辅助色 — 用于强调、状态提示（成功绿、警告橙、错误红），占 30% 左右
• 中性色 — 黑白灰，用于文字、边框、背景，占剩余空间

常见的配色方案

1. 单色方案

使用同一色相、不同饱和度和亮度的一组颜色。风格统一、专业，适合工具类和企业类网站，避免视觉干扰。

2. 邻近色方案

使用色环上相邻的颜色（如蓝与青），和谐自然，适合内容较多的页面。

3. 互补色方案

使用色环上相对的两种颜色（如蓝与橙），对比强烈、有冲击力，适合强调重要元素或营销页面，但不宜大面积使用。

无障碍对比度要求

Web 内容无障碍指南（WCAG）对文字与背景的对比度有明确要求，这也是优秀网页设计的基本标准：

• 普通文字 — 对比度至少 4.5:1
• 大号文字（18px 以上或 14px 加粗） — 至少 3:1
• UI 组件和图形 — 至少 3:1

灰色文字配浅色背景是网页中最常见的对比度不足问题，尤其是提示性文字。设计时应使用足够深的文字颜色，确保可读性。

从设计稿到代码的颜色转换

设计工具（Figma、Sketch、Photoshop）中，设计师可能使用 HEX、RGB、HSL 或 HSB 任意一种格式。开发时最常遇到的是 HEX 与 RGB 的互转需求。使用我们的 颜色转换器，输入任意一种格式即可得到另一种，并附实时颜色预览，确保转换准确无误。

实用技巧

• 使用 CSS 变量管理颜色 — 在 :root 中定义主色、辅助色、文字色等变量，后续修改只需改一处，保持全站一致
• 避免纯黑纯白 — 纯黑 #000 在深色背景上对比过强，建议使用 #1a1a1a 等柔和深色；纯白背景也常用 #fafafa 代替，减轻视觉疲劳
• 深色模式要主动设计 — 不要简单反转颜色，需重新设计阴影、边框和层级关系
• 用开发者工具取色 — Chrome DevTools 的颜色选择器支持 HEX、RGB、HSL 切换，按住 Shift 点击色块可快速切换显示格式

小结

掌握 HEX 和 RGB 的换算、理解色彩搭配原则、重视无障碍对比度，是做出专业网页配色的基础。配色没有绝对标准，但遵循这些原则能显著提升网站的专业感和可用性。