记录-颜色方面

记录-颜色方面

一.颜色表示方式

  1. 关键字:（red, blue, transparent…）
  2. 十六进制表示 (Hex)【#RGB, #RRGGBB, #RGBA, #RRGGBBAA】
  3. RGB / RGBA【rgb(r, g, b)，rgba(r, g, b, a)】
  4. HSL / HSLA【hsl(h, s, l)，hsla(h, s, l, a)】

1.关键字

内置颜色名:red, blue, green, black, white, orange, pink, violet …

特殊关键字：

  1. transparent:等价于rgba(0,0,0,0)

2.HEX

十六进制:

#RGB —> #f00 ,

1
2
3
color: #3498db;
color: #fff;        /* 白色缩写 */
color: #ff000080;   /* 半透明红色 */

3.RGB/RGBA

📖 rgb()

  1. 参数可以是0~255 百分比 none
  2. 之间可以使用逗号或者不用逗号分隔开来
  3. 除了逗号分隔的旧版语法中不可以数字与百分比结合使用以及none，其余都ok
  4. RGBA中的A表示透明度（1表示不透明）
1
2
3
color: rgb(255, 0, 0);
color: rgb(100% 0% 0%);
color: rgba(255, 0, 0, 0.5);

4.HSL/HSLA

参数取值：

  1. h: 色相 (0~360)
  2. s: 饱和度 (0%~100%)
  3. l: 亮度 (0%~100%)
  4. a: 透明度 (0~1)
1
2
color: hsl(120, 100%, 50%);     /* 绿色 */
color: hsl(120 100% 50% / 0.5); /* 半透明绿色 */