文章目录
- HTML 颜色
- 颜色名称
- 背景颜色
- 文字颜色
- 边框颜色
- 颜色值
- HTML RGB 和 RGBA 颜色
- 灰色阴影
- RGBA 颜色值
- HTML 十六进制颜色
- 灰色阴影
- HTML HSL 和 HSLA 颜色
- 灰色阴影
- 总结
HTML 颜色
HTML 颜色使用预定义的颜色名称或 RGB、HEX、HSL、RGBA 或 HSLA 值指定。
颜色名称
在 HTML 中,可以使用颜色名称指定颜色:
番茄色
橙色
道奇蓝
中海绿
灰色
石板蓝
紫罗兰色
浅灰色
HTML 支持 140 种标准颜色名称。
背景颜色
设置 HTML 元素的背景颜色:
实例:
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
文字颜色
设置文字的颜色
示例
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
边框颜色
设置边框的颜色:
示例
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
颜色值
在 HTML 中,还可以使用 RGB 值、HEX 值、HSL 值、RGBA 值和 HSLA 值指定颜色。
以下三个
元素的背景颜色设置为 RGB、HEX 和 HSL 值:rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
以下两个
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
示例
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
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(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 颜色值是 RGB 颜色值的扩展,带有 Alpha 通道 - 指定颜色的不透明度。
RGBA 颜色值指定为:
rgba(红色、绿色、蓝色、alpha)
alpha 参数是介于 0.0(完全透明)和 1.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 十六进制颜色
十六进制颜色用以下代码指定:#RRGGBB,其中 RR(红色)、GG(绿色)和 BB(蓝色)十六进制整数指定颜色的成分。
十六进制颜色值
在 HTML 中,可以使用以下形式的十六进制值指定颜色:
#rrggbb
其中 rr(红色)、gg(绿色)和 bb(蓝色)是 00 到 ff 之间的十六进制值(与十进制 0-255 相同)。
例如,#ff0000 显示为红色,因为红色设置为其最高值 (ff),而其他两个 (绿色和蓝色) 设置为 00。
另一个示例,#00ff00 显示为绿色,因为绿色设置为其最高值 (ff),而其他两个 (红色和蓝色) 设置为 00。
要显示黑色,请将所有颜色参数设置为 00,如下所示:#000000。
要显示白色,请将所有颜色参数设置为 ff,如下所示:#ffffff。
示例
#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd
灰色阴影
灰色阴影通常使用所有三个参数的相等值来定义:
示例
#404040
#686868
#a0a0a0
#bebebe
#dcdcdc
#f8f8f8
HTML HSL 和 HSLA 颜色
HSL 代表色调、饱和度和亮度。
HSLA 颜色值是 HSL 的扩展,带有 Alpha 通道(不透明度)。
HSL 颜色值
在 HTML 中,可以使用色调、饱和度和亮度 (HSL) 指定颜色,形式如下:
hsl(色调、饱和度、亮度)
色调是色轮上的度数,范围从 0 到 360。0 表示红色,120 表示绿色,240 表示蓝色。
饱和度是百分比值。0% 表示灰色,100% 表示全色。
亮度也是百分比值。0% 表示黑色,100% 表示白色。
示例
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
饱和度
饱和度可以描述为颜色的强度。
100% 是纯色,没有灰色阴影。
50% 是 50% 灰色,但您仍然可以看到颜色。
0% 是完全灰色;您再也看不到颜色了。
示例
hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)
亮度
颜色的亮度可以描述为您想要赋予颜色多少亮度,其中 0% 表示无亮度(黑色),50% 表示 50% 亮度(既不暗也不亮),100% 表示全亮度(白色)。
示例
hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)
灰色阴影
灰色阴影通常通过将色调和饱和度设置为 0 来定义,并将亮度从 0% 调整到 100% 以获得更深/更浅的阴影:
示例
hsl(0, 0%, 20%)
hsl(0, 0%, 30%)
hsl(0, 0%, 40%)
hsl(0, 0%, 60%)
hsl(0, 0%, 70%)
hsl(0, 0%, 90%)
HSLA 颜色值
HSLA 颜色值是 HSL 的扩展颜色值,带有 Alpha 通道 - 指定颜色的不透明度。
HSLA 颜色值指定为:
hsla(色调、饱和度、亮度、alpha)
alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字:
示例
hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%、64%、1)
总结
本文介绍了的使用,如有问题欢迎私信和评论