[Tistory] html 색상코드 원리

안녕하세요, 우리노트의 Benjamin Song입니다.

블로그 스킨을 꾸미다보니 미적 감각이 많이 필요하다는걸 몸소 느끼고 있습니다. 미적 감각이 떨어지다보니 직접 배경색 글자색을 이리 저리 바꿔가며 마음에 드는 화면을 만드는 중입니다. 색을 계속 바꿔야 하니 그때마다 색의 html 코드값을 찾는게 여간 불편한게 아니더군요. 그래서 이번에는 html 색상표에대해 살펴볼까 합니다.

우선 중학교 1학년 과학시간에 배운 내용을 떠올려볼까요

 

빛의 3원색 vs 물감의 3원색

빛 : 빨간색, 녹색, 파란색, 섞을수록 흰색에 가까워진다.

물감 : 빨간색 파란색, 노란색 섞을 수록 검정색에 가까워진다.

빛의 3원색은 리가 흔희 말하는 RGB입니다. 컴퓨터 모니터는 빛을 발사하여 화면을 보여주기 때문에 당연히 빛의 합성 법칙을 따르겠지요?

HTML 색상 코드

HTML 색상코드는 다음형식을 따릅니다.

#RRGGBB

처음 2자리는 빨간색의 양, 가운데 2자리는 녹색의 양, 마지막 2자리는 파란색의 양을 나타냅니다.

그리고 각 한자리는 16진수 (0~F)로 표시됩니다.

즉 빨간색은 #FF0000, 녹색은 #00FF00, 파란색은 #0000FF가 되는거죠

16진수 2자리 표기방법 (10진수=>16진수)

■ 0 => 00     ■ 16 => 0F     ■ 17 => 10     ■ 18 => 11    ■ 255 => FF    

html 에서는 위의 방법으로 16777216 가지의 색을 표현가능합니다.

원리는 알았지만 논리적으로 계산해서는 색을 표현하기 어렵겠지요? 그래서 색의 코드값을 쉽게 추출하는 방법을 다음 포스팅을 통해 알려드도록 하겠습니다.

- 관련 글 -

[Tistory] 색상표와 이미지에서 HTML색상코드 추출하기

누군가에게 유용한 정보가 되었기를 기대하며 HTML 색상 코드 원리에 대한 글을 마칩니다.