Chapter 16

색 실험실

열다섯 장 동안 색을 보는 눈을 하나씩 익혔다. 흑백으로 보기, 채도 덜어 내기, 색상환 위에 놓기, 대비 재기, 다른 색각으로 보기. 이 장은 그 눈들을 한 화면에 모은 도구다. 사진이나 그림 한 장을 넣으면 명도·채도·색상의 분포를 펼치고, 주요 색을 뽑고, 그 색들이 글자와 바탕으로 쓸 만한지, 누구에게나 구분되는지, 두 색상환 위에서 어디에 놓이는지를 보여 준다. 실험실은 답을 주지 않는다. 대신 "이 그림은 무엇으로 일하고 있는가"를 숫자와 그림으로 물어 준다.

실험실 사용법

실험실이 하는 일은 단순하다. 이미지를 작게 줄이고, 화소 하나하나를 세 가지 숫자로 바꾸고, 그 숫자들을 여러 방식으로 모아 보여 준다. 세 숫자는 이 책에서 계속 써 온 것들이다. 밝기는 CIELAB의 명도 L*(Lightness)(0=검정, 100=흰색), 선명함은 OKLCH의 채도 C(Chroma)(0이면 회색, 화면의 가장 선명한 색이 0.3 안팎), 색의 종류는 OKLCH의 색상각 h(Hue angle)(0~360°)다. 3장에서 이 공간들이 왜 HSL보다 사람의 감각에 가까운지 다뤘다.

이미지 한 장 폭 240px 이하로 화소마다 숫자 셋 L* · C · h 명도 · 채도 · 색상 명도 분포 · 노탄 구조가 읽히는가 채도 지도 어디가 선명한가 색상 분포 어떤 색이 많은가 주요 색 팔레트(k-평균) 대비 · 색각 점검 두 색상환 위 조화 글로 내보내기
그림 1. 실험실의 흐름. 이미지를 줄인 뒤 화소마다 명도·채도·색상 세 숫자를 구한다. 위쪽 세 패널은 그 숫자들을 한 가지씩 모아 보고, 아래쪽은 그 숫자로 뽑은 주요 색 몇 개를 점검한다. 같은 숫자를 여러 번 다르게 모으는 것뿐이라서, 패널끼리는 서로 모순되지 않는다. 다르게 보일 뿐이다.

이미지는 다섯 가지 중에서 고르거나 직접 넣는다. 쇠라의 「서커스 사이드쇼」(1장에서 만났다)는 공공 도메인 작품이고, 나머지 넷은 이 책이 직접 그린 가상의 그림이다. 책방 E의 가을 행사 포스터 시안, 그리고 서윤의 수채화 세 점 「창가의 책」, 「비 오는 골목」, 「해 질 녘 서점 앞」을 흉내 낸 색 계획 스케치다. 내 이미지 열기로 고른 파일은 이 브라우저 안에서만 읽고 어디에도 올리지 않는다. 페이지를 닫으면 사라진다.

숫자는 화면에 도착한 색의 숫자다 실험실이 읽는 값은 브라우저가 화면에 그리려고 준비한 sRGB 값이다. 사진이라면 그 값은 이미 카메라가 화이트밸런스와 보정으로 한 번 해석한 색이고(10장), 그림을 찍은 사진이라면 조명과 카메라까지 겹친다. 그리고 그 숫자를 보여 주는 화면은 기기마다 다르게 보인다. 그래서 실험실의 숫자는 "이 파일 안에서 색들이 서로 어떤 관계인가"를 읽는 데 쓰고, 원작의 물감 색을 맞히는 데는 쓰지 않는다.

먼저 "얼마나 줄여도 되는가"를 본다. 실험실은 분석하기 전에 이미지를 폭 240 px 이하로 줄인다. 1,600 px 그림이면 화소 수가 40분의 1 남짓으로 줄어 계산이 빨라진다. 그래도 될까. 아래 슬라이더로 분석 폭을 바꾸면 오른쪽 그림이 그만큼 거칠어지고, 아래 두 줄의 팔레트(240 px에서 뽑은 여섯 색과, 지금 폭에서 뽑은 여섯 색)가 얼마나 달라지는지 보인다.

SIMULATOR

실험실 입구: 이미지와 분석 해상도

파일은 이 브라우저 안에서만 읽는다. 서버로 보내지 않는다.

선명한 색 비율 240px→지금—
분석 크기—
팔레트 차이 ΔE(가중 평균)—
분석 시간—
해볼 것: ① 포스터를 고르고 분석 폭을 120, 60으로 줄인다. 그림은 거칠어지지만 팔레트 차이는 ΔE 1.5 아래에 머물고(나란히 놓아도 구분하기 어려운 정도), 날짜 배지의 선명한 색 2.3%도 그대로다. 넓은 색면이 팔레트를 정하기 때문이다. ② 16, 8 px까지 줄인다. 배지가 바탕의 탁한 초록과 섞이며 선명한 색이 1.8%, 0%로 사라진다. 작은 면적의 선명한 색부터 무너진다. ③ 「해 질 녘 서점 앞」으로 바꿔 같은 실험을 한다. 선명한 하늘은 넓어서 60 px에서도 18%가 16%로 조금 줄 뿐이고, 16 px에서야 7% 아래로 떨어진다. 섞여서 평균색이 되는 모습은 1장의 병치 혼합과 같다. (줄이기는 브라우저의 이미지 축소를 쓴다. 팔레트는 OKLab k-평균(시드 고정), 차이는 240 px 팔레트의 각 색에서 가장 가까운 색까지의 ΔE2000을 비율로 가중 평균한 값이다.)

넓은 면은 줄여도 남고, 작은 면은 먼저 사라진다. 그래서 240 px은 "그림 전체의 색 구성"을 읽기에는 충분하지만, 작은 글자나 한 점의 강조색을 찾기에는 부족할 수 있다. 실험실의 모든 패널은 이 한계를 안고 있다. 작은 것이 중요하다면 그 부분만 잘라서 따로 넣는다.

명도 패널: 히스토그램과 노탄

