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

---

HTML 颜色

HTML 颜色使用预定义的颜色名称或 RGB、HEX、HSL、RGBA 或 HSLA 值指定。
颜色名称

在 HTML 中，可以使用颜色名称指定颜色：
番茄色

橙色

道奇蓝

中海绿

灰色

石板蓝

紫罗兰色

浅灰色

HTML 支持 140 种尺度颜色名称。
背景颜色

设置 HTML 元素的背景颜色：
实例：

1. <h1 style="background-color:DodgerBlue;">Hello World</h1>
2. <p style="background-color:Tomato;">Lorem ipsum...</p>

复制代码

文字颜色

设置文字的颜色
示例

1. <h1 style="color:Tomato;">Hello World</h1>
2. <p style="color:DodgerBlue;">Lorem ipsum...</p>
3. <p style="color:MediumSeaGreen;">Ut wisi enim...</p>

复制代码

边框颜色

设置边框的颜色：
示例

1. <h1 style="border:2px solid Tomato;">Hello World</h1>
2. <h1 style="border:2px solid DodgerBlue;">Hello World</h1>
3. <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)
示例

1. <h1 style="background-color:rgb(255, 99, 71);">...</h1>
2. <h1 style="background-color:#ff6347;">...</h1>
3. <h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
5. <h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
6. <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)。
灰色阴影

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

1. rgb(60, 60, 60)
2. rgb(100, 100, 100)
3. rgb(140, 140, 140)
4. rgb(180, 180, 180)
5. rgb(200, 200, 200)
6. rgb(240, 240, 240)

复制代码

RGBA 颜色值

RGBA 颜色值是 RGB 颜色值的扩展，带有 Alpha 通道 - 指定颜色的不透明度。
RGBA 颜色值指定为：
rgba(红色、绿色、蓝色、alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字：
示例

1. rgba(255, 99, 71, 0)
2. rgba(255, 99, 71, 0.2)
3. rgba(255, 99, 71, 0.4)
4. rgba(255, 99, 71, 0.6)
5. rgba(255, 99, 71, 0.8)
6. rgba(255, 99，71，1）

复制代码

HTML 十六进制颜色

十六进制颜色用以下代码指定：#RRGGBB，其中 RR（红色）、GG（绿色）和 BB（蓝色）十六进制整数指定颜色的成分。
十六进制颜色值
在 HTML 中，可以使用以下形式的十六进制值指定颜色：

1. #rrggbb

复制代码

其中 rr（红色）、gg（绿色）和 bb（蓝色）是 00 到 ff 之间的十六进制值（与十进制 0-255 相同）。
比方，#ff0000 体现为红色，因为红色设置为其最高值 (ff)，而其他两个 (绿色和蓝色) 设置为 00。
另一个示例，#00ff00 体现为绿色，因为绿色设置为其最高值 (ff)，而其他两个 (红色和蓝色) 设置为 00。
要体现玄色，请将所有颜色参数设置为 00，如下所示：#000000。
要体现白色，请将所有颜色参数设置为 ff，如下所示：#ffffff。
示例

1. #ff0000
2. #0000ff
3. #3cb371
4. #ee82ee
5. #ffa500
6. #6a5acd

复制代码

灰色阴影

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

1. #404040
2. #686868
3. #a0a0a0
4. #bebebe
5. #dcdcdc
6. #f8f8f8

复制代码

HTML HSL 和 HSLA 颜色

HSL 代表色调、饱和度和亮度。
HSLA 颜色值是 HSL 的扩展，带有 Alpha 通道（不透明度）。
HSL 颜色值
在 HTML 中，可以使用色调、饱和度和亮度 (HSL) 指定颜色，形式如下：
hsl(色调、饱和度、亮度)
色调是色轮上的度数，范围从 0 到 360。0 表示红色，120 表示绿色，240 表示蓝色。
饱和度是百分比值。0% 表示灰色，100% 表示全色。
亮度也是百分比值。0% 表示玄色，100% 表示白色。
示例

1. hsl(0, 100%, 50%)
2. hsl(240, 100%, 50%)
3. hsl(147, 50%, 47%)
4. hsl(300, 76%, 72%)
5. hsl(39, 100%, 50%)
6. hsl(248, 53%, 58%)

复制代码

饱和度
饱和度可以描述为颜色的强度。
100% 是纯色，没有灰色阴影。
50% 是 50% 灰色，但您仍旧可以看到颜色。
0% 是完全灰色；您再也看不到颜色了。
示例

1. hsl(0, 100%, 50%)
2. hsl(0, 80%, 50%)
3. hsl(0, 60%, 50%)
4. hsl(0, 40%, 50%)
5. hsl(0, 20%, 50%)
6. hsl(0, 0%, 50%)

复制代码

亮度
颜色的亮度可以描述为您想要赋予颜色多少亮度，其中 0% 表示无亮度（玄色），50% 表示 50% 亮度（既不暗也不亮），100% 表示全亮度（白色）。
示例

1. hsl(0, 100%, 0%)
2. hsl(0, 100%, 25%)
3. hsl(0, 100%, 50%)
4. hsl(0, 100%, 75%)
5. hsl(0, 100%, 90%)
6. hsl(0, 100%, 100%)

复制代码

灰色阴影

灰色阴影通常通过将色调和饱和度设置为 0 来定义，并将亮度从 0% 调整到 100% 以得到更深/更浅的阴影：
示例

1. hsl(0, 0%, 20%)
2. hsl(0, 0%, 30%)
3. hsl(0, 0%, 40%)
4. hsl(0, 0%, 60%)
5. hsl(0, 0%, 70%)
6. hsl(0, 0%, 90%)

复制代码

HSLA 颜色值
HSLA 颜色值是 HSL 的扩展颜色值，带有 Alpha 通道 - 指定颜色的不透明度。
HSLA 颜色值指定为：
hsla(色调、饱和度、亮度、alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字：
示例

1. hsla(9, 100%, 64%, 0)
2. hsla(9, 100%, 64%, 0.2)
3. hsla(9, 100%, 64%, 0.4)
4. hsla(9, 100%, 64%, 0.6)
5. hsla(9, 100%, 64%, 0.8)
6. hsla(9, 100%、64%、1）

复制代码

---

总结

本文先容了的使用，如有标题欢迎私信和批评

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。