CSS 颜色的 合法颜色值
- CSS 颜色 的分类
- 可以用 以下方法 来规定 CSS 中的颜色:
- ①
RGB
颜色- ❶ 十六进制 颜色 :
#RRGGBB[AA]
AA
: 可选的 不透明度值
- ❷
rgb()
- ❸
rgba()
- ❶ 十六进制 颜色 :
- ②
HSL
颜色hsl()
hsla()
- ③ 预定义/跨浏览器 颜色 关键字
- 颜色名,
transparent
关键字,currentColor
关键字
- 颜色值的 浏览器支持
1. 颜色关键字
⑴ 颜色名
-
不区分 大小写:
- 颜色名称是 不区分大小写的 标识符,它表示 一个具体的 颜色
- 例如
black,red, blue
。
- 例如
- 颜色名称是 不区分大小写的 标识符,它表示 一个具体的 颜色
-
可接受 颜色名: 使用名称 来表示颜色
- 可接受 颜色名的列表 经由不同的规范 而变化了许多:
- ① 16 个基本颜色:
- CSS 标准 1 只接受 16 个基本颜色,因它们来源于 VGA 显卡所显示的颜色集合 而被称为 VGA colors (视频图形阵列色彩)。
- ② 新增
orange
颜色: CSS 标准 2 增加了orange
关键字。 - 点击查看 更多详情
-
颜色名的 浏览器支持
- 所有浏览器 都支持 颜色名,但 限定在16 个标准色,除去了
orange
。
- 所有浏览器 都支持 颜色名,但 限定在16 个标准色,除去了
-
147 种颜色名:
- HTML 和 CSS 颜色规范中 , 定义了 147 种颜色名
- 17 种标准颜色 和 130 种其他颜色。
- ① 17 种标准色:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow
- 如果使用 其它颜色的话,就应该使用 十六进制的颜色值,或者其他 合法的颜色值表达.
- ② 147 种 CSS 颜色: 十六进制值 和 对应颜色表
- HTML 和 CSS 颜色规范中 , 定义了 147 种颜色名
- 16 种标准色 对应颜色和十六进制值
- 颜色名 使用的 注意事项
- ① 限定 16 个基本颜色:
- HTML 只识别 CSS1 中的 16个 基本颜色关键字,使用 特定的算法 将无法识别的值(通常是完全不同的颜色) 进行转换。
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
- HTML 只识别 CSS1 中的 16个 基本颜色关键字,使用 特定的算法 将无法识别的值(通常是完全不同的颜色) 进行转换。
- ② 使用对象:
- 其他颜色关键字 也应该只被用于
SVG
和CSS
。
- 其他颜色关键字 也应该只被用于
- ③ CSS 属性无效:
- 未知的关键字 会让
CSS
属性无效。- 无效的属性 将被忽略,该颜色将 没有作用。
- 这是一个和 HTML 相比 不同的行为。
- 未知的关键字 会让
- ④ 没有 透明度:
- 使用关键字 定义的颜色 ,在
CSS
中有 没有 透明度,它们是 纯实色。
- 使用关键字 定义的颜色 ,在
- ⑤ 颜色名的 别名
gray
=grey
aqua
=cyan
- 水绿色,美 /ˈɑːkwə/,
- 蓝绿色,美 /ˈsaɪæn,ˈsaɪən/
fuchsia
=magenta
- 美 /ˈfjuːʃə/,紫红色
- 美 /məˈdʒentə/,洋红色
- ① 限定 16 个基本颜色:
- 颜色和 可访问性
- 颜色 不能作为 唯一识别方式: 不要 使用颜色 作为 唯一的方式 去传达 某个具体的信息,行为或结果。
- 用户的 视觉障碍: 一些用户 在分辨颜色上 存在问题 从而所传达的信息 可能不被理解。
- 当然,这并不是 要阻止颜色的使用,只有在使用颜色 作为唯一的方式去 描述一些信息时才应当避免。
⑵ transparent 关键字
-
transparent
关键字- 表示一个 完全透明的 颜色
-
颜色=背景色:
- 即 该颜色 看上去将是 背景色。
-
transparent
= 完全透明的 黑色:- 是带有 不透明值 为最小值的黑色,是
rgba(0,0,0,0)
的简写。
- 是带有 不透明值 为最小值的黑色,是
transparent
透明颜色 = 真实颜色的 过程- ① 不真实的颜色:
transparent
关键字在 CSS Level2
(Revision 1) 中 不是 一个真实的颜色。- 它是一个 特殊的关键字,可以代替一个普通的 颜色值, 用于两个 CSS 属性中:
background
和border
。
- ② 真实的颜色:
- 随着 阿尔法通道(alpha channels)透明度(即 能够设置 颜色的不透明度了) 的支持
transparent
在 CSS Colors Level3
中 被重新定义为 一个真实的颜色- 允许在任何一个需要 颜色值的地方 使用,像
color
属性。
- 允许在任何一个需要 颜色值的地方 使用,像
- ③ 覆盖颜色:
- 本质上 使用它 可以覆盖一个 继承的 单色。
- ① 不真实的颜色:
⑶ currentColor 关键字
currentColor
关键字- ① 表示元素的 文字颜色
color
的 属性值。 - ② 允许对 默认 不接收 颜色值的属性 使用 颜色值。
- ③ 如果
currentcolor
用作color
属性的值,那么它将从color
属性的 继承值 中 获取其值。
- ① 表示元素的 文字颜色
- 示例1: 使用 继承颜色值: 一个内部的
div
, 填充颜色 应用它继承自父级的color
属性的 颜色值。
<div style="color:green; border: 1px dashed currentColor;">
这行文本的颜色 是绿色的。
<div style="background:currentColor; height:20px;"></div>
整个区域 被一条绿边包围着。
</div>
- 整个区域
div
的边框颜色 和 内部div
的背景颜色- 使用的 都是 继承自 文字颜色
color
的 颜色值.
- 使用的 都是 继承自 文字颜色
2. 十六进制颜色 (#红绿蓝,0~f)
-
⑴ 颜色组合:
- 颜色是通过对 红、绿 和 蓝光 的 组合 来显示的。
-
⑵ 十六进制 颜色值的 浏览器支持
- 所有浏览器 都支持 十六进制颜色值。
-
⑶ 十六进制 颜色值的语法:
#RRGGBB
(简写#RGB[A]
),#RRGGBB[AA]
AA
: 可选的 不透明度值: 必须介于0-9
,A-F
之间- 红绿蓝:使用 三个 双位数 来编写,并以
#
符号 开头。- 十六进制整数 规定了 颜色的成分。
RR
(红色)GG
(绿色)BB
(蓝色)
- 每个 颜色值的范围: 必须介于
0-9
,A-F
之间
- 红绿蓝:使用 三个 双位数 来编写,并以
-
⑷ 十六进制颜色值的 简写
#RGB
=#RRGGBB
#f03
=#ff0033
代表同样的颜色。#0f38
=#00ff3388
. (最后的 是不透明度值)- 50%不透明的 绿色:
#33AA3380
- 50%不透明的 绿色:
- ⑸ 单个颜色值的变化
- 值越大,颜色 越鲜艳/越浅色
- 值越小 颜色越暗.
- 这里 只设置了红色,并逐渐增大 颜色值 (绿色和蓝色光 为 0 )
- 值越大,颜色 越鲜艳/越浅色
- ⑹ 表示 灰色
- 灰色 使用 所有光源的等量 的光线 来显示。
- 三色 等值: 即 红绿蓝,都设置为 相同的值.
- 值越大,颜色 越浅.
- 灰色 使用 所有光源的等量 的光线 来显示。
- ⑺ 1600 万种 不同的颜色
- 从 0 到 255 种 红绿蓝值 能够组合出 总共超过 1600万 种 不同的颜色
- (根据 256 x 256 x 256 = 1677.7216 万 计算)。
- ⑻ 浏览器显示颜色 数目:
- 大多数现代的显示器 都能显示出 至少 1.6万 种(
16384
) 不同的颜色。
- 大多数现代的显示器 都能显示出 至少 1.6万 种(
- 示例1:
#ff0000
值 显示为蓝色,这是因为红色成分 被设置为最高值(ff
),而其他成分 被设置为0
。
p
{
background-color:#ff0000;
}
3. RGB 颜色 (整数,百分比值)
-
⑴
RGB
颜色值的 浏览器支持- 所有浏览器 都支持
RGB
颜色值。
- 所有浏览器 都支持
-
⑵ RGB 颜色值的语法:
rgb(red, green, blue)
(也是红绿蓝的 顺序)- 每个参数指定 红绿蓝的颜色值 (
red
、green
以及blue
)- 定义 颜色的强度
- ① 整数值: 是介于
0
~255
之间的 整数- 不可以用 带小数点值,要用整数.(
100.2
,错误)
- 不可以用 带小数点值,要用整数.(
- ② 百分比值: 或者 百分比值(从
0%
~100%
)。- 整数值和百分比值,不要混用.
- 等值:
255
=100%
(满值)
- 每个参数指定 红绿蓝的颜色值 (
- 示例1:
rgb(255,0,0)
值显示为 红色,这是因为blue
参数 被设置为最高值(255
),而其他被设置为0
。- 百分比值 :
rgb(100%,0%,0%)
。
- 百分比值 :
p
{
background-color:rgb(255,0,0);
}
- 示例2: 用
rgb
的百分比值 表示绿色
p
{
background-color:rgb(0%,100%,0%);
}
4. RGBA 颜色 (带 不透明度值 / 颜色深浅)
-
⑴
RGBA
颜色值的 浏览器支持- IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
-
⑵
RGBA
颜色值- 是
RGB
颜色值的 扩展,带有一个alpha
通道 alpha
通道: 规定了 对象的 不透明度。
- 是
-
⑶ RGBA 颜色值的 语法:
rgba(red, green, blue, alpha)
- 红绿蓝+不透明度
- alpha 参数: 介于
0.0
~1.0
的 数字,或者 百分比 值。- ①
0.0
(完全透明)- 不透明度为
0
= 完全透明
- 不透明度为
- ②
1.0
(完全不透明)的数字- 不透明度为
1
= 完全不透明1
=100%
(完全不透明)
- 不透明度为
- 颜色变化: 不透明 值 越大,颜色越深.
- ①
- 示例1: 不透明度的 变化
- 红色,不透明度 设置
0
= 完全透明,逐渐增大 不透明度 每次0.1
.
- 红色,不透明度 设置
p
{
background-color:rgba(255,0,0,0);
}
- 开始的 颜色
- 不透明度 =
0
,完全透明,看不到颜色
- 不透明度 =
- 逐渐增大 不透明度值: 从
0
~1.0
- 不透明 值 越大,颜色越深.
5. HSL 颜色 (色度,饱和度,亮度 / 颜色,灰彩程度,深浅程度)
-
⑴ HSL 颜色值的 浏览器支持
- IE9+、Firefox、Chrome、Safari 以及 Opera 10+。
-
⑵ HSL 颜色值
- 指的是 色调,饱和度,亮度
- ①
hue
(色调),/hjuː/- 指明 定义什么颜色.
- ②
saturation
(饱和度),美 /ˌsætʃəˈreɪʃn/- 饱和度高,颜色 鲜艳.
- 指明 颜色的鲜艳度,偏灰色,还是很亮眼. (极致是 全灰和全彩)
- 饱和度高,颜色 鲜艳.
- ③
lightness
(亮度), 美 /ˈlaɪtnəs/- 亮度高,颜色 偏浅色.
- 亮度低,颜色 偏深色.
- 指明颜色的暗淡,是深色,还是浅色.(极致是 黑色和白色)
- ①
- 表示 颜色柱面 坐标表示法。
- HSL 更容易地创建 一组 匹配的颜色(例如,想要 单一色调的 多个色度时)。
- 指的是 色调,饱和度,亮度
- ⑶ HSL 颜色值的 语法:
hsl(hue, saturation, lightness)
-
① 色度 h:
Hue
- 色盘上的度数(从
0
~360
)0
(或360
) = 红色120
= 绿色240
= 蓝色- 颜色/色度 h的 变化
- 其他值不变, 持续增大
h
色度值 (从红色0
,开始,每次加20
,看下色彩的变化) - 颜色 变化规律: 差不多是 赤橙黄绿 青蓝紫 (全彩s=
100%
,亮度不暗不亮 l=50%
时)
- 其他值不变, 持续增大
- 色盘上的度数(从
-
② 饱和度 s:
Saturation
(饱和度s
= 颜色的灰彩)- 百分比 值
0%
= 灰色 = 完全 不饱和100%
= 全彩 = 饱和度 完全饱和- 饱和度高 颜色鲜艳:
- 从 灰色
0%
开始, 逐渐增加 饱和度 s 值的 色彩变化 - 饱和度增加,色彩越来 越鲜艳了
- 从 灰色
- 百分比 值
-
③ 亮度 l:
Lightness
(亮度l
= 颜色深浅)- 百分比 值
0%
= 黑色50%
= 本色,亮度正常 (颜色 不变深色,也 不变浅色)100%
= 白色- 亮度低,颜色深:
- 从 l=
50%
,逐渐减小,每次10%
, 颜色 越来越暗,最后变成了 纯黑色
- 从 l=
- 亮度高,颜色浅:
- 从 l=
50%
,逐渐增大,每次10%
, 颜色 越来越淡,最后变成了 纯白色
- 从 l=
- 百分比 值
-
- 示例1: 把文本显示为 红色 h=
0/360
,全彩的 s=100%
,亮度 l=50%
不浓不淡 (不黑不白)
p
{
background-color:hsl(0,100%,50%);
}
- 示例2: 把文本显示为淡一点的红色,亮度加到
80%
p
{
background-color:hsl(0,100%,80%);
}
- 示例3: 保持全彩 = 饱和度 s=
100%
,亮度 不暗不亮 = 亮度 l=50
- 持续增大 色度值 h(从红色
0
,开始,每次加20
,看下色彩的变化)
- 持续增大 色度值 h(从红色
p
{
background-color:hsl(0,100%,50%);
}
- 开始时的 颜色
- 颜色/色度 h的 变化
- 其他值不变, 持续增大
h
色度值 (从红色0
,开始,每次加20
,看下色彩的变化) - 颜色 变化规律: 差不多是 赤橙黄绿青蓝紫 (很巧合啊 ✧◡✧,有趣)
- 其他值不变, 持续增大
- 示例4: 饱和度 s 的变化
- 色度 红色 h=
0
,亮度 l=50%
不暗也不亮, 保持不变- 把饱和度从 灰色 s=
0%
,每次加10%
,持续增加 全彩 h=100%
,看下变化
- 把饱和度从 灰色 s=
- 色度 红色 h=
p
{
background-color:hsl(0,0%,50%);
}
- 开始的 颜色
- 原本 颜色为 红色,但 饱和度灰色,所以会显示为 灰色
- 逐渐增加 饱和度 s 值的 色彩变化
- 很明显吧,饱和度增加,色彩越来 越鲜艳了
- 因为饱和度 s =
100%
,就是全彩了,s=0%
就是灰色
- 因为饱和度 s =
- 很明显吧,饱和度增加,色彩越来 越鲜艳了
- 示例5: 亮度 l 的变化
- 色度 红色 h=
0
,饱和度 全彩 s=100%
保持不变- 把亮度从 l=
50%
,不暗也不亮,逐渐减小值 和 逐渐增大值,每次10%
, 看下 颜色的变化
- 把亮度从 l=
- 色度 红色 h=
p
{
background-color:hsl(0,100%,50%);
}
-
开始的 颜色
-
从 l=
50%
,亮度值 逐渐减小,每次10%
- 颜色 越来越暗/深色,最后变成了 纯黑色
-
从 l=
50%
,亮度值 逐渐增大,每次10%
- 颜色 越来越淡/浅色,最后变成了 纯白色
6. HSLA 颜色 (带 不透明值 / 颜色深浅)
-
⑴ HSLA 颜色值的 浏览器支持
- IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
-
⑵ HSLA 颜色值
- HSL 颜色值的扩展,带有一个
alpha
通道 alpha
通道: 规定了对象的 不透明度
- HSL 颜色值的扩展,带有一个
-
⑶ HSLA 颜色值的 语法:
hsla(hue, saturation, lightness, alpha)
alpha
参数: 定义 不透明度。- alpha 参数范围: 介于
0.0
~1.0
(完全不透明)的 数字0.0
(完全透明)1.0
(完全不透明)- 不透明 值越大,颜色 越深/鲜艳.
- alpha 参数范围: 介于
- 示例1: 不透明度值
a
的变化 从alpha,a=0
不透明度 = 0,完全透明,看到颜色开始
p
{
background-color:hsl(0,100%,50%,0);
}
- 开始的颜色
- 逐渐增大 不透明值
- 每次增加
0.1
- 不透明 值越大,颜色 越鲜艳/深.
- 每次增加
♣ 结束语 和 友情链接
- 捐助: 喜欢这篇文章吗? 持续更新中,捐助此文,向团团 表示鼓励和支持吧~❤
- 捐助二维码:
- 感谢:♥♥♥ 如果这篇文章 对您有帮助的话,可以点赞、评论、关注,鼓励下作者哦,感谢阅读 ~
- 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮( ̄▽ ̄)╭
- 转载 请注明出处 ,Thanks♪(・ω・)ノ
- 作者:Hey_Coder
- 来源:CSDN
- 原文:https://blog.csdn.net/VickyTsai/article/details/102927784
- 版权声明:本文为博主原创文章,转载请附上博文链接!