6장에서 그림이 읽히는지는 색보다 명도가 먼저 정한다는 것을 봤다. 실험실의 명도 패널은 두 가지를 보여 준다. 하나는 명도 히스토그램(Value histogram), 곧 화면의 화소들이 L* 0~100 중 어디에 얼마나 몰려 있는지 세어 막대로 그린 그래프다. 다른 하나는 노탄(Notan, 濃淡), 명도를 어둠·중간·밝음 세 단계로만 남긴 그림이다.

어두운 쪽에 몰림 밝은 쪽에 몰림 양 끝으로 갈라짐 0100 0100 0100 밤 장면, 무거운 분위기 밝은 한 점이 초점이 된다 안개, 아침, 맑은 수채 어두운 한 점이 초점이 된다 강한 명도 대비, 포스터 멀리서도 형태가 읽힌다
그림 2. 명도 히스토그램의 세 가지 전형. 가로축은 명도 L*(왼쪽 검정, 오른쪽 흰색), 막대 높이는 그 명도를 가진 화소의 비율이다. 어느 모양이 "좋다"는 것은 없다. 어두운 쪽에 몰린 그림은 밝은 한 점이, 밝은 쪽에 몰린 그림은 어두운 한 점이 시선을 끈다. 문제가 되는 것은 의도하지 않았는데 가운데 한 봉우리에 모두 몰려 형태가 흐려진 경우다.

아래 시뮬레이터에서 두 경계 슬라이더(또는 히스토그램 위 두 손잡이)로 어둠·중간·밝음을 나누는 명도를 정한다. 보기를 "노탄"으로 바꾸면 그림이 세 가지 회색으로만 남는다. 경계를 움직이며 형태가 가장 또렷하게 읽히는 자리를 찾는다.

SIMULATOR

명도 분포와 노탄 세 단계

히스토그램 위 손잡이를 끈다
어둠—
중간—
밝음—
명도 폭 (5~95%)—
해볼 것: ① 포스터의 노탄을 본다. 6장에서 정한 세 단계가 그대로 보인다. 크림색 제목과 정보 글자는 밝음, 탁한 초록 바탕은 중간, 책 그림과 테두리는 어둠이다. 그런데 붉은 날짜 배지는 바탕과 같은 "중간"에 들어간다. 두 색의 명도가 L* 51과 47로 거의 같기 때문이다. 8장에서 배지 안 날짜를 크림색으로 쓴 이유다. ② 두 경계를 한곳으로 모은다. 세 단계가 두 단계(흑과 백)가 되고, 중간 명도에 기대던 형태(골목의 먼 건물, 창가의 벽)가 사라진다. ③ 쇠라를 고른다. 명도 폭이 L* 15~45로 좁고 "밝음"이 0%다. 그런데 그림을 보면 가스등이 먼저 눈에 들어온다. 등불은 면적이 너무 작아 히스토그램에 거의 나타나지 않지만, 주변이 온통 어두워서 초점이 된다. (L*은 CIELAB 명도, 흑백 보기는 같은 휘도의 회색이다. 노탄 색은 어둠 L* 약 15, 중간 약 58, 밝음 약 93의 회색으로 고정했다.)

노탄의 경계는 정답이 있는 값이 아니다. 같은 그림도 경계를 어디에 두느냐에 따라 다른 구조로 읽힌다. 경계를 움직이다가 형태가 "탁" 하고 정리되는 자리가 있으면, 그 그림은 명도 구조가 분명한 그림이다. 어디에 두어도 얼룩만 남으면, 색을 바꾸기 전에 명도부터 다시 짜야 한다는 신호다. 화가들이 채색 전에 연필로 작은 명도 스케치를 하는 이유가 이것이다.

사진 한 장으로 손 노탄 좋아하는 사진이나 그림 엽서 한 장을 고른다. 실험실에 넣기 전에, 먼저 손바닥만 한 종이에 연필 세 단계(종이 흰색, 연한 회색 칠, 진한 칠)로만 따라 그린다. 10분을 넘기지 않는다. 그다음 실험실의 노탄과 나란히 놓는다. 내가 "어둡다"고 본 곳과 숫자가 어둡다고 한 곳이 어디서 다른지 표시한다. 대개 사람은 선명한 색을 실제보다 밝게, 넓은 그늘을 실제보다 어둡게 기억한다.

채도 패널: 어디가 선명한가

명도 다음은 채도다. 채도 패널은 화소마다 회색에서 얼마나 떨어져 있는지(OKLCH C)를 재서 두 가지로 보여 준다. 채도 지도는 회색에 가까운 곳을 검게, 선명한 곳을 밝게 칠한 그림이다. 기준 넘는 색만은 정한 채도보다 선명한 화소만 원래 색으로 남기고 나머지를 같은 명도의 회색으로 바꾼다. 7장에서 "선명한 색은 아껴 쓸수록 산다"고 했는데, 이 패널은 그 선명한 색이 지금 화면의 몇 %를 차지하는지 재 준다.

SIMULATOR

채도 지도와 채도 예산

히스토그램 위 기준선을 끈다
기준 넘는 화소—
평균 채도—
상위 5% 채도—
거의 회색(C<0.03)—
해볼 것: ① 「비 오는 골목」을 고른다. 기준 0.10에서 남는 것은 빨간 우산과 젖은 길에 비친 우산뿐이다(화면의 1.4%). 나머지는 파랑과 번트 시에나를 섞은 회색이라 화소의 98%가 거의 회색이다. 회색 바탕이 넓어서 작은 빨강이 주인공이 된다. ② 「해 질 녘 서점 앞」으로 바꾼다. 하늘의 파랑과 주황, 창 불빛, 그림자 속 보랏빛 붓질까지 화면의 약 18%가 기준을 넘는다. 선명한 면이 여러 곳에 흩어지면 그중 어느 것도 홀로 튀지 못한다. ③ 기준을 0.30까지 올린다. 화면 sRGB의 가장 선명한 빨강·자주 근처만 남다가 결국 아무것도 남지 않는다. 기준을 0.02로 내리면 거의 모든 화소가 남아 지도가 의미를 잃는다. (C는 OKLCH 채도. 같은 C라도 색상마다 화면이 낼 수 있는 최대 채도가 달라서, 노랑의 0.15와 파랑의 0.15는 "얼마나 꽉 찼나"가 다르다.)

