CSS基础-颜色

This entry is part 4 of the seriesenjoy-css

颜色是任何网站的重要组成部分，在 CSS 中可以使用named-color、HEX、RGB/RGBA、 HSL/HSLA、currentColor等方式表示颜色。

named-color

直接使用颜色名称来表达，例如red、green、black。

Code Playground

<style>
  body {
    color: red;
  }
</style>
<body>
  Hello world!
</body>

CSS中预定义了约140种named-color, 为了方便展示，我们借助开发者Anthony Lieualen创建的这个简洁演示（在一个圆中显示了所有140种命名的网页颜色)来了解这些named-color

Created by Anthony Lieuallen. MIT Licensed. View source on Github.

RGB/RGBA

RGB( Red Green Blue ) 是表示三种颜色通道（红、绿、蓝）的颜色模型。这三个值中的每个值可以是介于0和255之间的数字，也可以是介于0%到100%之间的百分比。

如果三个值均为0或0%，就代表为黑色，相反三个值都为255或100%，则代表白色。

css

.element {
  /* White */
  color: rgb(255, 255, 255);
  color: rgb(100%, 100%, 100%);

  /* Black */
  background-color: rgb(0, 0, 0);
  background-color: rgb(0%, 0%, 0%);
}

RGB的好处是有一个Alpha通道来控制颜色的透明度。这对于使用色调非常有用。

css

.element {
  /* A black background color with 50% transparency */
  background-color: rgba(0, 0, 0, 0.5);
}

如果Alpha值为0，则颜色或背景为透明，不可见。

rgba( 213,50,16,0.2)

Hex

CSS中的十六进制颜色代码（Hex）是一种表示颜色的方法，它使用一个六位数的十六进制数字来定义颜色(#RRGGBB)。这种方法是最常用的颜色表示方式之一，因为它简洁且易于使用。

Code Playground

<style>
  body {
    /*👇*/
    color: #ff0000;
  }
</style>
<body>
  Hello world!
</body>

# 是一个标记符号，表示这是一个颜色值。
RR 代表红色的十六进制值。
GG代表绿色的十六进制值。
BB代表蓝色的十六进制值。

#991234

Hex 本质上与 RGB相同. 都是为红、绿、蓝三个通道设置值.

在十进制中，一个两位数的值可以包含100个可能的值（10×10）。使用十六进制，总数为256（16×16）。所以它实际上就像rgb（）一样，我们为每个R/G/B通道指定一个介于0和255之间的值。

HSL/HSLA

HSL（Hue, Saturation, Lightness）是一种在CSS中表示颜色的方法，它基于颜色轮，使用色调（Hue）、饱和度（Saturation）和亮度（Lightness）来定义颜色。与RGB和十六进制颜色代码相比，HSL提供了一种更直观的方式来理解和操作颜色，使得颜色的调整变得更加简单。

HSL颜色值的基本格式是hsl(H, S, L)，其中：

H（色调）是一个0到360度的值，表示颜色轮上的角度。0（或360）代表红色，120代表绿色，240代表蓝色。
S（饱和度）是一个百分比值，表示颜色的饱和度。0%表示灰色，100%表示完全饱和的颜色。
L（亮度）也是一个百分比值，表示颜色的亮度。0%表示黑色，100%表示白色，50%表示既不亮也不暗的颜色。

饱和度 ⇢

⇠ 亮度

0deg色度 ⇢360deg

hsl(213deg, 50%, 16%)

可以使用HSLA来设置透明度

hsla(213deg, 50%, 16%, 0.5)

currentColor 关键字

currentColor是一个特殊的CSS关键字，它可以用于请求元素的color属性值，以便在其他CSS属性中使用。这意味着你可以在一个地方定义颜色，然后在多个地方使用它，而不需要重复写出颜色值。如果你需要更改颜色，只需在color属性上更改它，所有使用currentColor的地方都会自动使用新颜色

比如，当你想要一个元素的边框颜色与其文本颜色一致时，使用currentColor非常有意义。

Code Playground

<style>
  p {
    color: blue;
    /*👇*/
    border: 1px solid currentColor;
  }
</style>
<body>
  <p>
    Hello world!
  </p>
</body>

在这个例子中，段落的文本颜色和边框颜色都被设置为蓝色。如果p元素是另一个元素的子元素，并且没有设置自己的颜色值，那么border-color将会继承祖先元素设置的颜色值

资源

Table of Contents

CSS基础-颜色

named-color

RGB/RGBA

Hex

HSL/HSLA

currentColor 关键字

资源

Questions? Let's chat

A TypeScript Full Stack Blog