前端必知必会-html设置颜色
编程岁月 2024-10-25 13:33:01 阅读 99
文章目录
HTML 颜色颜色名称背景颜色文字颜色边框颜色颜色值HTML RGB 和 RGBA 颜色灰色阴影RGBA 颜色值HTML 十六进制颜色灰色阴影HTML HSL 和 HSLA 颜色灰色阴影
总结
HTML 颜色
HTML 颜色使用预定义的颜色名称或 RGB、HEX、HSL、RGBA 或 HSLA 值指定。
颜色名称
在 HTML 中，可以使用颜色名称指定颜色：
番茄色
橙色
道奇蓝
中海绿
灰色
石板蓝
紫罗兰色
浅灰色
HTML 支持 140 种标准颜色名称。
背景颜色
设置 HTML 元素的背景颜色：
实例：
<code><h1 style="background-color:DodgerBlue;">Hello World</h1>code>
<p style="background-color:Tomato;">Lorem ipsum...</p>code>
文字颜色
设置文字的颜色
示例
<h1 style="color:Tomato;">Hello World</h1>code>
<p style="color:DodgerBlue;">Lorem ipsum...</p>code>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>code>
边框颜色
设置边框的颜色：
示例
<h1 style="border:2px solid Tomato;">Hello World</h1>code>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>code>
<h1 style="border:2px solid Violet;">Hello World</h1>code>
颜色值
在 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>code>
<h1 style="background-color:#ff6347;">...</h1>code>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>code>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>code>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>code>
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）
总结
本文介绍了的使用，如有问题欢迎私信和评论
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。