어떻게 색 코드 #FAA832, 무슨 뜻일까요?
웹사이트 색을 정할 때 이런 코드를 본 적이 있을 것이다. 알파벳이 섞여 있어 암호처럼 보이지만, 사실은 앞 레슨에서 다룬 0과 1이 옷만 갈아입은 모습이에요. 그 옷을 한 겹씩 벗겨 낸다.
0과 1 네 개를 한 글자로
앞 레슨에서 모든 것이 0과 1로 적힌다는 걸 확인했다.
그런데 0과 1만 길게 늘어놓으면 사람 눈에는 너무 길고 헷갈린다.
그래서 네 개씩 묶어 한 글자로 줄이기로 했어요.
비트 네 개로 만들 수 있는 조합은 0부터 15까지, 딱 열여섯 가지다.
스위치 네 개로 0부터 15까지, 열여섯 가지가 한 글자로 나타난다.
문제가 하나 있다.
10, 11, 12처럼 두 자리가 되면 그게 한 글자인지 두 글자인지 헷갈리기 쉽다.
그래서 꾀를 낸 약속이 하나 더 필요했어요.
9 다음은 A다
우리가 쓰는 숫자는 9까지밖에 없다.
그런데 16진수는 한 글자로 열다섯까지 나타내야 하니, 여섯 글자가 모자란다.
그 자리를 알파벳으로 채웠어요.
9 다음은 A, 그다음은 B, 이런 식으로 F까지 간다.
숫자 열 개에 알파벳 여섯 개를 더해, 한 글자로 열여섯 가지를 쓴다.
그러니까 A는 열, F는 열다섯이라는 뜻이다.
무서운 암호가 아니라 숫자가 모자라서 빌려 온 알파벳이었던 셈이에요.
화면의 색은 빛 세 가지를 섞은 것
이제 화면의 색으로 넘어간다.
화면 속 모든 색은 빨강, 초록, 파랑 세 가지 빛을 섞어서 만든다.
세 빛을 각각 얼마나 세게 켜느냐에 따라 색이 정해져요.
아래 슬라이더 세 개를 움직이면 색이 바로 바뀐다.
셋 다 끄면 검은색, 셋 다 끝까지 켜면 흰색이 된다.
세 빛을 각각 0부터 255까지 조절하면 천육백만 가지가 넘는 색이 나온다.
그런데 색과 함께 나타나는 코드가 어딘가 낯익지 않나요?
#FAA832를 세 토막으로 자르기
색 코드는 빨강, 초록, 파랑 세 값을 16진수로 적어 나란히 붙여 둔 것이다.
여섯 글자를 두 개씩 자르면 세 토막이 나온다.
앞 두 글자가 빨강, 가운데 두 글자가 초록, 끝 두 글자가 파랑이에요.
두 글자씩 잘라서 읽는다.
F는 15, A는 10이라고 했다.
그러니 FA는 16 곱하기 15 더하기 10, 곧 250이다.
같은 방법으로 읽으면 #FAA832는 빨강 250, 초록 168, 파랑 50이라는 뜻이고, 그 결과가 이 따뜻한 노란색이에요.
이제 코드가 읽힌다
한번 익히고 나면 코드만 보고도 대강 어떤 색인지 감이 온다.
아래 색들이 그 예다.
빨강 자리가 크면 붉고, 세 값이 모두 크면 밝아져요.
더 이상 암호가 아니다.
세 값이 모두 크면 밝고, 한 색만 크면 그 색이 진하게 보인다.