[Tistory]티스토리에서 3원색(RGB)의 10진수 16진수 코딩과 색상코드 확인하는 방법
by 랭크로2020. 5. 6.
학창시절 삼원색(3원색)이라는 용어를 배웠던 기억이 납니다. 하지만, 지금은 가물가물 하군요. 포스팅을 시작하기에 앞서 추억의 3원색을 소환해봅시다. 3원색은 보통 빛의 3원색, 색의 3원색으로 나뉩니다. (색의 3원색은 염료의 3원색이라고 불리기도 합니다.) 빛의 3원색은 빨강색, 초록색, 파랑색(RGB)이고 색의 3원색은 노랑색, 청록색, 자홍색 (YCM) 세 가지 색입니다. 오늘은 두 가지 3원색 중 티스토리 블로그에 적용되는 빛의 3원색(RGB)에 대한 부분을 알아볼 예정입니다.
티스토리에서는 빛의 3원색인 RGB 색상표현을 하기 위하여 10진수와 16진수 두 가지 형태를 사용하고 있습니다. 10진수는 잘 알고 계시는 것처럼 0,1,2,3,4,... 처럼 0과 양의 정수의 집합입니다. 16진수는 0,1,2,3,4,...9까지의 표현은 10진수와 같지만, 이후로는 0A(10),0B(11),0C(12),0D(13),0E(14),0F(15)로 표현이 됩니다. 티스토리에서는 블로그에 적용되는 색을 표현할 때 주로 16진수를 사용하지만, 경우에 따라서 10진수 코딩이 적용될 때도 있습니다.
이번 시간에는 티스토리에 적용되는 빛의 3원색인 RGB 두가지 표현 방식인 10진수와 16진수가 적용되는 사례와 10진수의 색상코드를 16진수로 매칭시키는 원리, 그 매칭표(HTML 색상코드 10진수와 16진수 각각을 매칭)를 공유해보도록 하겠습니다. 아, 그리고 빛의 3원색과 색의 3원색의 차이점도 잠시 짚어보고 갈게요. 준비되셨다면 지금 바로 출발합니다.
빛의 3원색, 색(염료)의 3원색
◆ 3원색은 빛의 3원색, 색(염료)의 3원색 이렇게 두 가지 종류로 나뉩니다. 티스토리에 적용되는 빛의 3원색에 대하여 알아보기 전에 이 두 가지 3원색의 의미와 차이점에 대하여 알아보겠습니다.
1. 빛의 3원색 (RGB)
▲ 빛의 3원색은 빨강색(Red), 초록색(Green), 파랑색(Blue) 세 가지 색으로 되어있고 앞글자만 따서 RGB라고 표현합니다. 세 가지 빛(RGB)이 같은 세기로 중첩이 되면 흰 색(White)으로 표현이 됩니다. (가산혼합)
▲ 빛의 3원색 중 서로 다른 각각의 두 가지 색을 합성하면 다른 색깔이 생성됩니다. (3원색이 1차색이기 때문에 3원색 중 두 가지 색이 합성되어 나타나는 색상을 2차색이라고 표현합니다.) 빨강색과 초록색을 합성하면 노랑색(Yellow)이, 초록색과 파랑색을 합성하면 맑은 청록색(이하 청록색 ; Cyan)이, 파랑색과 빨강색을 합성하면 자홍색(Magenta)이 생성이 됩니다.
2. 색(염료)의 3원색
▲ 색(염료)의 3원색은 빛의 3원색으로 합성된 세 가지 색상 즉, 노랑색(Yellow)과 청록색(Cyan), 자홍색(Magenta)으로 만들어집니다. 세 가지 색(염료)이 같은 농도로 중첩이 되면 검정색(Black)이 됩니다. (감산혼합) 그런데, 이 색상들은 어디서 많이 보신 것 같죠? 네, 맞습니다. 프린터 잉크 색깔이 바로 이 색(염료)의 3원색(칼라잉크)과 검정색(흑백잉크)로 이루어져 있는 것입니다. (CMYK) 이 색상들의 조합으로 인쇄물의 수많은 색상들을 조합해내는 것이죠.
▲ 색(염료)의 3원색은 빛의 3원색과 마찬가지로 두 가지 색을 합성하면 각각 다른 색이 되는데, 재미있는 점은 색(염료)의 3원색 중 두가지 색을 합성한 2차색은 빛의 3원색(1차색)이 된다는 것입니다. 노랑색(Yellow)과 청록색(Cyan)을 섞으면 초록색(Green)이, 청록색(Cyan)과 자홍색(Magenta)을 섞으면 파랑색(Blue)이, 자홍색(Magenta)과 노랑색(Yellow)을 섞으면 빨강색(Red)이 된답니다.
html에서 RGB 색상코드의 10진수와 16진수 구현
◆ 이번에 살펴볼 내용은 티스토리에서는 html 상에서 색상이 어떻게 코딩되는지에 대한 부분입니다.
◆ 그럼 본격적으로 html에서 RGB 색상코드의 구현은 어떻게 되는지에 대하여 살펴보겠습니다.
▼ 먼저, 10진수로 구현한 RGB의 색상코드의 표현방법입니다.
rgb(xxx, xxx, xxx) [xxx = 000 ~ 255까지의 숫자]
▲ rbg는 red, blue, green의 약자를 의미하고, 첫 번째 xxx는 red(빨강)의 농도, 두 번째 xxx는 green(초록색)의 농도, 세 번째 xxx는 blue(파랑색)의 농도를 의미합니다. xxx에는 각각 000 ~ 255까지의 숫자가 들어가는데, 000에 가까울수록 색의 농도가 옅어지는 것, 즉 검정색에 가까워짐을 의미하고, 255에 가까워질수록 각각의 원색에 가까워짐을 의미합니다. 예를 들어 red의 xxx가 000일 경우, red의 색상은 검정색이 되고, 255일 경우 red의 색상은 순수한 빨강색이 됩니다. 마찬가지로 green의 xxx가 000일 경우, green의 색상은 검정색이 되고, 255일 경우 green의 색상은 순수한 초록색이, blue의 xxx가 000일 경우, blue의 색상은 검정색이 되고, 255일 경우 blue의 색상은 순수한 파랑색이 됩니다.
▼ 주의할 점은 지금 우리가 보고 있는 이 내용은 빛의 3원색이라는 점입니다. 따라서 여기서의 검은색의 개념은 '빛이 없다'라는 것으로 생각하셔야 합니다. 쉽게 말해서 해당 검은색은 빛이 사라진 상태가 되는 거죠. 그래서 위에서 000에 가까울 수록 색의 농도가 옅어진다는 표현을 한 것입니다. 그럼, rgb코드에서 순수하게 빨강색을 표현하고 싶다면 어떻게 해야할까요? red에 해당하는 xxx에 농도가 가장 진한 빨강색인 255를 표현하고, green의 xxx와 blue의 xxx에는 농도가 전혀 없는 000을 넣어주어야 할 것입니다. 이와 같은 방법으로 10진수로 구현한 빛의 순수한 3원색 1차색상 표현은 다음과 같이 할 수 있겠죠.
◎ 순수한 빨강색 (Red) : rgb(255, 000, 000) ◎ 순수한 초록색 (Green) : rgb(000, 255, 000) ◎ 순수한 파랑색 (Blue) : rbg(000, 000, 255)
▼ 그럼 1차색 간 합성을 한 2차색의 경우에는 어떻게 표현될까요? 순수한 빨강색과 순수한 초록색을 합성하면 노랑색(Yellow)이 생성됩니다. 마찬가지 방법으로 순수한 3원색의 2차색상 표현은 다음과 같아집니다.
◎ 순수한 노랑색 (Yellow) : rgb(255, 255, 000) ◎ 순수한 청록색 (Cyan) : rgb(000, 255, 255) ◎ 순수한 자홍색 (magenta) : rgb(255, 000, 255)
▼ 마지막으로 순수한 빨강색, 순수한 초록색, 순수한 파랑색을 합성하면 빛의 가산혼합의 결과로 흰색(White)이 만들어지게 되고, 각각의 색농도를 완전히 빼버리면 검정색(Black)이 만들어지게 됩니다.
▲ 첫 번째 빨강색 xx는 red의 농도, 두 번째 초록색 xx는 green의 농도, 세 번째 파랑색 xx는 blue의 농도를 의미합니다. xxx에는 각각 00 ~ FF까지의 16진수가 들어가며 00에 가까울수록 색의 농도가 옅어지는 것, 즉 검정색에 가까워짐을 의미하고, FF에 가까워질수록 각각의 원색에 가까워짐을 의미합니다. red의 xx가 00일 경우, red의 색상은 검정색이 되고, FF일 경우, red의 색상은 순수한 빨강색이 됩니다. green의 xx가 00일 경우, green의 색상은 검정색이 되고, FF일 경우, green의 색상은 순수한 초록색이, blue의 xx가 00일 경우, blue의 색상은 검정색이 되고, FF일 경우, blue의 색상은 순수한 파랑색이 됩니다.
▼ 위에서 살펴보았던 10진수의 경우와 같은 경우로 계산하면 됩니다. 단, 10진수의 각각의 숫자를 16진수의 경우에 정확하게 매칭만 시켜주면 됩니다. 즉, 10진수로 표현한 RGB 코드나 16진수로 표현한 RBG 코드는 매칭만 정확하게 시켜주면 동일한 색상을 나타낸다는 것을 알 수 있습니다. 아래에서 매칭표를 별도로 보여드리겠지만, 10진수를 1~20까지 세어보면, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 이렇게 되고, 16진수로 동일하게 나열해보면 1, 2, 3, 4, 5, 6, 7, 8, 9, 0A, 0B, 0C, 0D, 0E, 0F, 10, 11, 12, 13, 14 이렇게 쓰여지게 됩니다. 그럼 위에서 확인했던 몇 가지 경우의 수를 16진수로 모두 표현해볼까요?
◎ 순수한 빨강색 (Red) : #FF0000 ◎ 순수한 초록색 (Green) : #00FF00 ◎ 순수한 파랑색 (Blue) : #0000FF
◎ 순수한 노랑색 (Yellow) : #FFFF00 ◎ 순수한 청록색 (Cyan) : #00FFFF ◎ 순수한 자홍색 (magenta) : #FF00FF
◎ 흰색 (White) : #FFFFFF ◎ 검정색 (Black) : #000000
▼ 자, 이것으로 이론은 모두 살펴보았습니다. 위에서는 몇 가지의 사례를 들어 색상을 표현해보았지만, RGB로 구현할 수 있는 색상의 수는 무려 16,777,216개(=256 x 256 x 256)나 되기 때문에 모든 경우의 수를 포스트에 담아낼 수는 없습니다. 대신 10진수에 해당하는 000~255까지의 숫자를 00~FF까지의 16진수로 매칭시킬 수는 있죠. 그래서 그 표를 만들어보았습니다. HTML 색상코드의 10진수 - 16진수 변환표입니다.
▼ 위의 표를 엑셀약식으로도 만들어놓았습니다. 아래의 엑셀양식을 다른 곳에 사용하실 경우 랭크로가든 출처를 남겨주시면 감사하겠습니다. ^^
▼ 신버전 글쓰기의 html 편집창에서는 RGB 색상코드가 16진수로만 표현되는 것을 알 수 있습니다.
CSS에서는 RGB 색상코드가 어떻게 표시될까?
◆ CSS에서는 색상코드가 어떻게 표시되어 있는지 확인해보겠습니다.
▼ '꾸미기' 탭 하위의 '스킨편집' 탭을 클릭합니다.
▼ 'html 편집' 버튼을 눌러서 들어가주세요.
▼ CSS 탭을 선택하여 들어갑니다.
▼ CSS에서는 RGB 코드가 모두 16진수로 표시되어 있는 것을 알 수 있습니다. 이것으로 html RGB코드표현 확인완료!
마치며...
이번 포스팅을 준비하면서 오래전 기억의 저 넘어에 있던 3원색의 개념을 다시 떠올릴 수 있었습니다. 이 내용을 배울 당시에는 단순히 시험을 보기 위하여 암기를 했던 것 같은데, 이번에 내용을 정리하면서 빛과 색의 3원색의 차이점에 대하여 좀 더 개념정립이 된 것 같습니다. 빛은 더할 수록 밝아지고 색(염료)는 더할수록 어두워진다는 것은 어찌보면 당연하게 느껴지는 내용인데, 그 때는 왜 그렇게 헷갈렸는지 모르겠네요. 내용을 이해하고 글을 작성하느라 이번 포스팅은 시간이 좀 많이 걸렸습니다. 양해부탁드려요.;; 오늘은 여기서 줄입니다. 다음 시간에 다시 만나요. ^^
