当前位置：首页 > article >正文

CSS 合法颜色值

article 2025/1/21 12:52:04

CSS 颜色

CSS 中的颜色可以通过以下方法指定：

十六进制颜色
带透明度的十六进制颜色
RGB 颜色
RGBA 颜色
HSL 颜色
HSLA 颜色
预定义/跨浏览器的颜色名称
使用 currentcolor 关键字

十六进制颜色

用 #RRGGBB 规定十六进制颜色，其中 RR（红色）、GG（绿色）和 BB（蓝色）十六进制整数指定颜色的成分（分量）。所有值必须在 00 到 FF 之间。

例如，＃0000ff 值呈现为蓝色，因为蓝色分量设置为最高值（ff），其他分量设置为 00。

实例

定义不同的 HEX 颜色：

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:#ff0000;}
#p2 {background-color:#00ff00;}
#p3 {background-color:#0000ff;}
#p4 {background-color:#ffff00;}
#p5 {background-color:#ff00ff;}
</style>
</head>
<body>

<h1>HEX 颜色</h1>
<p>用#RRGGBB指定十六进制颜色，其中RR（红色），GG（绿色）和BB（蓝色）十六进制整数指定颜色的组成部分。所有值必须在00到FF之间。</p>

<p id="p1">红色</p>
<p id="p2">绿色</p>
<p id="p3">蓝色</p>
<p id="p4">黄色</p>
<p id="p5">樱桃色</p>

</body>
</html>

带透明度的十六进制颜色

用 #RRGGBB 规定十六进制颜色。如需增加透明度，请在 00 和 FF 之间添加两个额外的数字。

实例

定义带透明度的 HEX 颜色：

RGB 颜色

RGB 颜色值由 rgb() 函数规定，语法如下：

rgb(red, green, blue)

每个参数（red, green, blue）定义颜色的强度，可以是 0 到 255 之间的整数或百分比值（从 0％到 100％）。

例如，值 rgb(0,0,255) 呈现为蓝色，因为 blue 参数设置为其最高值（255），其他参数设置为 0。

此外，以下值定义相同的颜色：rgb(0,0,255) 和 rgb(0%,0%,100%)。

实例

定义不同的 RGB 颜色：

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgb(255,0,0);}
#p2 {background-color:rgb(0,255,0);}
#p3 {background-color:rgb(0,0,255);}
#p4 {background-color:rgb(192,192,192);}
#p5 {background-color:rgb(255,255,0);}
#p6 {background-color:rgb(255,0,255);}
</style>
</head>
<body>

<h1>RGB 颜色</h1>
<p>RGB 颜色值通过 rgb() 函数来规定：rgb(red, green, blue)</p>
<p>每个参数（红色，绿色和蓝色）定义颜色的强度，并且可以是 0 到 255 之间的整数或百分比值（从 0％ 到 100％）。</p>

<p id="p1">红色</p>
<p id="p2">绿色</p>
<p id="p3">蓝色</p>
<p id="p4">灰色</p>
<p id="p5">黄色</p>
<p id="p6">樱桃色</p>

</body>
</html>

RGBA 颜色

RGBA 颜色值是 RGB 颜色值的扩展，它带有 Alpha 通道 - 指定对象的不透明度。

RGBA 颜色通过 rgba() 函数规定，语法如下：

rgba(red, green, blue, alpha)

alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

实例

定义带有不透明度的不同 RGB 颜色：

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,255,0.3);}
</style>
</head>
<body>

<h1>带不透明度的 RGB 颜色</h1>
<p>RGBA 颜色值是带有 Alpha 通道的 RGB 颜色值的扩展 - 它指定对象的不透明度。</p>

<p id="p1">红色</p>
<p id="p2">绿色</p>
<p id="p3">蓝色</p>
<p id="p4">灰色</p>
<p id="p5">黄色</p>
<p id="p6">樱桃色</p>

</body>
</html>

HSL 颜色

HSL 指的是色相（hue）、饱和度（saturation）和亮度（lightness）- 代表颜色的圆柱坐标表示。

使用 hsl() 函数指定 HSL 颜色值，该函数的语法如下：

hsl(hue, saturation, lightness)

色相是色轮上的度数（从 0 到 360）- 0（或 360）是红色，120 是绿色，240 是蓝色。

饱和度是一个百分比值； 0％表示灰色阴影，而 100％是全彩色。

亮度也是一个百分比； 0％是黑色，100％是白色。

实例

定义不同的 HSL 颜色：

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsl(120,100%,50%);}
#p2 {background-color:hsl(120,100%,75%);}
#p3 {background-color:hsl(120,100%,25%);}
#p4 {background-color:hsl(120,60%,70%);}
#p5 {background-color:hsl(290,100%,50%);}
#p6 {background-color:hsl(290,60%,70%);}
</style>
</head>
<body>

<h1>HSL 颜色</h1>
<p>HSL 代表色相\饱和度和明度 - 表示颜色的圆柱坐标表示。</p>
<p>HSL 颜色值通过 hsl() 函数来指定 ：hsl(hue, saturation, lightness)</p>
<p>色相（Hue）是色轮上的度数（从 0 到 360）- 0（或 360）是红色，120 是绿色，240 是蓝色。饱和度（Saturation）是一个百分比值； 0％ 表示灰色阴影，而 100％ 是全彩色。亮度（Lightness）也是一个百分比； 0％ 是黑色，100％ 是白色。</p>

<p id="p1">绿色</p>
<p id="p2">浅绿色</p>
<p id="p3">深绿色</p>
<p id="p4">柔绿色</p>
<p id="p5">紫色</p>
<p id="p6">淡紫色</p>

</body>
</html>

HSLA 颜色

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

HSLA 颜色值由 hsla() 函数指定，该函数的语法如下：

hsla(hue, saturation, lightness, alpha)

alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

实例

定义带有不透明度的不同 HSL 颜色：

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,75%,0.3);}
#p3 {background-color:hsla(120,100%,25%,0.3);}
#p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
</style>
</head>
<body>

<h1>带不透明度的 HSL 颜色</h1>
<p>HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它指定了对象的不透明度。</p>

<p id="p1">绿色</p>
<p id="p2">浅绿色</p>
<p id="p3">深绿色</p>
<p id="p4">柔绿色</p>
<p id="p5">紫色</p>
<p id="p6">淡紫色</p>

</body>
</html>

预定义/跨浏览器的颜色名称

HTML 和 CSS 颜色规范中预定义了 140 个颜色名称。

例如：blue、red、coral、brown 等：

实例

定义不同的颜色名：

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
</style>
</head>
<body>

<h1>预定义的颜色名称</h1>
<p>HTML 和 CSS 颜色规范中预定义了 140 个颜色名称。这些只是其中的一些：</p>

<p id="p1">蓝色</p>
<p id="p2">红色</p>
<p id="p3">珊瑚色</p>
<p id="p4">棕色</p>

</body>
</html>

currentcolor 关键字

currentcolor 关键字引用元素的 color 属性值。

实例

以下 <div> 元素的边框颜色将为蓝色，因为 <div> 元素的文本颜色为蓝色：

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  color: blue;
  border: 10px solid currentcolor;
}
</style>
</head>
<body>

<h1>currentcolor 关键字</h1>
<p>currentcolor 关键字引用元素的 color 属性的值。</p>
<p>下面的 div 元素的边框颜色将为蓝色，因为 div 元素的文本颜色为蓝色：</p>

<div id="myDIV">
这个 div 元素有蓝色文本颜色和蓝色边框。
</div>

</body>
</html>