본문 바로가기
티스토리/글쓰기,꾸미기

[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에 대한 기초내용을 잘 모르시겠다면 아래의 포스트를 확인하고 오세요.

[Tistory]html의 기본구조와 티스토리 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)이 만들어지게 됩니다.

◎ 흰색 (White) : rgb(255, 255, 255)
◎ 검정색 (Black) : rgb(000, 000, 000)

▼ 다음으로, 16진수로 구현한 RGB의 색상표현 방법입니다.

#xxxxxx    [xx = 00 ~ FF까지의 16진수]

▲ 첫 번째 빨강색 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진수 변환표입니다.

▼ 위의 표를 엑셀약식으로도 만들어놓았습니다. 아래의 엑셀양식을 다른 곳에 사용하실 경우 랭크로가든 출처를 남겨주시면 감사하겠습니다. ^^

10진수-16진수 변환표_공유.xlsx
다운로드

티스토리에서 빛의 3원색(RGB) 10진수코드와 16진수코드 확인하는 방법

◆ 이번에는 이 빛의 3원색인 RGB코드를 티스토리 글쓰기 페이지에서 확인하는 방법에 대하여 알아보도록 하겠습니다. 빛의 3원색인 RGB코드 중 10진수와 16진수 코드 모두를 확인하기 위해서는 구버전 글쓰기로 들어가셔야 합니다.

구버전 글쓰기의 '쓰기' 버튼을 눌러서 글쓰기로 들어갑니다.

▼ 글쓰기 편집창에서 '글자색'과 '글자배경색', '글상자' 기능을 활용하면 색상선택 및 html 색상코드를 확인할 수 있습니다.

▼ 글자색을 예로 들어 보겠습니다. '글자색' 아이콘을 클릭한 후 색상팔레트가 열리면 하단의 '더보기' 버튼을 눌러주세요.

'색상'을 선택한 후 팔레트 위에서 마우스를 클릭한 채로 움직여서 원하는 색상을 선택해봅시다.

▼ 그렇게 해서 선택된 색상의 바로 우측편에 16진수 RGB 색상코드가 나와 있습니다. 즉, 여기서 원하는 색상에 따른 RGB 16진수 색상코드를 확인할 수 있습니다.

▼ 색상이 정해졌으니 원하는 텍스트를 입력해주세요. 저는 위에서 선택된 '#a36b6b' 색상의 글자색으로 '랭크로가든'을 입력해보았습니다.

▼ 글쓰기 편집창 우측상단의 HTML란을 체크해주세요.

▼ 그럼 타이핑한 글자에 대한 HTML 코딩을 확인할 수 있는데요, 여기서 RGB 10진수 색상코드를 확인할 수 있습니다. 위에서 확인했던 16진수인 '#a36b6b' 코드는 10진수로 rgb(163, 107, 107)로 표현되는 것을 확인할 수 있었습니다.

▼ 위와 마찬가지 방법으로 글자배경색의 색상도 지정해보겠습니다. RGB 16진수 코드가 확인되는군요. 해당 색상으로 '랭크로가든'을 입력해보겠습니다.

▼ 그리고 HTML로 확인해보면, 배경색과 글자색 모두 html 10진수 코드로 변환되어 있는 것을 확인할 수 있습니다.

글상자의 경우도 마찬가지입니다. 노랑색 글상자에 랭크로가든을 쳐보겠습니다.

▼ 그리고 HTML 편집창으로 들어가면 테두리색과 배경색 모두 html 10진수 코드로 변환표시되어 있는 것을 알 수 있습니다.

 

신버전 글쓰기(새로운 글쓰기)에서도 확인이 가능할까?

◆ 결론부터 말씀드리면, 신버전 글쓰기 화면에서는 RGB 16진수 코드만 확인이 가능합니다. (RGB 10진수 코드는 확인할 수 없습니다.)

▼ 신버전 글쓰기(새로운 글쓰기)로 들어가볼까요? '콘텐츠' 탭 하위의 '설정' 버튼을 눌러서 들어갑니다.

새로운 글쓰기를 '사용합니다'로 설정 후 '저장' 버튼을 누르면 신버전 글쓰기가 가능합니다.

▼ 신버전 글쓰기 화면에서 글자색을 정해보겠습니다. 글자색은 '#333333'으로 정했습니다.

▼ 그리고 글자배경색은 '#F89009'으로 선택했습니다.

▼ 그 다음, HTML 편집모드로 들어가보겠습니다.

신버전 글쓰기의 html 편집창에서는 RGB 색상코드가 16진수로만 표현되는 것을 알 수 있습니다.

CSS에서는 RGB 색상코드가 어떻게 표시될까?

◆ CSS에서는 색상코드가 어떻게 표시되어 있는지 확인해보겠습니다.

▼ '꾸미기' 탭 하위의 '스킨편집' 탭을 클릭합니다.

▼ 'html 편집' 버튼을 눌러서 들어가주세요.

CSS 탭을 선택하여 들어갑니다.

CSS에서는 RGB 코드가 모두 16진수로 표시되어 있는 것을 알 수 있습니다. 이것으로 html RGB코드표현 확인완료!


마치며...

이번 포스팅을 준비하면서 오래전 기억의 저 넘어에 있던 3원색의 개념을 다시 떠올릴 수 있었습니다. 이 내용을 배울 당시에는 단순히 시험을 보기 위하여 암기를 했던 것 같은데, 이번에 내용을 정리하면서 빛과 색의 3원색의 차이점에 대하여 좀 더 개념정립이 된 것 같습니다. 빛은 더할 수록 밝아지고 색(염료)는 더할수록 어두워진다는 것은 어찌보면 당연하게 느껴지는 내용인데, 그 때는 왜 그렇게 헷갈렸는지 모르겠네요. 내용을 이해하고 글을 작성하느라 이번 포스팅은 시간이 좀 많이 걸렸습니다. 양해부탁드려요.;; 오늘은 여기서 줄입니다. 다음 시간에 다시 만나요. ^^

이 포스팅과 어울리는 다른 글도 확인해보세요.

     ↓ ↓ ↓ ↓      

   ↓ ↓ ↓ ↓

[Tistory]티스토리 직접유입 및 기타유입의 의미와, 검색로봇 통계반영 여부

[Tistory]티스토리 자동생성 사이트맵으로 네이버 및 구글웹마스터도구 5분등록!

[Tistory]티스토리 포스트 카테고리 변경하는 가장 쉬운방법