seegongsik
구조

어떻게 색 코드 #FAA832, 무슨 뜻일까요?

웹사이트 색을 정할 때 이런 코드를 본 적이 있을 것이다. 알파벳이 섞여 있어 암호처럼 보이지만, 사실은 앞 레슨에서 다룬 0과 1이 옷만 갈아입은 모습이에요. 그 옷을 한 겹씩 벗겨 낸다.

01

0과 1 네 개를 한 글자로

앞 레슨에서 모든 것이 0과 1로 적힌다는 걸 확인했다.
그런데 0과 1만 길게 늘어놓으면 사람 눈에는 너무 길고 헷갈린다.
그래서 네 개씩 묶어 한 글자로 줄이기로 했어요.
비트 네 개로 만들 수 있는 조합은 0부터 15까지, 딱 열여섯 가지다.

8
0
4
0
2
0
1
0
DEC
0
→
HEX
0

스위치 네 개로 0부터 15까지, 열여섯 가지가 한 글자로 나타난다.

문제가 하나 있다.
10, 11, 12처럼 두 자리가 되면 그게 한 글자인지 두 글자인지 헷갈리기 쉽다.
그래서 꾀를 낸 약속이 하나 더 필요했어요.

02

9 다음은 A다

우리가 쓰는 숫자는 9까지밖에 없다.
그런데 16진수는 한 글자로 열다섯까지 나타내야 하니, 여섯 글자가 모자란다.
그 자리를 알파벳으로 채웠어요.
9 다음은 A, 그다음은 B, 이런 식으로 F까지 간다.

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

숫자 열 개에 알파벳 여섯 개를 더해, 한 글자로 열여섯 가지를 쓴다.

그러니까 A는 열, F는 열다섯이라는 뜻이다.
무서운 암호가 아니라 숫자가 모자라서 빌려 온 알파벳이었던 셈이에요.

03

화면의 색은 빛 세 가지를 섞은 것

이제 화면의 색으로 넘어간다.
화면 속 모든 색은 빨강, 초록, 파랑 세 가지 빛을 섞어서 만든다.
세 빛을 각각 얼마나 세게 켜느냐에 따라 색이 정해져요.
아래 슬라이더 세 개를 움직이면 색이 바로 바뀐다.

#FAA832
rgb(250, 168, 50)
R250
G168
B50

셋 다 끄면 검은색, 셋 다 끝까지 켜면 흰색이 된다.

세 빛을 각각 0부터 255까지 조절하면 천육백만 가지가 넘는 색이 나온다.
그런데 색과 함께 나타나는 코드가 어딘가 낯익지 않나요?

04

#FAA832를 세 토막으로 자르기

색 코드는 빨강, 초록, 파랑 세 값을 16진수로 적어 나란히 붙여 둔 것이다.
여섯 글자를 두 개씩 자르면 세 토막이 나온다.
앞 두 글자가 빨강, 가운데 두 글자가 초록, 끝 두 글자가 파랑이에요.

#FAA832
FA16 × 15 + 10 =250R
A816 × 10 + 8 =168G
3216 × 3 + 2 =50B
#FAA832 = rgb(250, 168, 50)

두 글자씩 잘라서 읽는다.

F는 15, A는 10이라고 했다.
그러니 FA는 16 곱하기 15 더하기 10, 곧 250이다.
같은 방법으로 읽으면 #FAA832는 빨강 250, 초록 168, 파랑 50이라는 뜻이고, 그 결과가 이 따뜻한 노란색이에요.

05

이제 코드가 읽힌다

한번 익히고 나면 코드만 보고도 대강 어떤 색인지 감이 온다.
아래 색들이 그 예다.
빨강 자리가 크면 붉고, 세 값이 모두 크면 밝아져요.
더 이상 암호가 아니다.

#FF0000
rgb(255, 0, 0)
#00C800
rgb(0, 200, 0)
#3296FF
rgb(50, 150, 255)
#FAA832
rgb(250, 168, 50)
#FF64C8
rgb(255, 100, 200)
#FFFFFF
rgb(255, 255, 255)

세 값이 모두 크면 밝고, 한 색만 크면 그 색이 진하게 보인다.

한 줄 정리알파벳이 섞여 암호 같던 색 코드는 사실 빛 세 가지의 세기를 적어 둔 것이었다. 그리고 그 세기마저 결국 앞 레슨의 0과 1로 적혀 있어요.
← 구조
이 페이지가 도움 됐다면 후원하기