CSS RGB 颜色


RGB 值

在 CSS 中,可以使用下面的公式将颜色指定为 RGB 值:

rgb(red, green, blue)

每个参数 (redgreen 以及 blue) 定义了 0 到 255 之间的颜色强度。

例如,rgb(255, 0, 0) 显示为红色,因为红色设置为最大值(255),其他设置为 0。

要显示黑色,请将所有颜色参数设置为 0,如下所示:rgb(0, 0, 0)。

要显示白色,请将所有颜色参数设置为 255,如下所示:rgb(255, 255, 255)。

请通过混合以下 RGB 值来进行实验:

rgb(255, 99, 71)

RED

255

GREEN

99

BLUE

71

实例
rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)

通常为所有 3 个光源使用相等的值来定义灰色阴影:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
  5. <h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
  6. <h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
  7. <h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
  8. <h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
  9. <h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>
  10. <p>在 HTML 中,您可使用 RGB 值规定颜色。</p>
  11. </body>
  12. </html>
实例
rgb(0, 0, 0)
rgb(60, 60, 60)
rgb(120, 120, 120)
rgb(180, 180, 180)
rgb(240, 240, 240)
rgb(255, 255, 255)

RGBA 值

RGBA 颜色值是具有 alpha 通道的 RGB 颜色值的扩展 - 它指定了颜色的不透明度。

RGBA 颜色值指定为:

rgba(red, green, blue, alpha)

alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字:

请通过混合以下 RGBA 值来进行实验:

rgba(255, 99, 71, 0.5)

RED

255

GREEN

99

BLUE

71

ALPHA

0.5

实例
rgba(255, 99, 71, 0)
rgba(255, 99, 71, 0.2)
rgba(255, 99, 71, 0.4)
rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.8)
rgba(255, 99, 71, 1)

分类导航