码农教程 - 一技在手,衣食无忧! tools

HTML RGB 和 RGBA 颜色

❮ 上一节 下一节 ❯

RGB 颜色值代表红色、绿色和蓝色光源。

RGBA 颜色值是带有 Alpha 通道（不透明度）的 RGB 的扩展。

RGB 颜色值

在 HTML 中，可以使用以下公式将颜色指定为 RGB 值：

RGB(红色的，绿色的,蓝色的）

每个参数（红色、绿色和蓝色）定义颜色的强度，其值介于 0 到 255 之间。

这意味着有 256 x 256 x 256 = 16777216 种可能的颜色！

例如，rgb(255, 0, 0) 显示为红色，因为红色设置为其最高值 (255)，而其他两个（绿色和蓝色）设置为 0。

另一个例子，rgb(0, 255, 0) 显示为绿色，因为绿色设置为其最高值 (255)，而其他两个（红色和蓝色）设置为 0。

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

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

通过混合以下 RGB 值进行实验：

 

红色的

255

绿色的

0

蓝色的

0

示例

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

亲自试一试 »

灰色阴影

灰色阴影通常使用所有三个参数的相同值来定义：

示例

rgb(60, 60, 60)
rgb(100, 100, 100)
rgb(140, 140, 140)
rgb(180, 180, 180)
rgb(200, 200, 200)
rgb(240, 240, 240)

亲自试一试 »

RGBA 颜色值

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

RGBA 颜色值通过以下方式指定：

rgba（红色的，绿色的,蓝色，阿尔法）

alpha 参数是 0.0（完全透明）和 1.0（完全不透明）之间的数字：

通过混合以下 RGBA 值进行实验：

 

红色的

255

绿色的

0

蓝色的

0

Α

0

示例

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)

亲自试一试 »

HTML练习

通过练习测试一下

练习:

插入正确的 RGB 颜色值以使背景颜色完全为蓝色。

<p style="background-color:rgb( , , )">This is a paragraph.</p>

开始练习


❮ 上一节 下一节 ❯