[CSS]헥스(hex)코드 투명도 조절하기

 

색상을 사용할 때 보통 rgb나 hex코드 중에 하나를 사용하는데, CSS에서 투명도를 줄 때는 rgb코드를 사용해왔다.

아래와 같이 원하는 투명도를 뒤에 붙여주기만 하면 쉽게 사용할 수 있기 때문이다.

background-color : rgb(277, 277, 277, 0.5);

 

 

 

🔍 hex 코드 투명도 조절하기

하지만 사용자가 입력한 값에 투명도를 설정해서 화면에 보여줘야하는 일이 생겼다. 입력값은 무조건 hex코드!!!!!

사용자가 #F66161을 입력했을 때 카드의 텍스트는 입력한 색상코드를 그대로 사용해주고 아래 박스는 투명도를 줘서 사용해야 했다.

카드 특성에 따라서 사용자가 원하는 색상을 입력하면 받아와서 사용한다.

 

우선 js로 색상을 가져온 후 hex코드 투명도를 조절하는 방법을 검색해봤당

 

아래표에서 원하는 투명도를 찾아, Hex열의 문자 혹은 숫자를 코드 뒤에 적어주면 된다고 한다.

예를들어 hex코드가 #F66161일때 7%에 해당하는 투명도를 주고 싶다면 #F6616112가 최종 hex코드가 된다.

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%	8	8
2%	5	5
1%	3	3
0%	0	0

 

 

💡 해결

가져온 hex코드에 12를 붙여주었더니 예쁘게 잘 나온다 ㅎㅎ

:style="`background: ${(cnt > 0 ? card.textColor2 + '12' : card.textColor1 + '12' )};`"

 

콘솔창에서는 rgb코드로 확인 가능했다!

텍스트 -> #F66161

박스 배경 -> #F6616112

 

 

✨ 색상코드 투명도 조절하는 방법

//rgb
div {
  background-color: rgb(0, 0, 0, 0.5);
}

//rgb
div {
  background-color: rgb(0, 0, 0);
  opacity: 0.5;
}

//hex
div {
    background-color: #00000080;
}