HTML 的颜色表示, 理解 RGB，HEX，HSL，RGBA 和 HSLA
HTML 的颜色表示, 理解 RGB，HEX，HSL，RGBA 和 HSLA
在网页开发中，颜色的表示方式多种多样，从简单的颜色名称到复杂的颜色代码，每种方式都有其独特的应用场景。本文将详细介绍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）对于基于屏幕的颜色表示是直观的。