색상 이름 찾기

색을 하나 주면 — 헥스든 RGB든 색 선택기든 — 서로 다른 세 가지 어휘에서 가장 가까운 이름 여덟 개를 돌려줍니다. 스타일시트에 그대로 쓸 수 있는 CSS 색 이름, slate-50부터 rose-700까지의 기본 테일윈드 팔레트, 그리고 수십만 명에게 색 견본을 뭐라고 부르겠느냐고 물어 의견이 모인 답만 남긴 XKCD 색 설문의 이름들입니다.

거리는 RGB 값을 비교하는 대신 OKLab에서 잽니다. 순위를 쓸 만하게 만들어 주는 것이 바로 이 선택입니다. RGB는 저장 형식이지 시각의 모형이 아닙니다. 검정에서 순수한 파랑까지의 직선 거리와 검정에서 순수한 초록까지의 직선 거리는 둘 다 255이지만, 눈에는 초록이 거의 두 배로 밝습니다. OKLab에서 그 둘은 밝기 0.45와 0.87에 놓이는데, 이것이 실제로 보이는 바입니다. RGB에서 가장 가까운 색을 찾으면, 전혀 닮지 않아 보이는 색에 대해 짙고 진한 파랑이 가장 가깝다고 태연히 알려 줍니다. 눈이 거의 알아채지 못하는 채널과 극도로 민감한 채널에 산수가 같은 가중치를 줬기 때문입니다.

세 어휘는 같은 목록을 세 번 시도한 것이 아니라 각각 다른 이유로 쓸모가 있습니다. CSS 이름은 스타일시트에 타이핑해서 실제로 동작하는 유일한 것들이고, 역사적 우연의 산물입니다. X11에서 물려받아 gray와 grey 같은 중복이 가득하고, 2014년에 추모의 뜻으로 추가된 rebeccapurple 같은 별난 것도 있습니다. 테일윈드 이름은 이미 그것을 쓰고 있는 프로젝트에서 어느 토큰을 꺼내야 하는지 알려 줍니다. 설문의 이름들은 보통 사람들이 실제로 쓰는 말이라서, 어떤 표준화 기구도 비준하지 않을 것들이 들어 있고, 컴파일러가 아니라 사람에게 색을 설명하려 할 때 맞는 목록인 이유도 그것입니다.

가장 가까운 이름이 주지 못하는 것은 대체재입니다. 브랜드 헥스에 가장 가까운 CSS 색은 가장 가까울 뿐 같지 않고, 그것으로 바꿔 넣으면 그 일치가 벌어진 만큼 색이 움직입니다. 스케치나 대화에는 괜찮고, 로고에는 아닙니다.