十六进制下的(6+2) 8位数颜色代码

最新推荐文章于 2024-03-21 11:35:55 发布

偶尔躲躲乌云_0

最新推荐文章于 2024-03-21 11:35:55 发布

阅读量1.3w

点赞数 8

分类专栏： CSS 文章标签： css react html5

本文链接：https://blog.csdn.net/Aurora_1970s/article/details/120082341

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了十六进制颜色代码在前端开发中的使用，包括六位和八位数代码的区别，透明度的表示方法，以及rgb/rgba和hsla模式。重点讨论了如何通过十六进制颜色代码设置颜色透明度，并提供了颜色不透明度对照表。此外，还提及了前端颜色的不同写法，如简写的三位数代码和英文单词表示法。

摘要由CSDN通过智能技术生成

十六进制下的(6+2) 8位数颜色代码

8位数十六进制颜色代码

平常我们在写代码用到颜色的时候，经常写的是，六位十六进制代码
例如：
白色：#FFFFFF
黑色：#000000
网易云红色：#E20000

如果要加上颜色透明度，可能会用到opacity

常见写法

同时设置背景色和透明度

<div className={'color'} style={{backgroundColor: '#E20000',opacity: '0.2'}}>
  <span>文字</span>
</div>

改进写法

<div className={'color'} style={{backgroundColor: '#E2000033'}}>
  <span>文字</span>
</div>

#E2000033最后两位33就表示设置该颜色的透明度为20%。

十六进制颜色不透明度对照表
不透明度 - 代码
100% - FF
99% - FC
98% - FA
97% - F7
96% - F5
95% - F2
94% - F0
93% - ED
92% - EB
91% - E8
90% - E6
89% - E3
88% - E0
87% - DE
86% - DB
85% - D9
84% - D6
83% - D4
82% - D1
81% - CF
80% - CC
79% - C9
78% - C7
77% - C4
76% - C2
75% - BF
74% - BD
73% - BA
72% - B8
71% - B5
70% - B3
69% - B0
68% - AD
67% - AB
66% - A8
65% - A6
64% - A3
63% - A1
62% - 9E
61% - 9C
60% - 99
59% - 96
58% - 94
57% - 91
56% - 8F
55% - 8C
54% - 8A
53% - 87
52% - 85
51% - 82
50% - 80
49% - 7D
48% - 7A
47% - 78
46% - 75
45% - 73
44% - 70
43% - 6E
42% - 6B
41% - 69
40% - 66
39% - 63
38% - 61
37% - 5E
36% - 5C
35% - 59
34% - 57
33% - 54
32% - 52
31% - 4F
30% - 4D
29% - 4A
28% - 47
27% - 45
26% - 42
25% - 40
24% - 3D
23% - 3B
22% - 38
21% - 36
20% - 33
19% - 30
18% - 2E
17% - 2B
16% - 29
15% - 26
14% - 24
13% - 21
12% - 1F
11% - 1C
10% - 1A
9% - 17
8% - 14
7% - 12
6% - 0F
5% - 0D
4% - 0A
3% - 08
2% - 05
1% - 03
0% - 00

前端颜色的几种写法

六位十六进制代码(最常用)

例如：#FFFFFF(白色)，#000000(黑色)

八位十六进制代码(加透明度)

例如：#FFFFFF99(白色)，#00000099(黑色)

三位十六进制代码

用三位数是有条件限制的，也就是说当三位数等价于六位数时才可以用。

1.当6位数全部相同时，可以简写为3位数

例如：#FFFFFF(白色) = #FFF，#000000(黑色) = #000

1.当6位数共三组相同的两个数字时，可以简写为3位数

例如：#112233 = #123，#FF2255 = #F25

rgb/rgba写法

RGB颜色值与十六进制颜色码转换工具

rgb的三位数字和rgba的前三位数字需要根据转换工具(见上)来转换。
黑色：rgb(0,0,0)
不透明度为50%的黑色：rgba(0,0,0,0.5)

或者，仍采用十六进制：

不透明度为20%的白色：rgba($color: #ffffff, $alpha: 0.2);

英文单词法(没必要，不建议写)

例如红色：color: red;
例如白色：color: white;

hsla模式(陌生)

例如：background: hsla(0, 0%, 100%, .5);

H是色度，取值在0度~360度之间，0度是红色，120度是绿色，240度是蓝色。360度也是红色。
S是饱和度，是色彩的纯度，是一个百分比的值，取值在0%~100%，0%饱和度最低，100%饱和度最高
L是亮度，也是一个百分比值，取值在0%~100%，0%最暗，100%最亮。
A是不透明度，取值在0.0~1.0，0.0完全透明，1.0完全不透明。

总结

#FFFFFF /*白色*/
#FFFFFF99 /*不透明度为60%的白色*/
#112233  =  #123
rgb(0,0,0) /*黑色*/
rgba(0,0,0,0.5) /*不透明度为50%的黑色*/
rgba($color: #ffffff, $alpha: 0.2)
red /*红色*/