HTML RGB 和 RGBA 颜色

上一节: HTML颜色 下一节: HTML_十六进制颜色

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)。


示例

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>

</body>
</html>

灰色

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


示例

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(100, 100, 100);">rgb(100, 100, 100)</h1>
<h1 style="background-color:rgb(140, 140, 140);">rgb(140, 140, 140)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(200, 200, 200);">rgb(200, 200, 200)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>

</body>
</html>

RGBA 颜色值

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

RGBA 颜色值通过以下方式指定:rgba(红、 绿、蓝、阿尔法)

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

示例

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

</body>
</html>

可以尝试改变下面的color picker中的alpha试试效果。

Color Picker

这个color picker使用xiaokaike/vue-color 实现。可以拖动和输入改变颜色值, 可以查看对应的十六进制颜色,RGB,RGBA, HSLA颜色。

Hex:{{colors.hex}}

RGBA:{{rgba}}

RGB:{{rgb}}

Hex:{{colors.hex}}

RGBA:{{rgba}}

RGB:{{rgb}}

上一节: HTML颜色 下一节: HTML_十六进制颜色
此页面最后编辑于2022年8月4日 (星期四) 11:09。