[해피CGI][cgimall] hex 컬러에 투명도를 주는 방법

글자색, 배경색에 투명도를 주고 싶을때 보통 rgba컬러를 사용하거나 opactiy를 사용한다.

검정색을  50%컬러를 주고싶을때 보통

[방법1]
color: rgba(0,0,0,0.5);

[방법2]

color:#000000;
opacity:0.5;

이 2가지 방법외 hex 컬러에 투명도를 적용하는 다른방법이 있습니다.

hex컬러는 hex6, hex8이 존재하는데 hex6은 6자리를 두자리씩 끊어서 빨강, 초록, 파랑을 표현한다.


< hex6컬러코드>
#FFFFFF

< hex8컬러코드>
#FFFFFFFF

만약 우리가 투명도를 적용할 컬러가 hex8인 경우, hex8의 마지막 2자리만 투명도에 해당하는 hex코드로 변경하면 된다.

#FFFFFFFF -> (투명도 15% 적용) ->  #FFFFFF26

투명도를 적용한 컬러가 hex6라면 어떻게 해야할까?

이 경우, 투명도에 해당하는 hex코드(2가지)를 hex6에 붙어 hex8로 만들어야 한다.

아래 코드 playground의 표는 투명도별 hex 코드를 볼 수 있다.

https://codepen.io/chriscoyier/pen/XjbzrW

 

Alpha %	Hex	Num
100%	FF	255
99%	FC	252
98%	FA	250
97%	F7	247
96%	F5	245
95%	F2	242
94%	F0	240
93%	ED	237
92%	EB	235
91%	E8	232
90%	E6	230
89%	E3	227
88%	E0	224
87%	DE	222
86%	DB	219
85%	D9	217
84%	D6	214
83%	D4	212
82%	D1	209
81%	CF	207
80%	CC	204
79%	C9	201
78%	C7	199
77%	C4	196
76%	C2	194
75%	BF	191
74%	BD	189
73%	BA	186
72%	B8	184
71%	B5	181
70%	B3	179
69%	B0	176
68%	AD	173
67%	AB	171
66%	A8	168
65%	A6	166
64%	A3	163
63%	A1	161
62%	9E	158
61%	9C	156
60%	99	153
59%	96	150
58%	94	148
57%	91	145
56%	8F	143
55%	8C	140
54%	8A	138
53%	87	135
52%	85	133
51%	82	130
50%	80	128
49%	7D	125
48%	7A	122
47%	78	120
46%	75	117
45%	73	115
44%	70	112
43%	6E	110
42%	6B	107
41%	69	105
40%	66	102
39%	63	99
38%	61	97
37%	5E	94
36%	5C	92
35%	59	89
34%	57	87
33%	54	84
32%	52	82
31%	4F	79
30%	4D	77
29%	4A	74
28%	47	71
27%	45	69
26%	42	66
25%	40	64
24%	3D	61
23%	3B	59
22%	38	56
21%	36	54
20%	33	51
19%	30	48
18%	2E	46
17%	2B	43
16%	29	41
15%	26	38
14%	24	36
13%	21	33
12%	1F	31
11%	1C	28
10%	1A	26
9%	17	23
8%	14	20
7%	12	18
6%	0F	15
5%	0D	13
4%	0A	10
3%	08	8
2%	05	5
1%	03	3
0%	00	0