HTML 的颜色表示, 理解 RGB，HEX，HSL，RGBA 和 HSLA

HTML 的颜色表示, 理解 RGB，HEX，HSL，RGBA 和 HSLA

HTML 中的颜色可以指定为常见的 英文颜色名 或使用如下的颜色代码: HEX 值，RGB 三元组，HSL，RGBA 和 HSLA 值。

HTML 颜色名

W3C 对颜色名的规范区分了基本颜色和扩展颜色。

16种基本的 #颜色名 — aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, 和 yellow。

HTML 颜色代码 | HEX, RGB, RGBA, HSL 和 HSLA 值

HTML 颜色代码是表示计算机能读取和显示的颜色格式的一种方式。颜色代码用于HTML和CSS中，以创建网页设计颜色方案。

RGB

RGB（红，绿，蓝）是一种加色模型，它描述了如何使用三种基本颜色编码任何颜色。它是电视屏幕，计算机，图像扫描仪，视频投影仪，数字相机和移动设备上显示颜色的基础。

R，G 和 B 的值分别是所确定颜色的红色，绿色和蓝色组分的强度（在0到255的范围内）。

HEX

HEX-代码是最常用的颜色代码。
代码如下表示：#RRGGBB，其中每个两位数的值是三种颜色（红色，绿色，蓝色）中每种颜色的范围，通过它们选择代表每种颜色的最终值。

RGBA

RGBA(红色，绿色，蓝色，透明度) 颜色值是RGB颜色值的扩展，增加了一个透明度通道，决定颜色的不透明度。透明度参数是一个从0.0（表示“完全透明”）到1.0（表示“完全不透明”）的数字。例如，rgba(255, 0, 0)显示为纯红色，rgba(255, 0, 0, 0.5)显示为透明度为50%的红色。

与RGB值不同，RGBA值没有十六进制表示法。

HSL

HSL（Hue 色相，Saturation 饱和度，Lightness 亮度）颜色模型是为了更接近人类视觉感知色彩属性而开发的。

HSL 表示重新排列了颜色，使其比RGB表示更直观。它通常用于计算机图形应用程序，如颜色选择器和图像分析。

图中显示了HSL模型的3D图形解释（a）; 图片取自 commons.wikimedia.org/wiki/。图（b）显示了亮度值为50%时HSL模型的2D图形解释。

HSL 是RGB颜色模型在圆柱坐标中的表示。

• 色相 定义了基本颜色。色相基本上是色轮上的任何颜色；它是色轮上从0到360的度数。所以，0是红色，120是绿色，240是蓝色。
• 饱和度 是颜色的强度或纯度。它决定颜色将会多么生动。分是灰色，100% 是完全饱和的颜色。
• 亮度 是颜色中的亮度或光的量。亮度决定颜色中有多少黑色或白色色调。

下表代表了一种色调。从色环中选择了红色。色相=0。表的X轴代表饱和度（100%，75%，50%，25%，0%）。Y轴代表亮度。50% 是“正常”。

HSLA 颜色

HSLA(色相，饱和度，亮度，Alpha 透明度) 颜色值是带有透明度通道的HSL颜色值的扩展，透明度通道决定颜色的不透明度。

结论

HTML 颜色可以通过名称，RGB，RGBA，HEX，HSL 或 HSLA 值定义，并应用于HTML文档中的背景或文本。

下图展示了如何通过名称，RGB，RGBA，HEX，HSL 和 HSLA 值指定青色：

HTML 和 CSS 旨在用于显示在屏幕上的网络内容。屏幕使用 RGB（红色，绿色，蓝色）颜色模型，该模型直接映射到显示器产生颜色的方式。RGB 及其衍生（RGBA，HEX，HSL，HSLA）对于基于屏幕的颜色表示是直观的。