Skip to main content

CSS 颜色

Docs

color - CSS | MDN (mozilla.org)

CSS 颜色的表示方法​

  • 在 CSS 中，颜色，有以下几种表示方法：

  • 颜色关键字（color keywords）：

  • RGB 颜色：

    • 三原色光模式（RGB color model），又称 RGB 颜色模型或红绿蓝颜色模型，是一种加色模型，将红（Red）、绿（Green）、蓝（Blue）三原色的色光以不同的比例相加，以合成产生各种色彩光。

    • RGB 是一种色彩空间，通过 R（red，红色）、G（green，绿色）、B（blue，蓝色）三原色来组成了不同的颜色；

      • 也就是通过调整这三个颜色不同的比例，可以组合成其他的颜色；
      • 三个数值位为最大时，显示为白色，当三个数值最小时，显示为黑色。

    • RGB 各个原色的取值范围是 0~255；

RGB 的表示方法​

  • RGB 颜色可以通过以 # 为前缀的十六进制字符和函数（rgb()、rgba()）标记表示。

  • rgba() 方法与 rgb() 方法类似，就多了一个用于设置色彩透明度的参数。它的有效范围是从 0.0（完全透明）到 1.0（完全不透明）。

  • 方式一：十六进制符号：#RRGGBB[AA]

    • R（红）、G（绿）、B（蓝）和 A（alpha）是十六进制字符（0–9、A–F）；A 是可选的。比如，#ff0000 等价于 #ff0000ff；

  • 方式二：十六进制符号：#RGB[A]

    • R（红）、G（绿）、B（蓝）和 A（alpha）是十六进制字符（0–9、A–F）；
    • 三位数符号（#RGB）是六位数形式（#RRGGBB）的减缩版。比如，#f09 和 #ff0099 表示同一颜色。
    • 四位数符号（#RGBA）是八位数形式（#RRGGBBAA）的减缩版。比如，#0f38 和 #00ff3388 表示相同颜色。

  • 方式三：函数符：rgb[a](R, G, B[, A])

    • R（红）、G（绿）、B（蓝）可以是 <number>（数字），或者 <percentage>（百分比），255 相当于 100%。
    • A（alpha）可以是 0 到 1 之间的数字，或者百分比，数字 1 相当于 100%（完全不透明）。