현재 섹션 : 웹/인터넷

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진수 0123 4567 891011 12131415
16진수 0123 4567 89AB CDEF
컬러값을 나타내는 주요 16진수
10진수 0051102153 204255
16진수 00336699 CCFF
백분율(%) 0%20%40%60% 80%100%

10진수 표기방법

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

적색(Red)의 다양한 표기방법
색 이름 16진수 10진수
red#FF0000rgb(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)

* 본 사이트에서 16진수 컬러 표기 아래 괄호 안의 숫자는 순서대로 색상(Hue), 채도(Saturation), 명도(Brightness)를 나타냅니다.

Copyright © 나쥬니 (www.nazuni.pe.kr)