【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。

• 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 颜色: 十六进制值 和 对应颜色表

---

• 16 种标准色 对应颜色和十六进制值
  • 

---

• 颜色名 使用的 注意事项
  • ① 限定 16 个基本颜色:
    • HTML 只识别 CSS1 中的 16个 基本颜色关键字，使用 特定的算法 将无法识别的值(通常是完全不同的颜色) 进行转换。
      • aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
  • ② 使用对象:
    • 其他颜色关键字 也应该只被用于 SVG 和 CSS 。
  • ③ CSS 属性无效:
    • 未知的关键字 会让 CSS 属性无效。
      • 无效的属性 将被忽略，该颜色将 没有作用。
    • 这是一个和 HTML 相比 不同的行为。
  • ④ 没有 透明度:
    • 使用关键字 定义的颜色 ,在 CSS 中有 没有 透明度，它们是 纯实色。
  • ⑤ 颜色名的 别名
    • gray = grey
    • aqua = cyan
      • 水绿色,美 /ˈɑːkwə/,
      • 蓝绿色,美 /ˈsaɪæn,ˈsaɪən/
    • fuchsia = magenta
      • 美 /ˈfjuːʃə/,紫红色
      • 美 /məˈdʒentə/,洋红色

---

• 颜色和 可访问性
  • 颜色 不能作为 唯一识别方式: 不要 使用颜色 作为 唯一的方式 去传达 某个具体的信息，行为或结果。
  • 用户的 视觉障碍: 一些用户 在分辨颜色上 存在问题 从而所传达的信息 可能不被理解。
    • 当然，这并不是 要阻止颜色的使用，只有在使用颜色 作为唯一的方式去 描述一些信息时才应当避免。

---

⑵ transparent 关键字

• transparent 关键字

  • 表示一个 完全透明的 颜色

• 颜色=背景色:

  • 即 该颜色 看上去将是 背景色。

• transparent= 完全透明的 黑色:

  • 是带有 不透明值 为最小值的黑色，是 rgba(0,0,0,0)的简写。

---

• transparent 透明颜色 = 真实颜色的 过程
  • ① 不真实的颜色:
    • transparent 关键字在 CSS Level 2 (Revision 1) 中 不是 一个真实的颜色。
    • 它是一个 特殊的关键字，可以代替一个普通的 颜色值, 用于两个 CSS 属性中： background 和 border。
  • ② 真实的颜色:
    • 随着 阿尔法通道（alpha channels）透明度(即 能够设置 颜色的不透明度了) 的支持
    • transparent 在 CSS Colors Level 3 中 被重新定义为 一个真实的颜色
      • 允许在任何一个需要 颜色值的地方 使用，像 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

---

• ⑸ 单个颜色值的变化
  • 值越大,颜色 越鲜艳/越浅色
    • 值越小 颜色越暗.
  • 这里 只设置了红色,并逐渐增大 颜色值 (绿色和蓝色光 为 0 )
  • 

---

• ⑹ 表示 灰色
  • 灰色 使用 所有光源的等量 的光线 来显示。
    • 三色 等值: 即 红绿蓝,都设置为 相同的值.
  • 值越大,颜色 越浅.
    • 

---

• ⑺ 1600 万种 不同的颜色
  • 从 0 到 255 种 红绿蓝值 能够组合出 总共超过 1600万 种 不同的颜色
  • （根据 256 x 256 x 256 = 1677.7216 万 计算）。
• ⑻ 浏览器显示颜色 数目:
  • 大多数现代的显示器 都能显示出 至少 1.6万 种(16384) 不同的颜色。

---

• 示例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=50%,逐渐增大,每次10%, 颜色 越来越淡,最后变成了 纯白色

---

• 示例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,看下色彩的变化)

p
  {
  background-color:hsl(0,100%,50%);
  }

• 开始时的 颜色
  • 
• 颜色/色度 h的 变化
  • 其他值不变, 持续增大h 色度值 (从红色0 ,开始,每次加 20,看下色彩的变化)
  • 颜色 变化规律: 差不多是 赤橙黄绿青蓝紫 (很巧合啊 ✧◡✧,有趣)

---

• 示例4: 饱和度 s 的变化
  • 色度 红色 h=0,亮度 l=50% 不暗也不亮, 保持不变
    • 把饱和度从 灰色 s=0%,每次加10%,持续增加 全彩 h=100%,看下变化

p
  {
  background-color:hsl(0,0%,50%);
  }

• 开始的 颜色
  • 原本 颜色为 红色,但 饱和度灰色,所以会显示为 灰色
  • 
• 逐渐增加 饱和度 s 值的 色彩变化
  • 很明显吧,饱和度增加,色彩越来 越鲜艳了
    • 因为饱和度 s = 100%,就是全彩了,s=0%就是灰色
  • 

---

• 示例5: 亮度 l 的变化
  • 色度 红色 h=0,饱和度 全彩 s=100% 保持不变
    • 把亮度从 l=50%,不暗也不亮,逐渐减小值 和 逐渐增大值,每次10% , 看下 颜色的变化

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 通道: 规定了对象的 不透明度

• ⑶ HSLA 颜色值的 语法：hsla(hue, saturation, lightness, alpha)

  • alpha 参数: 定义 不透明度。
    • alpha 参数范围: 介于 0.0~ 1.0（完全不透明）的 数字
      • 0.0（完全透明）
      • 1.0（完全不透明）
      • 不透明 值越大,颜色 越深/鲜艳.

---

• 示例1: 不透明度值 a的变化 从alpha,a=0 不透明度 = 0,完全透明,看到颜色开始

p
  {
  background-color:hsl(0,100%,50%,0);
  }

• 开始的颜色
  • 
• 逐渐增大 不透明值
  • 每次增加0.1
  • 不透明 值越大,颜色 越鲜艳/深.
  • 

---

♣ 结束语 和 友情链接

• 捐助: 喜欢这篇文章吗? 持续更新中,捐助此文,向团团 表示鼓励和支持吧~❤
  
• 捐助二维码:
  

---

• 参考文档
  • CSS 合法颜色值
  • CSS 颜色 | MDN

---

• 友情链接
  • 147 种 CSS 颜色: 十六进制值 和 对应颜色表

---

• 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
• 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

---

• 转载 请注明出处 ,Thanks♪(･ω･)ﾉ
  • 作者：Hey_Coder
  • 来源：CSDN
  • 原文：https://blog.csdn.net/VickyTsai/article/details/102927784
  • 版权声明：本文为博主原创文章，转载请附上博文链接！