헥사(HEX) 투명도(%) 적용하기

 

컬러에 투명도를 적용할 때 아래와 같이 두 가지로 작성할 수 있다.

물론 Opacity도 있지만 이는 자식 요소의 투명도에도 영향을 미치기 때문에, 컬러의 투명도만 조정하려는 의도면 아래 두 가지만 사용한다.

.p1{color : rgba(255, 255, 255, 0.5);}
.p2{color : #ffffff80;}

 

p1과 p2는 모두 흰색, 투명도 50%를 뜻한다.

 

p1의 경우, RGB 값을 알아야 하므로, 투명도는 쉽게 쓸 수 있지만 컬러값을 적기가 번거롭다.

p2의 경우는 헥사코드에 투명도 값을 넣는 것이기 때문에, 자주 투명도를 표기하는 것이 아니라면 이가 더 편리하다. #ffffff80에서 80은 50%를 뜻하며, 각 투명도를 아래에 표기했다. 이제 원하는 헥사코드 뒤에 아래 번호 2자리를 추가로 적어서 투명도를 적용할 수 있다.

 

 

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