"선명한 색은 화면의 10% 안팎"은 7장에서 서윤이 세운 작업 규칙이지 법칙이 아니다. 해 질 녘 하늘처럼 선명한 색이 화면 대부분을 차지하는 그림도 얼마든지 좋다. 그럴 때 그림을 이끄는 것은 채도 차이가 아니라 명도나 색상의 차이다. 채도 패널은 "지금 어떤 대비가 일하고 있는가"를 확인하는 도구다. 한 가지 덧붙이면, 거의 회색인 화소(C가 0.03보다 작다)의 비율이 높은 그림은 다음 절의 색상 분포를 읽을 때 조심해야 한다. 회색에 가까운 색은 색상각이 작은 잡음에도 크게 흔들린다.

색상 분포: 원판 위의 점들

세 번째 패널은 색의 종류를 본다. OKLab은 색을 명도 L과 두 축 a(초록↔빨강), b(파랑↔노랑)로 적는다. 이 a–b 평면을 위에서 내려다보면, 원점은 회색이고 원점에서 멀수록 선명하며, 원점을 도는 각도가 색상이다.

$$C=\sqrt{a^2+b^2},\qquad h=\operatorname{atan2}(b,\ a)$$
\(a, b\): OKLab의 두 색 축, \(C\): 채도(원점에서의 거리), \(h\): 색상각(0~360°). 이 책의 모델로 계산하면 책방 초록 #2f7d5b는 \(C\approx0.094\), \(h\approx162^\circ\)에 있다.
선명한 빨강 탁한 갈색 올리브 책방 초록 파랑 회색 0° 90° 읽는 법 가운데: 회색 바깥: 선명 각도: 색상 점선 원: C 0.1, 0.2 실선 원: C 0.3 같은 방향의 두 점은 색상이 같고 채도가 다르다(빨강과 갈색)
그림 3. 색상–채도 원판 읽는 법. 점 하나가 화소 하나다. 원점에서의 방향이 색상, 거리가 채도다. 같은 방향에 있는 선명한 빨강과 탁한 갈색은 "같은 색상, 다른 채도"이고, 회색 점은 방향이 없다. 명도는 이 그림에 없다. 밝은 초록과 어두운 초록이 같은 자리에 겹친다는 것이 이 원판의 한계다.

아래 원판에는 이미지의 화소들이 그 색 그대로 점으로 찍힌다. 원판 둘레의 막대는 색상별로 채도를 더한 양이다. 원판 테두리의 손잡이를 끌어 색상 쐐기를 돌리면, 오른쪽(좁은 화면에서는 아래) 그림에서 그 쐐기 안의 색만 남는다.

SIMULATOR

색상–채도 산점도와 색상 쐐기

원판 테두리를 끌어 쐐기를 돌린다
쐐기 안의 화소—
가장 많은 색상—
색상 퍼짐—
해볼 것: ① 「해 질 녘 서점 앞」은 점들이 주황·노랑 쪽과 파랑·보라 쪽, 두 갈래로 모인다. 빛 받은 벽과 창 불빛, 그리고 검정 없이 칠한 그림자. 10장의 계획이 원판 위에서 두 덩어리로 보인다. 쐐기를 파랑 쪽으로 돌리면 그림자와 하늘 위쪽만 남는다. ② 「비 오는 골목」은 점들이 원점 근처에 뭉쳐 있고 빨간 우산만 멀리 떨어져 있다. 색상 퍼짐이 5° 남짓으로 가장 작다. 한 가지 회색 혼합의 농담으로 칠했기 때문이다(11장). ③ "거의 회색인 점 숨기기"를 끄고 쐐기 폭을 180°로 넓힌다. 회색 점들이 원점에 쌓이고, 반원 쐐기가 화면 절반을 가져간다. 폭이 넓을수록 쐐기는 아무것도 가려내지 못한다. (점은 많아야 3,000개 남짓만 표본으로 찍는다. 색상 퍼짐은 채도로 가중한 원형 표준편차로, 작을수록 한 색상에 모여 있다.)

원판이 한 덩어리로 모인 그림은 색상으로 통일된 그림이고, 두 덩어리가 마주 보는 그림은 보색 대비로 일하는 그림이다. 점들이 원판 전체에 고르게 흩어져 있는데 채도도 높다면 화면이 시끄럽게 느껴질 가능성이 크다. 다만 이것은 경향일 뿐이다. 쇠라의 그림은 점이 원판 곳곳에 흩어져 있지만, 앞 절에서 봤듯 명도가 조용히 정리되어 있어서 시끄럽지 않다. 세 패널은 늘 함께 읽는다.

주요 색 뽑기

이제 화소 수만 개를 색 몇 개로 줄인다. 실험실은 k-평균 군집(k-means clustering)을 쓴다. 색 공간(여기서는 OKLab) 안에 화소들을 점으로 뿌린 뒤, 점들을 k개의 무리로 나누고 각 무리의 평균색을 대표색으로 삼는 방법이다. 무리에 속한 화소의 비율이 그 색의 비율이 된다. 14장에서 서점 사진의 색을 뽑을 때 쓴 방법과 같다.

k-평균은 무엇을 최소로 하는가 k-평균은 "각 화소에서 자기 대표색까지 거리의 제곱 합"을 줄이도록 대표색을 옮기기를 반복한다. 대표색에 가장 가까운 화소를 모으고, 모은 화소의 평균으로 대표색을 옮기고, 다시 모은다. 이 절차는 Lloyd(1982, 『IEEE Transactions on Information Theory』에 실린 양자화 논문)의 방법으로 널리 알려져 있고, 이 책의 엔진은 시작점을 고르게 흩는 k-means++(Arthur, Vassilvitskii 2007)를 쓰고 시드를 고정해 같은 그림에서 늘 같은 결과를 낸다. 거리 제곱 합을 줄이는 방법이라서 넓은 면적의 색이 대표색을 끌어당긴다. 작은 면적의 색은 다른 색들과 멀리 떨어져 있으면(회색 거리의 빨간 우산) 무리 하나를 차지하지만, 비슷한 색의 큰 무리 가까이에 있거나 k가 너무 작으면 그 무리에 흡수된다. 또 무리의 평균이므로 대표색은 실제 화소들보다 조금 탁해지는 경향이 있다.
SIMULATOR

