16진수 표기방법

HTML에서의 색 지정

웹페이지를 구성하는 HTML(HyperText Markup Language)에는 배경색, 글자색 등에 색을 지정하는 부분이 있다. 각 속성값으로서 16진수의 컬러값(16진수 앞에 '#'를 붙입니다.)을 사용하거나 컬러 이름을 직접 사용하는 방법 두 가지가 있다.

그런데 W3C(www.w3.org)에서는 HTML에서 색(color)을 요소(Element)와 속성(Attribute)에 직접 지정하는 대신 스타일시트를 사용할 것을 권장하고 있다.

---

16진수 표기방법

HTML에서 사용되는 컬러값은 주로 "#FFFFFF"처럼 '#'와 함께 6자리의 16진수를 사용한다. (요즘 브라우저들은 '#'가 없어도 제대로 색을 표시해 주기도 하지만, 원칙적으로 '#'를 넣어주는 것이 정확한 표기다.)

6자리의 16진수는 각각 두 자리씩 세 가지 색상을 의미하는데, 첫번째 두 자리는 적색(Red), 가운데 두 자리는 녹색(Green), 마지막 두 자리는청색(Blue)을 의미한다. (편의상 'Green'이라고 했지만, 컬러값으로는 'Green(#008000)'이 아니라 'Lime(#00FF00)'이다.)

세 가지 주요 색상을 16진수 두 자리까지 표시할 수 있으므로 각각 256(16의 제곱) 단계로 나누어 표현할 수 있다. 따라서 6자리의 16진수로 표현할 수 있는 색의 수는 16,777,216(16의 6제곱)가지나 된다.

참고로, #66CC99처럼 16진수값이 중복될 경우에는 #6C9로 생략하여 표시할 수 있다.

10진수와 16진수

10진수	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
16진수	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F

컬러값을 나타내는 주요 16진수

10진수	00	51	102	153	204	255
16진수	00	33	66	99	CC	FF
백분율(%)	0%	20%	40%	60%	80%	100%

---

10진수 표기방법

스타일시트(StyleSheet)에서는 10진수를 사용하여 색을 지정하기도 한다. 우선 아래 표로 색 표기방법을 비교해 보면,

적색(Red)의 다양한 표기방법

색 이름	16진수	10진수
red	#FF0000	rgb(255, 0, 0)

10진수 표기방법은 "rgb(255,0,0)"와 같이 나타내며, 괄호 안에는 적색(R), 녹색(G), 청색(B)의 값이 순서대로 들어간다. 각 색상의 최대값은 255이며, 각 RGB값은 쉼표(,)로 구분한다.

---

16진수 컬러값과 색상(Hue)

16진수로 표기된 컬러값의 색상(Hue;색의 종류)은 다음 단계에 따라 구분할 수 있다. (색과 색상은 혼동하기 쉽지만, 서로 다른 말이다.)

1. RGB 중 가장 값이 큰 색상
2. 나머지 두 색상의 비율

예를 들어, #FF3333과 #CC5151은 동일한 색상이다. 두 색 모두 R값이 가장 크고, 나머지 G값과 B값의 비율이 1로 같기 때문이다. 서로 다른 색이지만, 같은 색상인 것이다. 참고로, 아래 색상은 모두 적색(Red, 색상환에서 0도)이다.

#FF0000 (0, 100, 100)	#FF3333 (0, 80, 100)	#FF6666 (0, 60, 100)	#FF9999 (0, 40, 100)	#FFCCCC (0, 20, 100)
#CC0000 (0, 100, 80)	#CC2828 (0, 80, 80)	#CC5151 (0, 60, 80)	#CC7A7A (0, 40, 80)	#CCA3A3 (0, 20, 80)
#990000 (0, 100, 60)	#991E1E (0, 80, 60)	#993D3D (0, 60, 60)	#995B5B (0, 40, 60)	#997A7A (0, 20, 60)
#660000 (0, 100, 40)	#661414 (0, 80, 40)	#662828 (0, 60, 40)	#663D3D (0, 40, 40)	#665151 (0, 20, 40)
#330000 (0, 100, 20)	#330A0A (0, 80, 20)	#331414 (0, 60, 20)	#331E1E (0, 40, 20)	#332828 (0, 20, 20)

---

16진수 컬러값과 명도(Brightness)

16진수 표기방식에서 명도(Brightness;색의 밝기)는 다음 단계에 따라 구할 수 있다.

1. RGB 중 가장 값이 큰 색상의 색상값
2. 그 값과 표현 가능한 최대값(16진수 FF, 10진수 255)의 비율(%)

예를 들어, #33CC66이 가리키는 색의 명도는 80%이다. 가장 큰 G값이 CC(80%)이기 때문이다.

RGB 중 그 값이 FF이 하나라도 있다면 그 색의 명도는 100%가 된다. 참고로, 아래 색의 명도는 모두 80%이다.

#6600CC (270, 100, 80)	#7A28CC (270, 80, 80)	#8E51CC (270, 60, 80)	#A37ACC (270, 40, 80)	#B7A3CC (270, 20, 80)
#CC00CC (300, 100, 80)	#CC28CC (300, 80, 80)	#CC51CC (300, 60, 80)	#CC7ACC (300, 40, 80)	#CCA3CC (300, 20, 80)
#CC0066 (330, 100, 80)	#CC287A (330, 80, 80)	#CC518E (330, 60, 80)	#CC7AA3 (330, 40, 80)	#CCA3B7 (330, 20, 80)

---

16진수 컬러값과 채도(Saturation)

채도(Saturation;색의 선명도)는 말로 설명하는 것보다 계산식으로 표현하는 것이 쉬울 것 같다. RGB 중 가장 큰 색상값을 MAX, 가장 작은 색상값을 MIN이라고 하면, 채도는 다음과 같이 구할 수 있다.

(채도) = (MAX - MIN) / MAX * 100 (%)

예를 들어, #3399FF의 채도는 80%이다. RGB 중 가장 큰 B값은 FF(100%)이고, 가장 작은 R값이 33(20%)이기 때문에 채도를 계산해 보면 (100-20)/100*100 = 80%가 된다.

채도라는 것은 '색의 선명도'라고 했다. 여러가지 색이 비슷한 비율로 섞여있다면 그 색이 탁해지는 것은 당연한 것이다. RGB 중 00값이 하나라도 있다면 그 색의 채도는 100%가 된다. 그리고 RGB의 비율이 모두 같으면 아무런 특징없는 색이 되어 무채색(채도 0%)이 된다. 참고로, 아래 색의 채도는 모두 80%이다.

#FF9933 (30, 80, 100)	#CC7A28 (30, 80, 80)	#995B1E (30, 80, 60)	#663D14 (30, 80, 40)	#331E0A (30, 80, 20)
#FFFF33 (60, 80, 100)	#CCCC28 (60, 80, 80)	#99991E (60, 80, 60)	#666614 (60, 80, 40)	#33330A (60, 80, 20)
#99FF33 (90, 80, 100)	#7ACC28 (90, 80, 80)	#5B991E (90, 80, 60)	#3D6614 (90, 80, 40)	#1E330A (90, 80, 20)