常见的CSS颜色表达方式

颜色单词

1. 是什么：CSS支持 140 种被预定义过色值的标准颜色，例如：red、blue、green。
2. 注意点：它们不区分大小写。

颜色表达式

RGB

1. 是什么：RGB(r,g,b) 由红色（R）、绿色（G）和蓝色（B）三种颜色的不同比例组合而成。
2. 注意点：r,g,b的取值范围均为0-255。

HEX

1. 是什么：#RRGGBB 可以理解为是RGB格式的16进制表示方式，将RGB(r,g,b)中的r，g，b分别转换为16进制的形式即可得到。
2. 注意点：当出现 #AABBCC的情况时，可以简写为 #ABC。
3. 如何封装函数生成：见下文。

HSL

1. 是什么：HSL(h,s,l) 由色相(H)、饱和度(S)、亮度(L)三个参数来调节颜色。
2. 注意点：色相的取值范围是 0-360，饱和度和亮度的取值范围是0%-100%。
3. 名词解释：

色相： 在HSL中，色相决定了彩虹的颜色。它以 360 度表示，就像传统的色轮一样。

饱和度：是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%的数值。

亮度：颜色的明暗程度，越高越接近白色，越低越接近黑色。

加了透明

RGBA

1. 是什么：在RGB的基础上加了第四个参数，RGBA(r,g,b,a)，其中a是alpha表示透明度
2. 注意点：a的取值范围是0-1，0表示完全透明，1表示完全不透明。

HSLA

1. 是什么：在HSL的基础上加了第四个参数，HSLA(h,s,l,a),其中a是alpha表示透明度
2. 注意点：a的取值范围是0-1，0表示完全透明，1表示完全不透明。

关键字

transparent

1. 是什么：

MDN上的定义是 transparent 关键字表示一个完全透明的颜色，即该颜色看上去将是背景色, rgba(0,0,0,0) 的简写

2. 怎么用：在支持CSS3的浏览器中，可以在任何一个需要color的属性中用到，如color: transparent

currentColor

1. 是什么：

MDN上的定义是 currentColor 关键字代表原始的 [color] 属性的计算值。它允许让继承自属性或子元素的属性颜色属性以默认值不再继承。

简单理解为currentColor 可用于当前元素使用本元素或者当前元素继承其父/再往上的color属性值

1. 怎么用：

<div style="color:blue; border: 1px dashed currentcolor;">
  The color of this text is blue.
  <div style="background:currentcolor; height:9px;"></div>
  This block is surrounded by a blue border.
</div>

封装一个函数生成HEX值

1. 暴力解法 (不推荐) 不知道HEX是什么意义的情况下，可通过生成随机数在[0-9&a-f]中获取6个字符。

const getHEX = () => {
    const str = '0123456789ABCDEF'
    let res = '#'

    for (let i = 0; i < 6; i++) {
        res += str[Math.floor(Math.random() * 16)]
    }

    return res
}

2. 先生成RGB再转HEX

   HEX可以理解为根据RGB(0-255,0-255,0-255)生成对应的16进制数

   当某个16进制不是两位的话，用0补全

const getHEX = () => {
    //获取RGB
    const getRgb = () => {
        const res = []
        for (let i = 0; i < 3; i++) {
            res.push(Math.floor(Math.random() * 256))
        }
        return res
    }
    const rgb= getRgb()
    let res = '#'
    for (let i = 0; i < 3; i++) {
        //将十进制转为16进制，当单个字符时在前面补0
        res += rgb[i].toString(16).padStart(2,'0')
    }
    return res
}

总结

css常见的颜色表达式为：颜色单词、RGB、HEX、HSL、RGBA、HSLA、关键字(transparent、currentColor),以及需要掌握如何生成HEX形式(先生成RGB再生成HEX)。