rgb 与 #开头16进制 HEX颜色值关系转换，颜色值透明度的百分数对应十六进制表

隔壁de小刘

墨衍会员 · AI 创作全网分发码龄12年

关注

原创 2022-03-25 11:27:08 7.9k 阅读 AI 写同款· GEO 优化 ›

前端学习5：HTML颜色（什么是RGB、HEX、HSL）无论是RGB、HEX、HSL，它们的作用只有一个：用数字表达出一种颜色。阅读详情

1、0x开头与#开头

从计算机的数值表示上讲，0x开头的其实并不是所谓颜色代码的表示方法，而是16进制数的标准写法，譬如0xA就是十进制的10。而**#开头**的六（或三）位十六进制数是在设计领域（如CSS以及一些绘图软件）中颜色代码的表示方法。

2、透明度的计算

透明度分为256个等级，即 0 - 256，0就是透明，255就是不透明

透明度（透明）0 –> 255（不透明）对应着16进制（透明）00 –> FF（不透明）

比如：50%透明度白色

50%也就是256的一半即128，因为是从0开始算的，所以是 127，转换成16进制就是 7F
最终结果：#7F FFFFFF

3、 RGB 与 HEX

RGB: 三通道颜色
他是目前运用最广泛的颜色系统之一
可以通过红绿蓝三色通道, 外加alpha透明度, 来展示几乎所有的颜色
RGB是从颜色的发光原理来设定的, 相当于红绿蓝三个颜色通过不同亮度, 来组合成为需要的颜色
0为最暗, 255为最亮

HEX: 十六进制颜色
十六进制与RGB都可以展示出非常丰富的颜色, 他是通过16进制0~F这16个字符来表达颜色的
同样, 000000为黑色, FFFFFF为白色

RGB转换为HEX

RGB与HEX中每个颜色都是一一对应的关系, 如下面的附表所示
RGB的数值 = 16 * HEX的第一位 + HEX的第二位
示例如下:

   RGB: 92, 184, 232
    92 / 16 = 5余12 -> 5C
    184 / 16 = 11余8 -> B8
    232 / 16 = 14余8 -> E8
    HEX = 5CB8E8

HEX转换RGB

此转换就是将上述的转换逆转即可
示例如下

 HEX: F26BC1
    F2 = 15和2 -> 15 * 16 + 2 = 242
    6B = 6和11 -> 6 * 16 + 11 = 107
    C1 = 12和1 -> 12 * 16 + 1 = 193

4、透明度对应的十六进制值

//java代码生成的对应表
for (int i = 100; i>=0; i--) {
   double j = (i / 100.0d);
   int alpha = (int) Math.round(255-j * 255);
   String hex = Integer.toHexString(alpha).toUpperCase();
   if (hex.length() == 1) hex = "0" + hex;
   int percent = (int) (j*100);
   System.out.println(String.format("%d%% — %s", percent, hex));
}

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