주요 색 팔레트와 비율

가장 넓은 색—
가장 선명한 색—
평균 오차 ΔEOK×100—
가장 비슷한 두 색 ΔE—
해볼 것: ① 「비 오는 골목」에서 k를 2부터 하나씩 올린다. k=2, 3에서는 회색만 남고 k=4에서 빨간 우산이 나타난다. 우산은 면적이 1.4%뿐이지만 회색 무리에서 멀리 떨어져 있어 무리 하나를 차지한다. 포스터의 날짜 배지(2.1%)는 k=5에서, 「창가의 책」의 빨간 책(2.1%)은 k=6에서야 나타난다. 작은 색이 살아남을지는 면적보다 "다른 색과 얼마나 떨어져 있나"에 달렸다. ② "뽑은 색으로만 다시 칠하기"를 켠다. k=2에서는 그림이 두 덩어리의 실루엣이 되고, k가 오를수록 평균 오차가 줄어든다. ③ k=12로 올리고 "가장 비슷한 두 색"을 본다. ΔE가 5 아래로 떨어지면 거의 같은 색 두 개가 자리를 나눠 쓰는 것이다. 색을 늘린다고 늘 정보가 늘지는 않는다. (OKLab k-평균, k-means++ 시작, 시드 7, 표본 최대 6,000 화소. 평균 오차는 각 화소에서 자기 대표색까지의 OKLab 거리 평균을 100배 한 값이다.)

뽑은 팔레트의 비율은 면적이지 중요도가 아니다. 골목의 빨간 우산은 면적으로는 1%도 안 되지만 그림의 주인공이다. 그래서 팔레트를 읽을 때는 비율 막대와 함께 앞의 채도 패널을 본다. 넓고 탁한 색은 바탕이고, 좁고 선명한 색은 강조다. 반대로 포스터처럼 작정하고 만든 그림은 바탕·주색·강조의 비율이 팔레트에 그대로 드러난다.

뽑은 팔레트는 재료지 답이 아니다 사진에서 뽑은 색을 그대로 브랜드 색이나 그림의 팔레트로 쓰면 대개 한 단계 탁하고 어둡게 느껴진다. 군집의 평균이라서다. 디자이너들은 뽑은 색을 출발점으로 삼아 명도와 채도를 한 번씩 손본다. 바탕색은 더 밝고 조용하게, 강조색은 원래 화소 중 선명한 쪽으로 옮긴다. 수채화가에게 뽑은 팔레트는 "이 장면을 칠하려면 물감 몇 가지가 필요한가"를 가늠하는 목록이다. 회색 계열이 세 개 나왔다면 회색 물감 세 개가 아니라, 한두 가지 혼색의 농도 차이로 만들 수 있는지부터 따져 본다(4장).

대비와 색각 점검

팔레트가 생기면 바로 묻게 되는 질문이 있다. 이 색들 중 어느 둘을 글자와 바탕으로 쓸 수 있는가. 13장에서 다룬 WCAG 2의 대비비(Contrast ratio)는 두 색의 상대 휘도 \(Y\)만으로 계산한다.

$$\text{대비비}=\frac{Y_{\text{밝은 색}}+0.05}{Y_{\text{어두운 색}}+0.05}$$
\(Y\): 상대 휘도(0=검정, 1=흰색). 결과는 1(같은 밝기)~21(검정과 흰색). 본문 글자는 4.5 이상(AA), 큰 글자(약 24px, 굵으면 약 19px 이상)와 아이콘·그래픽 요소는 3 이상이 기준이다.

식에 색상이 없다는 점이 중요하다. 빨강과 초록처럼 색상이 정반대여도 휘도가 비슷하면 대비비는 1에 가깝다. 아래 격자는 팔레트 여섯 색(명도순)의 모든 짝을 보여 준다. 행이 글자색, 열이 바탕색이다. 칸을 눌러 그 짝을 오른쪽(좁은 화면에서는 아래) 견본으로 크게 본다.

SIMULATOR

팔레트 대비 격자

