CSS Colors 颜色

CSS 中的 color 属性用于设置 HTML 元素的颜色。通常，此属性用于设置元素的背景颜色或字体颜色。

在CSS 中，我们使用颜色值来指定颜色。我们还可以将此属性用于边框颜色和其他装饰效果。

我们可以通过以下方式定义元素的颜色：

• RGB 格式。

• RGBA 格式。

• 十六进制表示法。

• HSL。

• HSLA。

• 内置颜色。

下面我们来详细了解一下上述方式的语法和描述。

RGB 格式

RGB 格式是“ RED GREEN and BLUE ”的缩写形式，用于定义HTML元素的颜色，只需指定 0 到 255 范围内的 R、G、B 值即可。

这种格式的颜色值是使用rgb()属性指定的。此属性允许三个值，可以是百分比或整数（范围从 0 到 255）。

并非所有浏览器都支持此属性；这就是为什么不建议使用它的原因。

color: rgb(R, G, B);

RGBA 格式

除了RGBA包含指定元素透明度的A (Alpha)之外，它几乎与 RGB 格式相似。alpha 的值在0.0 到 1.0的范围内，其中0.0表示完全透明，1.0表示不透明。

color:rgba(R, G, B, A);

十六进制表示法

十六进制可以定义为六位数的颜色表示。此表示法以# 符号开头，后跟从0 到 F 的六个字符。在十六进制表示中，前两位数字代表红色（RR）颜色值，接下来的两位数字代表绿色（GG）颜色值，最后两位数字代表蓝色（BB）颜色值。

十六进制的黑色符号是#000000，十六进制的白色符号是#FFFFFF。十六进制表示法中的一些代码是#FF0000、#00FF00、#0000FF、#FFFF00 等等。

color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);

短十六进制代码

它是十六进制表示法的一种简短形式，其中每个数字都被重新创建以达到等效的十六进制值。

例如，#7B6 变成十六进制的 #77BB66。

短十六进制中的黑色符号是#000，而短十六进制中的白色符号是#FFF。一些短十六进制代码是#F00、#0F0、#0FF、#FF0 等等。

HSL

它是Hue、Saturation和Lightness的缩写形式。让我们分别理解它们。

色调：可以定义为色轮上的度数，从 0 到 360。0 代表红色，120 代表绿色，240 代表蓝色。

饱和度：取百分比值，其中100%代表完全饱和，即没有深浅不一的灰色，50%代表50%灰色，但颜色仍然可见，0%代表完全不饱和，即完全灰色，颜色是看不见的。

明度：颜色的明度可以定义为我们想要提供的颜色的光，其中0%代表黑色（没有光），50%代表既不暗也不亮，100%代表白色（全亮度） .

让我们看看颜色属性中 HSL 的语法。

color:hsl(H, S, L);

HSLA

它与 HSL 属性完全相似，不同之处在于它包含指定元素透明度的A (alpha)。alpha 的值在0.0 到 1.0的范围内，其中0.0表示完全透明，1.0表示不透明。

color:hsla(H, S, L, A);

内置颜色

顾名思义，内置颜色是指通过使用名称（例如红色、蓝色、绿色等）使用的先前定义的颜色的集合。

color: color-name;

让我们看看内置颜色列表及其十进制和十六进制值。

包含上述属性的CSS颜色说明如下。

<h1 id="rgb">你好，世界。这是RGB格式。</h1> 
<h1 id="rgba">你好，世界。这是 RGBA 格式。</h1> 
<h1 id="hex">你好，世界。这是十六进制格式。</h1> 
 <h1 id="short">你好，世界。这是短十六进制格式。</h1> 
 <h1 id="hsl">你好，世界。这是 HSL 格式。</h1> 
<h1 id="hsla">你好，世界。这是 HSLA 格式。</h1> 
<h1 id="built">你好，世界。这是内置颜色格式。</h1>