HTML 颜色深浅

HTML 颜色概念：色调与色彩模型

了解颜色如何混合以及在数字世界中如何表示，是有效在网页设计中使用颜色的关键。

RGB 色彩模型

数字显示屏使用 RGB（红、绿、蓝） 加色模型来创建颜色。通过组合不同强度的红、绿、蓝光，可以产生广泛的颜色光谱。

在常见的网络颜色格式中（HEX、RGB）：

• 每个分量（R、G、B）通常有 256 个强度级别（0 到 255）。
• 0 表示该分量没有光。
• 255（或 HEX 中的 FF）表示该分量达到最大强度。

将这些组合起来，可产生 256 x 256 x 256 = 16,777,216 种可能的颜色。

示例：

• rgb(255, 0, 0) 或 #FF0000：纯红色（最大红色，无绿或蓝）。
• rgb(0, 255, 0) 或 #00FF00：纯绿色（最大绿色，无红或蓝）。
• rgb(0, 0, 255) 或 #0000FF：纯蓝色（最大蓝色，无红或绿）。
• rgb(255, 255, 255) 或 #FFFFFF：白色（所有分量达到最大强度）。
• rgb(0, 0, 0) 或 #000000：黑色（所有分量均无强度）。

现代显示屏能够显示数百万种颜色（通常称为 24 位或“真彩色”），从而可以使用完整的 RGB 光谱。

创建色调：灰色与浅色/暗色/浊色

灰色调：

当红、绿、蓝分量具有相等强度时，会创建出灰色调。

色调	HEX	RGB
黑色	#000000	rgb(0, 0, 0)
深灰	#404040	rgb(64, 64, 64)
灰	#808080	rgb(128, 128, 128)
银	#C0C0C0	rgb(192, 192, 192)
浅灰	#D3D3D3	rgb(211, 211, 211)
白色	#FFFFFF	rgb(255, 255, 255)

浅色、浊色和暗色：

你可以创建一个基础颜色的变体：

• 浅色 (Tint)： 在颜色中添加白色（使其变亮）。在 HSL 中，增加 Lightness（亮度）。
• 暗色 (Shade)： 在颜色中添加黑色（使其变暗）。在 HSL 中，减少 Lightness（亮度）。
• 浊色 (Tone)： 在颜色中添加灰色（使其饱和度降低）。在 HSL 中，减少 Saturation（饱和度）。

HSL 色彩模型（hsl(色相, 饱和度, 亮度)）通过调整亮度和饱和度值并保持色相不变，对于通过编程生成浅色、暗色和浊色特别有用。

使用 HSL 创建蓝色变体（hsl(240, 100%, 50%)）的示例：

/* 基础蓝色 */
background-color: hsl(240, 100%, 50%);

/* 浅色 (更亮) */
background-color: hsl(240, 100%, 75%);

/* 暗色 (更暗) */
background-color: hsl(240, 100%, 25%);

/* 浊色 (饱和度更低) */
background-color: hsl(240, 50%, 50%);

网页安全色（历史背景）

在网页的早期，许多计算机只能显示有限的 256 色调色板。“网页安全色”调色板定义了 216 种特定颜色，这些颜色预计在这种有限显示屏上运行的不同浏览器和操作系统中能一致呈现。

这些颜色基于特定的 RGB 值，每个分量仅使用 00、33、66、99、CC 和 FF（十六进制）。

今日相关性： 网页安全色的概念已基本过时。现代计算机和设备可以显示数百万种颜色，并且浏览器能够有效处理颜色管理。

您不应将颜色选择限制在旧的网页安全调色板中。请专注于选择适合您的设计、满足可访问性对比度要求并增强用户体验的颜色。

可访问性考量

在选择颜色时，务必考虑可访问性。确保文本颜色和背景颜色之间有足够的对比度，以便包括视觉障碍用户在内的所有人都可阅读内容。

使用在线对比度检查工具来验证您的颜色组合是否符合 Web 内容可访问性指南 (WCAG) 标准（通常为 AA 或 AAA 级别）。