CSS 选定颜色

CSS (Cascading Style Sheets) 是一种用于网站布局和样式设计的语言，其最常见的用途之一是为 HTML 页面添加颜色。在 CSS 中，有多种方式可以选定颜色。

颜色关键字

CSS 中有一组预定义的颜色关键字，例如 red、blue、green 等等。这些颜色关键字会被翻译成 RGB 值，使得在不同浏览器中它们的颜色表现相对一致。以下是一些常用的颜色关键字：

• black：黑色
• white：白色
• red：红色
• green：绿色
• blue：蓝色
• yellow：黄色
• purple：紫色

h1 {
  color: blue;
}

RGB 和 RGBA

RGB 和 RGBA 是表现颜色的另一种方式，其中 RGB 用三种颜色通道来表示颜色，每种通道的值在 0 到 255 之间。RGBA 在 RGB 的基础上增加了透明度，取值范围为 0 到 1。例如：

• rgb(255, 0, 0)：红色
• rgba(0, 255, 0, 0.5)：半透明绿色

p {
  color: rgb(255, 0, 0);
  background-color: rgba(0, 255, 0, 0.5);
}

十六进制颜色

CSS 还支持使用十六进制颜色值来选定颜色，这种方式比较灵活。十六进制颜色由一个井号 # 开头，后跟六个十六进制数字，每两个数字表示一种颜色通道。例如：

• #FF0000：红色
• #00FF00：绿色
• #0000FF：蓝色

a {
  color: #FF0000;
  background-color: #00FF00;
}

HSL 和 HSLA

HSL 和 HSLA 是一种另类的颜色表示方式，它将颜色分解为色相、饱和度和亮度三个参数，类似于调色板中的颜色选择器。HSL 中的 H 代表色相，取值范围为 0 到 360；S 代表饱和度，取值范围为 0 到 100；L 代表亮度，取值范围也是 0 到 100。HSLA 在 HSL 的基础上增加了透明度。例如：

• hsl(0, 100%, 50%)：红色
• hsla(120, 100%, 50%, 0.5)：半透明绿色

blockquote {
  color: hsl(0, 100%, 50%);
  background-color: hsla(120, 100%, 50%, 0.5);
}

在 CSS 中选定颜色的方式很多

从简单的预定义颜色关键字到灵活的十六进制颜色值和 HSL，都是常用的方式。我们可以根据实际需求选用不同的方式。