CSS 颜色的合法颜色值

1. 颜色关键字
- ⑴ 颜色名
- ⑵ transparent 关键字
- ⑶ currentColor 关键字
2. 十六进制颜色 (#红绿蓝,0~f)
3. RGB 颜色 (整数,百分比值)
4. RGBA 颜色 (带不透明度值 / 颜色深浅)
5. HSL 颜色 (色度,饱和度,亮度 / 颜色,灰彩程度,深浅程度)
6. HSLA 颜色 (带不透明值 / 颜色深浅)
♣ 结束语和友情链接

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 颜色 <color> | MDN

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

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

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

【CSS 颜色的合法颜色值 (详细介绍)】相关推荐

css中position：absolute详细介绍
定义: 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", "right&quo ...
css 滤境的详细介绍
导读: [alpha滤镜属性]这个名字,在flash和photoshop经常见到.它们的作用基本类似,就是把一个目标元素与背景混合.你可以指定数值来控制混合的程取u庵帧坝氡尘盎旌稀蓖ㄋ椎厮稻褪且桓鲈 ...
HTML中Css详细介绍
HTML中Css详细介绍一.样式表的作用 1.Css样式表,层叠样式表 2.类似于人类的衣服,网页的衣服 3.作用:美化网页 4.优势: 1.内容与表现分离,便于维护 2.样式丰富,页面布局灵活 3 ...
labelimg如何调整框的颜色_PS学习之旅：如何更好调整画面明暗？明度、色阶详细介绍，收藏...
ps中调色工作其实就是调整人对三要素的感受,调色是一门比较大的学问,那么调整好明暗程度对作品来说是相关重要的,本文详细介绍如何控制画面的明暗. 1工具/原料 Adobe Photoshop CS6软件 ...
怎么设置php的css颜色代码,CSS的文本字体颜色如何设置
这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网页背景颜色.边框颜色 2.颜色规范与颜色规定:网页使用RGB模式颜色网页中颜色的运用是网页必不 ...
Vue详细介绍及使用
Vue详细介绍及使用一.Vue定义及简介 1.Vue定义关于Vue简介,百度百科给出的解释是:Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设 ...
CSS3新特性详细介绍
文章内容持续更新中~ 文章目录一.CSS3实现圆角 - border-radius 二.盒子阴影 - box-shadow 三.文本阴影 - text-shadow 四.渐变 - gradient ...
Vue详细介绍及使用（组件）
Vue详细介绍及使用一.Vue组件概念 1.基本的概念为什么需要组件化?在实际开发中,我们经常也会封装很多公共方法,达到复用的目的,也便于维护.对于前端也是一样,那么什么是组件? 官方定义 ...
CSS颜色的四种写法
文章目录 1. 关键字 2. 十六进制 3. RGB 4. rgba 1. 关键字可直接输入颜色的英文拼写单词 border-color: red; 2. 十六进制所有浏览器都支持十六进制颜色值 ...

【CSS 颜色的合法颜色值 (详细介绍)】

CSS 颜色的合法颜色值

1. 颜色关键字

⑴ 颜色名

⑵ transparent 关键字

⑶ currentColor 关键字

2. 十六进制颜色 (#红绿蓝,0~f)

3. RGB 颜色 (整数,百分比值)

4. RGBA 颜色 (带不透明度值 / 颜色深浅)

5. HSL 颜色 (色度,饱和度,亮度 / 颜色,灰彩程度,深浅程度)

6. HSLA 颜色 (带不透明值 / 颜色深浅)

♣ 结束语和友情链接

【CSS 颜色的合法颜色值 (详细介绍)】相关推荐

最新文章

热门文章

【CSS 颜色的 合法颜色值 (详细介绍)】

CSS 颜色的 合法颜色值

1. 颜色关键字

⑴ 颜色名

⑵ transparent 关键字

⑶ currentColor 关键字

2. 十六进制颜色 (#红绿蓝,0~f)

3. RGB 颜色 (整数,百分比值)

4. RGBA 颜色 (带 不透明度值 / 颜色深浅)

5. HSL 颜色 (色度,饱和度,亮度 / 颜色,灰彩程度,深浅程度)

6. HSLA 颜色 (带 不透明值 / 颜色深浅)

♣ 结束语 和 友情链接

【CSS 颜色的 合法颜色值 (详细介绍)】相关推荐

最新文章

热门文章

【CSS 颜色的合法颜色值 (详细介绍)】

CSS 颜色的合法颜色值

4. RGBA 颜色 (带不透明度值 / 颜色深浅)

6. HSLA 颜色 (带不透明值 / 颜色深浅)

♣ 结束语和友情链接

【CSS 颜色的合法颜色值 (详细介绍)】相关推荐