칸을 눌러 짝을 고른다
글자 / 바탕—
WCAG 대비비—
APCA Lc (참고)—
기준 넘는 짝—
해볼 것: ① 포스터 팔레트에서 붉은 날짜 배지(#d24f39 근처)와 탁한 초록 바탕(#567666 근처)이 만나는 칸을 찾는다. 두 색은 색상이 거의 반대인데 대비비가 1.2 안팎이다. 배지 위에 초록 글자를, 초록 위에 붉은 글자를 쓰면 안 읽힌다. 크림색 제목과 바탕의 짝(약 4.1)은 "큰 글자 3"에서만 통과한다. ② 기준을 "큰 글자 3"으로 바꾼다. 통과하는 짝이 늘어난다. 제목에는 쓸 수 있지만 본문에는 못 쓰는 짝이 이 차이만큼 있다. ③ 쇠라로 바꾼다. 여섯 색이 모두 L* 50 아래의 어두운 색이라 통과하는 짝이 하나도 없다. 이 그림 위에 글자를 얹으려면 그림 밖의 밝은 색(종이 띠)을 가져와야 한다. (대비비는 WCAG 2 공식. 대비비는 두 색의 순서와 상관없지만 APCA는 글자와 바탕의 순서에 따라 값이 달라진다. 양수는 밝은 바탕의 어두운 글자, 음수는 그 반대다.)
APCA는 참고값이다 APCA(Accessible Perceptual Contrast Algorithm)는 WCAG 3 초안에서 검토 중인 대비 계산법으로, 글자 굵기와 크기, 밝은 바탕인지 어두운 바탕인지를 함께 고려하려고 만들었다. 2026년 10월 현재 표준이 아니며, 웹 접근성의 법적·실무 기준은 여전히 WCAG 2의 대비비다. 이 책은 APCA 값을 "두 방식이 어디서 다르게 판단하는가"를 보는 참고로만 보여 준다. 특히 어두운 바탕 위의 밝은 글자에서 두 값이 자주 엇갈린다.

대비는 글자를 읽을 수 있는지를, 색각 점검은 색끼리 구분되는지를 본다. 같은 팔레트와 그림을 색각이상(Color vision deficiency) 시뮬레이션으로 바꿔 본다. 경계선을 끌어 보통 색각과 비교하고, 아래 팔레트 줄에서 가장 비슷해지는 두 색을 확인한다.

SIMULATOR

색각 미리보기와 팔레트 구분도

가장 가까운 두 색(보통)—
가장 가까운 두 색(시뮬레이션)—
포스터 바탕 ↔ 날짜 배지—
해볼 것: ① 포스터에서 제1색각을 본다. 붉은 날짜 배지가 탁한 올리브빛으로 바뀌며 바탕에 다가간다. 보통 색각에서 ΔE 43이던 두 색의 차이가 13 남짓으로 준다. 명도도 비슷하니(앞 시뮬레이터 1.18) 배지를 알아보게 하는 것은 결국 크림색 날짜 글자다. ② 전색각으로 바꾼다. 흑백 보기와 같은 결과다. 배지가 바탕에 묻히는 정도가 명도 패널의 노탄에서 본 것과 같다. ③ 심도를 0에서 100까지 천천히 올리며 "가장 가까운 두 색"의 ΔE가 언제 10 아래로 떨어지는지 본다. (Machado, Oliveira, Fernandes(2009)의 심도 1.0 행렬. 중간 심도는 보통 색각과의 선형 보간 근사다. 시뮬레이션은 평균적인 경향일 뿐, 같은 유형이라도 사람마다 보이는 정도가 다르다. 화면 색은 기기마다 다르다.)

두 점검을 함께 하면 결론이 분명해진다. 명도가 비슷하고 색상만 다른 두 색은 대비 격자에서도 탈락하고 색각 시뮬레이션에서도 가까워진다. 그런 두 색에 "예약 가능"과 "품절" 같은 서로 다른 뜻을 맡기면 일부 사람에게는 뜻이 사라진다. 13장의 규칙대로 그런 자리에는 글자나 모양을 함께 쓴다.

조화 점검: 두 색상환 위에서

마지막 점검은 팔레트의 색들이 색상환 위 어디에 놓이는지다. 5장에서 본 것처럼 같은 색도 화가의 전통 색상환(RYB)과 지각 색상환(OKLCH)에서 서로 다른 각도에 놓인다. 그래서 "보색 배색인가"라는 질문의 답이 색상환마다 다를 수 있다. 아래 그림은 책방 초록과, 두 색상환에서 각각 구한 보색 후보를 같은 두 원판 위에 찍은 것이다.

그림 4. 같은 세 색, 두 색상환. 책방 초록 #2f7d5b, RYB 색상환에서 구한 보색 #7d3b2f(적갈색), OKLCH에서 구한 보색 #91557c(자두색). 왼쪽 RYB 원판에서는 적갈색이 초록의 정반대에 있고, 오른쪽 OKLCH 원판에서는 자두색이 정반대에 있다. 어느 원판이 옳은지는 정해져 있지 않다. 물감을 섞는 화가에게는 RYB가, 화면에서 균형을 맞추는 디자이너에게는 OKLCH가 더 쓸모 있을 때가 많다. 원판 둘레의 색은 각도를 보여 주기 위한 안내 색이다.

종합 실험실의 조화 패널은 이것을 팔레트 전체로 넓힌다. 팔레트에서 기준색 하나를 고르면(기본은 넓이와 채도를 함께 따져 가장 존재감 있는 색), 고른 배색 공식의 바큇살을 두 원판에 긋고, 바큇살 가까이(±20°)에 있는 팔레트 색에 고리를 두른다. 이 패널은 판정을 내리지 않는다. 고리가 많다고 좋은 그림이 아니고, 고리가 없다고 나쁜 그림도 아니다. 어떤 그림은 공식과 전혀 상관없는 색들로 아름답다. 조화 패널이 쓸모 있는 순간은 "이 색들이 왜 어울려 보이지?" 하는 질문에 하나의 설명 후보를 줄 때, 그리고 일부러 공식에서 벗어난 색이 어디인지 확인할 때다.

종합 실험실

이제 모든 패널을 한 화면에 모은다. 위 큰 그림은 보기를 바꿔 가며 원본·흑백·노탄·채도·팔레트로 다시 칠한 그림·색각 시뮬레이션으로 본다. 그림 위를 누르거나 끌면 그 화소의 색을 집어 값을 보여 준다. 아래 여섯 칸은 명도 분포, 채도 분포, 색상 분포, 팔레트, 대비 격자, 두 색상환 위의 조화다. 팔레트 칸의 색을 누르면 그 색이 조화 패널의 기준색이 된다. 맨 아래에서 팔레트를 글로 내보내 복사한다.

순서는 이렇게 권한다. ① 흑백과 노탄으로 명도 구조를 먼저 본다. ② 채도 분포에서 선명한 색이 얼마나, 어디에 있는지 본다. ③ 색상 분포에서 점들이 몇 덩어리인지 본다. ④ 팔레트를 뽑고 비율을 읽는다. ⑤ 대비 격자와 색각으로 쓸 수 있는 짝을 고른다. ⑥ 조화 패널로 설명을 하나 덧붙인다. ⑦ 내보낸다.

SIMULATOR

색 실험실

그림을 눌러 색을 집는다

파일은 이 브라우저 안에서만 읽는다. 서버로 보내지 않는다.

집은 색—
노탄 어둠·중간·밝음—
선명한 색(C≥0.10)—
가장 많은 색상—
본문 대비 통과 짝—
색각에서 최소 ΔE—
해볼 것: ① 포스터를 고르고 보기를 "노탄", "채도", "색각"으로 차례로 바꾼다. 붉은 날짜 배지는 노탄과 색각에서 바탕에 붙지만 배지 안의 크림색 날짜는 세 보기 모두에서 남는다. 채도 보기에서 남는 색은 배지 하나뿐이다(약 2%). ② 쇠라로 바꾸고 그림 속 등불을 눌러 색을 집는다. 그다음 바로 옆 어두운 배경을 집는다. 명도 L*의 차이가 색상의 차이보다 훨씬 크다. ③ 「해 질 녘 서점 앞」에서 팔레트 칸의 주황(#d28767 근처)을 눌러 기준색으로 삼고, 배색을 보색·분할 보색·삼각으로 바꿔 본다. 주황과 보라는 흔히 "보색"이라고 부르지만, 보색 공식에서는 어느 원판에서도 보라 점에 고리가 걸리지 않는다. 고리가 걸리는 것은 OKLCH에서는 삼각 배색뿐이고, RYB에서는 분할 보색과 삼각 배색 둘 다다. ④ 내 이미지를 넣어 같은 순서로 본다. (k는 3~10, 노탄 경계 L* 35·68, 채도 기준 0.10은 고정이다. 대비 칸의 기준은 본문 4.5다. 모든 값은 이 책의 모델로 계산한 것이며 화면 색은 기기마다 다르다.)

쇠라의 그림을 실험실에 넣어 보면, 1장에서 흑백 단추로 확인한 것이 숫자로 다시 나온다. 명도는 L* 15~45(화소의 5~95%)의 어두운 쪽에 몰려 있고, 가스등은 화면의 0.2%도 안 되어 히스토그램 오른쪽에 거의 보이지 않는 꼬리만 남긴다. 그런데도 우리는 등불을 먼저 본다. 초점을 만드는 것은 면적이 아니라 주변과의 대비다. 채도 분포는 생각보다 낮은 쪽에 몰려 있어서 C 0.10을 넘는 화소가 거의 없다. 가까이서는 주황·파랑·초록의 점이 선명해 보이지만, 그 점들이 섞이고 줄어든 화소 단위로는 탁한 보랏빛 갈색이 대부분이다. 팔레트도 보랏빛 회색과 따뜻한 갈색 두 계열로 나뉜다. 쇠라가 밤의 분위기를 검정 대신 서로 다른 색의 섞임으로 만들었다는 해석과 맞는 결과다. 다만 이 숫자들은 박물관이 찍은 사진의 숫자다. 캔버스의 물감이 세월에 따라 변한 정도, 사진의 조명과 보정은 숫자에 함께 들어 있다.

분석은 질문을 만든다 실험실을 오래 쓴 사람은 숫자를 결론으로 쓰지 않고 질문으로 쓴다. "선명한 색이 25%다"는 나쁘다는 뜻이 아니라 "이 그림의 주인공은 채도가 아니라 무엇인가"를 묻는 신호다. "대비 통과 짝이 둘뿐이다"는 "글자를 이 그림 위에 얹지 말고 따로 띠를 깔아야 하는가"를 묻는다. 그리고 질문의 답은 화면이 아니라 실제 자리에서 확인한다. 포스터는 인쇄한 교정쇄를 붙일 벽 앞에서, 그림은 걸 전시장 조명 아래에서, 웹사이트는 손님이 들고 다니는 휴대폰에서. 실험실은 그 자리에 가기 전에 무엇을 보러 갈지 정리해 주는 도구다.
팔레트를 물감 띠로 옮기기 실험실에서 그림 한 장의 팔레트를 k=5로 뽑고 비율을 적는다. 가로 20 cm 종이 띠를 비율대로 다섯 칸으로 나눈다(32%면 6.4 cm). 각 칸을 물감이나 색연필로 화면의 색에 최대한 가깝게 칠한다. 화면 색은 기기마다 다르니 "똑같이"보다 "서로의 관계가 같게"를 목표로 한다. 다 칠한 띠를 원래 그림 옆에 세워 두고 멀리서 본다. 띠가 그림의 분위기를 얼마나 옮겨 오는지, 무엇이 빠졌는지(대개 작은 강조색과 명도의 배치) 적는다.

서윤의 작업 노트

CASE 서윤작업 노트 · 16장

실험실에 모두 올려 본 밤: 두 달의 노트를 한 장으로

10월 마지막 주, 서윤은 두 달 동안 쌓인 노트를 들고 실험실을 열었다. 3장에서 OKLCH로 적어 둔 로고 초록, 9장의 바탕별 로고 변형, 14장의 웹 팔레트 v1, 6~8장을 거쳐 다듬은 포스터 시안 C, 15장의 인쇄 절차, 그리고 4·7·10·11장에서 정한 원칙으로 그린 수채화 세 점의 색 계획 스케치. 이번에는 무엇을 새로 고르기보다, 장마다 따로 정한 것들이 한 화면에서 서로 맞는지 보는 날이었다. 도경은 노트북 옆에 손 색 일지를 펼쳐 놓았다.

기준색. 서윤은 1장의 후보 #2f7d5b(OKLCH 53.2% 0.094 162°)를 책방의 기준 초록으로 확정했다. 새로 잰 숫자가 결정을 바꾼 것이 아니라, 이 값이 이미 여러 자리에서 일을 하고 있었기 때문이다. 흰 글자를 얹은 웹 버튼에서 4.99(13장), 웹 사다리의 600번(14장), 코팅지 인쇄 색역 안(15장 모형 값 약 C75 M4 Y58 K21). 12장에서 정한 대로 근거는 색채 심리가 아니라 "동네 숲길의 초록"이라는 서점의 이야기다. 기준이 섰으니 나머지는 이 값에서 갈라져 나온 변형으로 적었다. 이 책의 모델로 계산한 값은 다음과 같다.

책방 초록#2f7d5b 로고·밝은 바탕#268662 로고·어두운 바탕#287554 사다리 400#5eaa85 간판 별색 후보#005132 포스터 바탕#567666 포스터 크림#ffe2d7 날짜 배지#d24f39 포스터 어둠#22342a
이름 (정한 장)OKLCH (L / C / h)자리대비비 확인
책방 초록 #2f7d5b (1·3·14장)0.532 / 0.094 / 162°기준값, 웹 버튼(사다리 600)흰 글자 4.99
로고 밝은 바탕용 #268662 (9장)0.555 / 0.105 / 164°흰 웹 바탕의 로고흰색 4.50
로고 어두운 바탕용 #287554 (9장)0.506 / 0.092 / 162°검은 에코백의 굵은 로고 마크에코백 3.02
사다리 400 #5eaa85 (14장)0.678 / 0.095 / 161°에코백의 작은 글자(주소·문구), 어두운 화면 주색에코백 6.06
간판 별색 후보 #005132 (16장)0.384 / 0.088 / 159°크라프트지 간판 시험 인쇄용 후보크라프트 4.17
포스터 바탕 #567666 (7장)0.536 / 0.045 / 163°포스터 바탕크림 제목 4.09
포스터 크림 #ffe2d7 (6장)0.934 / 0.035 / 42°제목·정보 글자, 배지 안 날짜배지 위 3.48
날짜 배지 #d24f39 (7·8장)0.600 / 0.170 / 32°포스터의 유일한 선명한 색바탕과 1.18
포스터 어둠 #22342a (6장)0.306 / 0.030 / 160°책 그림·테두리크림과 10.74

웹의 나머지는 14장의 팔레트 v1을 그대로 둔다. 초록 사다리 10칸(50 #edf8f2 … 600 #2f7d5b · 700 #0f6545 … 900 #003521), 색상 162°에 채도 0.008만 섞은 중립 10칸(50 #f6fcf8 … 900 #151917), 상태색 넷(성공 #38853e, 경고 #e49e22, 위험 #c53732, 정보 #2a75ba, 모두 아이콘·글자와 함께), 13장의 품절 회색 #6b6874. 인쇄도 15장의 절차(종이·프로파일 확인 → 소프트 프루프 → 실제 종이 교정쇄 → D50과 서점 전구 아래 확인)를 따른다.

실험실이 바꾼 것 두 가지. 둘 다 숫자로 이유를 적었다. 첫째, 검은 에코백. 9장의 어두운 바탕용 #287554는 에코백 천(#1d1d1f) 위에서 3.02라 굵은 로고 마크(비텍스트·큰 글자 기준 3)에는 되지만, 그 아래 들어갈 주소와 작은 문구에는 모자란다. 실험실에서 더 밝은 변형 #71be98(7.63)도 계산해 보았지만, 14장 사다리에 이미 있는 400번 #5eaa85가 6.06으로 본문 기준 4.5를 넘는다. 서윤은 색을 하나 더 늘리지 않고 400번을 작은 글자에 쓰기로 했다. 로고 마크는 "같아 보이게"를 택한 9장의 값 그대로다. 둘째, 크라프트지 간판. 9장이 열어 둔 문제(밝은 바탕용 #268662가 크라프트 위 1.99)를 실험실에서 다시 풀었다. 색상과 채도를 지키고 명도만 내린 #005132는 크라프트 위 4.17이다. 다만 간판은 화면이 아니라 인쇄물이고, 15장에서 크라프트지 위 4원색 초록은 ΔE 11을 넘었다. 그래서 이 값을 #268662의 대체가 아니라, 15장에서 고른 별색 견본 셋과 함께 시험 인쇄에 보낼 별색 후보 하나로 적었다. 사다리 700번 #0f6545(크라프트 위 3.13)도 같은 시험에 얹는다. 시험 인쇄는 서점 전구 아래에서 본다.

그대로 둔 것. 포스터 시안 C를 넣으니 노탄은 어둠 21%·중간 74%·밝음 4%로 6장의 세 단계가 그대로였고, 선명한 색(C 0.10 이상)은 날짜 배지 하나, 화면의 2.3%였다. 8장의 "배지 2~3%"와 7장의 채도 예산 안이다. 배지와 바탕의 대비비는 1.18, 제1색각 시뮬레이션에서는 두 색의 차이가 ΔE 43에서 13 남짓으로 줄었다. 8장에서 배지 안 날짜를 크림색으로 쓰기로 한 결정이 옳은 쪽이었다는 확인이다. 조화 패널에서 배지는 바탕 초록과 RYB로 179°, OKLCH로 131° 떨어진다. 도경의 색상환으로는 보색, 화면의 색상환으로는 아니다. 서윤은 공식보다 "가을 행사 날짜를 한 번에 찾게 한다"는 역할로 이 색을 남겼다.

남겨 둔 선택지. 5장의 배색 후보 B(자두 #7e5c94·장미 #9b545e)와 C(올리브 #58783c·청록 #007d7a)는 지우지 않고 "다른 계절 행사의 강조색 후보"로 남겼다. 12장의 이야기 색(서가 나무 #8a5a3b, 크라프트 #c9a878, 전구 빛 #f3d9a4)은 굿즈와 사진의 보조색 후보다. 9장에서 흔들림은 가장 작지만 대비가 2.77이라 버린 #18704f, 실험실이 계산한 #71be98도 이유와 함께 적어 두었다. 다른 사람이라면 다른 값을 골랐을 것이다. 노트에는 정답이 아니라 서윤이 무엇을 왜 골랐는지가 남는다.

세 점의 색 계획. 서윤은 세 그림의 색 계획 스케치를 넣고 노탄 경계 L* 35·68, 채도 기준 0.10으로 읽었다(실험실 스케치 기준이며, 실제 그림은 종이와 물감에 따라 달라진다). 세 점 모두 4장의 기본 3색(레몬 옐로·퀴나크리돈 마젠타·프탈로 블루)과 번트 시에나로 칠하고, 어느 그림에도 검정을 쓰지 않는다. 「창가의 책」은 6장의 역광 구조대로 창을 칠하지 않은 종이(L* 약 94)로 남겼고, 노탄은 어둠 13%·중간 75%·밝음 12%다. 11장에서 가져온 원리대로 선명한 색은 빨간 책 한 권, 2.2%뿐이다. 「비 오는 골목」은 화소의 98%가 거의 회색이고 색상 퍼짐이 5° 남짓이다. 7장의 파랑+번트 시에나 회색을 11장의 "한 색 다섯 농담"으로 칠했다는 뜻이다. 선명한 색은 우산과 젖은 길에 비친 우산, 1.4%다. 「해 질 녘 서점 앞」은 10장의 빛 받은 벽 #e0c1a0과 그림자 #44566d를 그대로 썼고, 색상 분포가 주황·노랑과 파랑·보라 두 덩어리로 갈라진다(퍼짐 92°). 선명한 색은 18%로 7장의 채도 예산 10%를 넘는다. 서윤은 이 그림에서만은 예산을 지키지 않기로 했다. 대신 11장의 원리대로 그늘에 따뜻한 붓질과 차가운 붓질을 나란히 두고, 창 불빛 하나만 그림에서 가장 밝고 따뜻한 자리로 남긴다. 세 그림에 하나의 규칙을 강요하지 않는 것도 서윤의 선택이다.

밤늦게 도경이 일지에 마지막 메모를 적어 서윤에게 내밀었다. "숫자는 네가 본 것을 확인해 줄 뿐 보는 일을 대신하지 않는다. 표를 만들었으니 이제 표를 덮고, 서점 전구 아래와 전시장 벽 앞에 가서 한 번 더 봐라. 거기서 다르게 보이면 그 자리가 이긴다." 그 아래에 작게 덧붙였다. "실험실 쓰는 법은 다음 주에 한 번 더 가르쳐 다오."

이 장에서 정한 것기준 초록 #2f7d5b 확정(OKLCH로 기록, hex는 파생값). 9장의 로고 변형, 14장의 웹 팔레트 v1, 6~8장의 포스터 색은 그대로. 에코백 작은 글자는 사다리 400 #5eaa85. 크라프트 간판은 15장의 별색 견본 셋에 #005132·#0f6545를 더해 시험 인쇄. 세 점은 그림마다 다른 색 규칙을 쓴다.
아직 남은 문제주인의 최종 확인과 별색 비용, 교정쇄와 시험 인쇄에서 고를 실제 잉크, 전시장 조명 아래에서 세 점이 어떻게 보이는지는 실험실이 답할 수 없다.
다음 단계11월 전시와 서점 가을 행사. 17장에서 두 달의 작업 노트를 색인으로 묶는다.

핵심 정리

  1. 실험실은 이미지를 폭 240 px 이하로 줄이고 화소마다 명도 L*, 채도 C, 색상각 h를 구해 여러 방식으로 모아 보여 준다. 넓은 면은 줄여도 남고 작은 면이 먼저 사라진다.
  2. 명도 히스토그램과 노탄 세 단계로 명도 구조를 먼저 본다. 경계를 옮겨도 형태가 정리되지 않으면 색보다 명도를 먼저 고친다.
  3. 채도 패널은 선명한 색이 화면의 몇 %인지 잰다. 채도 예산은 작업 규칙이지 법칙이 아니며, 선명한 면이 넓으면 명도나 색상의 대비가 그림을 이끈다.
  4. 색상–채도 원판에서 점의 방향은 색상, 거리는 채도다. 한 덩어리면 색상 통일, 마주 보는 두 덩어리면 보색 대비로 일하는 그림이다. 명도는 이 원판에 없다.
  5. k-평균 팔레트의 비율은 면적이지 중요도가 아니다. 작고 선명한 강조색은 k가 작으면 사라지고, 대표색은 실제보다 조금 탁해진다.
  6. 대비비는 휘도만 본다. 색상이 반대여도 명도가 비슷한 두 색은 글자·바탕으로 못 쓰고, 색각 시뮬레이션에서도 가까워진다. APCA는 참고값이다.
  7. 조화 패널은 판정이 아니라 설명 후보다. 실험실의 숫자는 질문을 만들고, 답은 실제로 놓일 자리와 조명 아래에서 확인한다.

확인 퀴즈

1. 어떤 수채화의 명도 히스토그램이 L* 60~95에 몰려 있고 어두운 쪽은 거의 비어 있다. 노탄 세 단계로 바꾸니 "어둠"이 2%뿐이다. 가장 알맞은 해석은?

히스토그램의 모양에는 좋고 나쁨이 없다. 밝은 쪽에 몰린 그림에서는 적은 어둠이 강한 초점이 된다. 확인할 것은 그 어둠이 의도한 자리에 있는가다. 명도 분포는 채도와 따로 움직이고, 분석 폭은 명도 분포의 모양을 거의 바꾸지 않는다.

2. 비 오는 골목 사진에서 k=3으로 팔레트를 뽑았더니 화면의 주인공인 빨간 우산 색이 없다. 이유와 대처로 가장 알맞은 것은?

팔레트의 비율은 면적이지 중요도가 아니다. 작고 선명한 강조색은 k가 작으면 가까운 큰 무리에 섞인다. k를 올리면 나타나고, 채도 패널의 "기준 넘는 색만"으로도 바로 찾을 수 있다.

3. 포스터 팔레트의 날짜 배지 #d24f39와 바탕 #567666은 색상이 거의 반대인데 대비비가 1.18로 나왔다. 옳은 설명은?

대비비 식에는 색상이 없다. 두 색의 L*가 51.4와 46.8로 비슷하니 1.18이다. 대비비는 순서와 상관이 없어서 바꿔도 같고, 1.18은 큰 글자 기준 3에도 한참 못 미친다. 그래서 8장에서 배지 안 날짜는 명도가 크게 다른 크림색(배지 위 3.48)으로 썼다. APCA는 참고값이며 이 경우에도 낮게 나온다.

4. 실험실의 조화 패널에서 어떤 그림의 두 주요 색이 RYB 원판에서는 보색 바큇살 위에 있고, OKLCH 원판에서는 바큇살에서 50° 넘게 벗어나 있다. 가장 알맞은 결론은?

같은 색도 RYB와 OKLCH에서 다른 각도에 놓인다. 어느 원판도 조화의 정답을 정하지 않는다. 조화 공식은 출발점이자 설명의 한 후보일 뿐이고, 판단 기준은 목적과 실제 자리에서의 모습이다.