컬러 모델

색을 말로 주고받으면 옮겨지지 않습니다. 조금 더 진한 파랑이라는 말은 듣는 사람마다 다른 색이 됩니다. 시안을 그리는 사람과 코드를 쓰는 사람이 나뉘어 있으면 매번 생기는 문제입니다.

페이지덱에서도 그랬습니다. 민서가 버튼 색을 한 단계 진하게 해 달라고 했고, 태오가 화면을 보며 비슷해 보이는 값을 넣었습니다. 내보낸 버튼은 시안보다 조금 탁했고, 그 차이를 두고 다시 주고받았습니다. 같은 색을 보면서도 같은 값을 말하지 못했기 때문입니다.

컬러 모델은 색을 숫자 몇 개로 쪼개 적기로 정한 규칙입니다. 값이 정해지면 옮기는 과정에서 색이 변하지 않습니다.

색을 몇 개의 축으로 나누고 축마다 값을 매깁니다. 화면 작업에서 주로 쓰는 것은 둘입니다.

1. 빨강·초록·파랑의 양으로 적는 방식. 세 가지 빛을 얼마씩 섞느냐로 색을 정하고 각 값을 0에서 255까지 둡니다. 화면이 빛을 섞는 방식과 같아 화면용 기본 표기이고, 보통 여섯 자리 16진수로 줄여 적습니다. 약점은 숫자만 보고 색을 짐작하기 어렵고 한 단계 진하게 만들려면 세 값을 동시에 조절해야 한다는 것입니다.
2. 색상·채도·밝기로 적는 방식. 색상은 색 바퀴에서 몇 도인지, 채도는 얼마나 짙은지, 밝기는 얼마나 환한지를 적습니다. 밝기 값만 내리면 같은 계열의 어두운 단계가 나와서, 색 하나로 여러 단계를 만드는 일이 쉬워집니다.

인쇄로 나가는 자리에서는 잉크 네 가지로 적는 표기를 씁니다. 화면은 빛을 더해 색을 만들고 인쇄는 잉크로 빛을 덜어 내므로, 화면에서 쨍했던 색이 인쇄물에서는 죽습니다.

함정이 하나 있습니다. 밝기 값이 같아도 눈에 보이는 밝기는 색마다 달라서, 같은 밝기로 적은 노랑과 파랑을 나란히 두면 노랑이 훨씬 환해 보입니다. 단계를 숫자로만 맞춰 놓고 명도 대비를 재면 떨어지는 단계가 섞여 나옵니다.

어떤 표기를 골랐든 값을 코드에 흩어 두지 않습니다. 값에 이름을 붙여 디자인 토큰으로 등록해 두면 시안과 코드가 같은 이름을 부릅니다. 민서가 버튼 색을 한 단계 바꿔도 태오는 값을 다시 받아 적지 않습니다.

"그 색 16진수로 적어 주세요. 눈대중으로 맞추면 달라집니다."

말로 옮기지 말고 값으로 넘기자는 요청입니다.

"팔레트는 색상·채도·밝기로 잡죠. 단계 만들기가 훨씬 쉽습니다."

같은 계열의 여러 단계를 밝기 값만 바꿔 만들자는 제안입니다.

"이건 인쇄물이라 화면 값 그대로는 못 씁니다."

잉크로 옮기면 색이 달라지니 인쇄용 표기로 다시 잡자는 뜻입니다.

민서는 팔레트를 색상·채도·밝기로 설계하고 확정된 값을 16진수로 적어 둡니다. 설계할 때 편한 표기와 코드에 들어가는 표기가 다르기 때문입니다.