首页 前端知识 前端必知必会-html设置颜色

前端必知必会-html设置颜色

2024-09-08 02:09:39 前端知识 前端哥 531 533 我要收藏

文章目录

  • 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 和 HSLA 值,为颜色添加了 Alpha 通道(此处透明度为 50%):

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)

总结

本文介绍了的使用,如有问题欢迎私信和评论

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17890.html
标签
评论
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!