CSS 颜色

CSS 颜色

CSS 提供多种方式来指定元素颜色，用于精确控制网页元素的颜色表现。

CSS 指定颜色可以通过预定义的颜色名，或 HEX、RGB、RGBA、HSL、HSLA 值。

CSS 颜色名

在 CSS 中，你可以使用颜色名称来控制元素颜色，CSS/HTML 支持140 种标准颜色名。

CSS 颜色名使用实例

<h1 style="background-color:Tomato;">设定背景颜色为番茄色</h1>
<h1 style="color:orange;">设定文本颜色为橙色</h1>
<h1 style="border-color:dodgerblue;">设定边框颜色为道奇蓝</h1>
<h1 style="text-decoration-color:mediumseagreen;">设定下划线颜色为中海绿色</h1>

CSS RGB 颜色

在 CSS 中，你可以使用 RGB 值来控制元素颜色，RGB 值由红、绿、蓝三种颜色组成，语法结构rgb(red, green, blue)。

• 红色（red）：定义了红色的强度，取值范围在 0 到 255 之间。
• 绿色（green）：定义了红色的强度，取值范围在 0 到 255 之间。
• 蓝色（blue）：定义了蓝色色的强度，取值范围在 0 到 255 之间。

下面是通过 RGB 值，来设置颜色的演示效果：

• RED 255
• GREEN 99
• BLUE 71

RGB 颜色值示例

CSS RGBA 颜色

RGBA 颜色值是带有 Alpha 通道的 RGB 颜色值的扩展 - 它指定了颜色的不透明度，语法结构rgb(red, green, blue, alpha)。

• 红色（red）：定义了红色的强度，取值范围在 0 到 255 之间。
• 绿色（green）：定义了红色的强度，取值范围在 0 到 255 之间。
• 蓝色（blue）：定义了蓝色色的强度，取值范围在 0 到 255 之间。
• 透明度（alpha）：是介于 0.00（完全透明）和 1.00（完全不透明）之间的数字。

下面是通过 RGBA 值，来设置颜色的演示效果：

• RED 255
• GREEN 255
• BLUE 255
• ALPHA 255

RGBA 透明度示例

CSS HEX 颜色

在 CSS 中，你可以使用 HEX 值来控制元素颜色，HEX 值由红、绿、蓝三种颜色组成。

HEX 颜色的语法结构#redgreenblue，每种颜色取值范围是介于 00 和 ff 之间的十六进制值。

下面是通过十六进制值，来设置颜色的演示效果：

• RED ff
• GREEN 63
• BLUE 47

HEX 颜色值示例

CSS HSL 颜色

在 CSS 中，你可以使用 HSL 值来控制元素颜色，HSL 值由色相、饱和度和明度（HSL）组成。

HSL 颜色的语法结构是hsl(hue, saturation, lightness)。

• 色相（hue）：是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。
• 饱和度（saturation）：是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。
• 亮度（lightness）：是一个百分比值，0％ 是黑色，50％ 是既不明也不暗，100％是白色。

下面是通过 HSL 值，来设置颜色的演示效果：

• HUE 9
• SATURATION 100%
• LIGHTNESS 64%

HSL 颜色值示例

CSS HSLA 颜色

HSLA 颜色是带有 Alpha 通道的 HSL 颜色值的扩展 - 它指定了颜色的不透明度。

HSLA 颜色的语法结构是hsla(hue, saturation, lightness, alpha)。

• 色相（hue）：是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。
• 饱和度（saturation）：是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。
• 亮度（lightness）：是一个百分比值，0％ 是黑色，50％ 是既不明也不暗，100％是白色。
• 透明度（alpha）：是介于 0.00（完全透明）和 1.00（完全不透明）之间的数字。

下面是通过 HSLA 值，来设置颜色的演示效果：

• HUE 9
• SATURATION 100%
• LIGHTNESS 64%
• ALPHA 0.5

HSLA 颜色值示例