RGB만으론 부족하다: HSL, CMYK, OKLCH 색 표기법

앞 글 컴퓨터는 색을 어떻게 만들까: RGB, HEX, 2진수 이야기에서 색이 빨강·초록·파랑 0~255 세 숫자라는 걸 봤습니다. 화면은 그 숫자로 충분히 돌아갑니다. 그런데 사람이 색을 다루기 시작하면 RGB는 금방 불편해집니다.

RGB는 편하지만, 직관적이지 않다

“조금 더 밝은 빨강.” 이걸 RGB로 어떻게 만들까요? 세 채널을 동시에 조금씩 올려야 합니다. “채도만 조금 낮추고 싶다”는 RGB만 봐서는 어디를 줄여야 할지 모릅니다. “이 색을 종이에 그대로 찍어 달라”는 RGB로는 아예 불가능합니다.

다른 색 표기법은 이런 문제들을 풀려고 등장했습니다.

HSL — 사람이 생각하는 방식

HSL은 색을 색상 · 진하기 · 밝기 세 가지로 나눠 다룹니다. hsl(14, 100%, 60%)는 #FF5733과 같은 색이지만, 무엇이 어디서 왔는지가 명확합니다.

컴퓨터의 언어가 RGB라면 — 디자이너의 언어는 HSL입니다. 같은 색을 무엇을 바꾸고 싶은지의 관점에서 다룰 수 있습니다.

Hue — 색상은 360°짜리 원

색상은 시계처럼 한 바퀴 돌아옵니다. 0°에서 시작해 360°까지. 0°와 360°는 같은 빨강입니다.

Saturation — 채도는 색의 진하기

같은 색상이라도 채도를 줄이면 점점 회색에 가까워집니다.

Lightness — 밝기는 검정에서 흰색까지

L이 0%면 무조건 검정, 100%면 무조건 흰색. 50%가 그 색의 “원래” 밝기입니다.

HSL의 진짜 쓸모 — 팔레트 만들기

같은 색상(Hue)을 유지하고 L만 바꾸면 자연스럽게 어우러지는 색 묶음이 나옵니다. RGB로 같은 일을 하려면 9칸을 각각 손으로 계산해야 하지만, HSL은 L만 12% → 92%로 단계별로 바꾸면 끝입니다.

위 두 팔레트는 둘 다 한 줄로 만들 수 있습니다.

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... L만 10씩 바꾸면 끝 */
}

디자인 시스템을 만들 때 HSL이 가장 빛을 발하는 지점입니다.

CMYK — 잉크의 언어

화면이 아니라 종이에 색을 입히려면 완전히 다른 시스템이 필요합니다. CMYK는 인쇄소가 쓰는 네 잉크의 비율입니다.

왜 검정을 “B”가 아니라 “K”라고 부를까요. B는 Blue와 헷갈리기 때문입니다. 그리고 “Key plate”라는 인쇄 용어에서 왔습니다 — 다른 잉크들을 정렬하는 기준판이라는 의미입니다.

빛은 더할수록 밝아지고, 잉크는 더할수록 어두워진다

RGB와 CMYK의 가장 큰 차이는 혼합 방식입니다.

빨강 잉크가 빨갛게 보이는 이유는 다른 빛을 흡수하고 빨강만 튕겨내기 때문입니다. 잉크는 빛을 덜어내는 일을 합니다. 그래서 잉크를 섞을수록 색은 어두워집니다. 이론상 CMY 셋을 다 섞으면 검정이 나와야 하지만, 실제로는 탁한 갈색이 됩니다. 그래서 진짜 검정 잉크(K)를 따로 둡니다.

CMYK는 어디서 쓰나

화면 디자인을 한다면 CMYK를 거의 만질 일이 없습니다. 종이에 인쇄할 때만 등장합니다.

• 인쇄소에 파일 넘길 때 — 명함, 포스터, 책, 패키지. 인쇄소는 RGB 파일을 받으면 CMYK로 변환합니다.
• Photoshop / Illustrator에서 인쇄용 작업 시 — 처음부터 색상 모드를 CMYK로 두고 작업합니다.
• 브랜드 가이드 — 화면용 HEX와 인쇄용 CMYK 값을 함께 적습니다. 같은 브랜드 색이 두 매체에서 비슷하게 보여야 하니까.

화면 색과 인쇄 색이 다른 이유 — Gamut

화면이 표현할 수 있는 색 범위(RGB gamut)와 잉크가 표현할 수 있는 색 범위(CMYK gamut)는 다릅니다. 화면에서 쨍한 형광 핑크는 인쇄해도 그 색이 안 나옵니다 — 잉크로 만들 수 없는 색이기 때문입니다.

그래서 인쇄 디자이너는 작업 전에 CMYK 가능 영역 안의 색만 골라 씁니다. RGB로 작업한 디자인을 그대로 인쇄하면 색이 죽어 보이는 일이 흔합니다.

CMYK 값은 이렇게 적습니다

각 잉크를 몇 퍼센트씩 뿌릴지를 적습니다. 0%는 안 뿌리는 것, 100%는 가득.

진한 검정은 K 100%만 쓰면 회색에 가까운 탁한 검정이 됩니다. 그래서 인쇄소에서는 CMY를 같이 깔아 더 깊은 검정을 만듭니다.

OKLCH — 사람의 좌표

2020년대 들어 본격적으로 등장한 색 모델입니다. 키워드는 한 가지 — “사람 눈에 자연스럽게.”

세 좌표는 HSL과 이름이 비슷해 보입니다.

• L — Lightness (밝기, 0~1)
• C — Chroma (진하기, 0~약 0.4)
• H — Hue (색상, 0~360°)

그런데 HSL의 숨겨진 문제가 있습니다. 같은 L = 50%인데도 색마다 실제로 느끼는 밝기가 전혀 다릅니다. 직접 비교해 보겠습니다.

한 줄로 요약하면 — RGB와 HSL은 기계의 좌표. OKLCH는 사람의 좌표.

L · C · H, 각각의 역할

같은 색을 두고 한 좌표만 바꾸면 어떻게 되는지 보겠습니다.

어디에 쓰이는가

• 균일한 밝기의 팔레트 — 카테고리 색 8개를 다 같은 밝기로 맞추고 싶을 때
• 다크/라이트 모드 자동 변환 — L 값을 반전만 하면 자연스러운 다크 테마가 됨
• 접근성 — 텍스트와 배경의 밝기 차이를 정확히 예측 가능
• 그라데이션 — 중간에 회색 띠가 끼지 않는 자연스러운 흐름

CSS Color Level 4부터 정식 채택됐고, 최신 브라우저에서 그대로 쓸 수 있습니다.

.btn { background: oklch(67% 0.18 30); }       /* 주황 */
.btn:hover { background: oklch(60% 0.18 30); } /* L만 7 낮춤 → 정확히 그만큼 어두워짐 */

무엇을 언제 쓸까

대부분의 디지털 작업에서는 RGB/HEX로 충분합니다. HSL은 팔레트를 만들 때 한 번씩 떠올리면 좋고, OKLCH는 다크/라이트 모드 디자인에 큰 도움이 됩니다.

fns에서 색을 다루는 법

색이 숫자라는 사실을 알고 나면, 자주 쓰는 색을 손가락 끝에 두는 게 다음 단계입니다. fns는 색을 꺼내고·저장하고·꺼내쓰는 흐름을 한 키 뒤에 묶습니다.

화면 어디서든 색을 뽑는 Eyedropper — ⌘+Shift+K

Eyedropper는 화면 위 어느 픽셀이든 정확히 그 색을 잡아 주는 도구입니다. Figma/Photoshop 안에서만 쓸 수 있는 픽커를 시스템 전역으로 끌고 나온 것과 같습니다.

⌘+Shift+K를 누르면 화면 어디에서든 fns의 Eyedropper가 뜹니다. 디자인 시안의 한 픽셀, 사진의 특정 영역, 다른 앱의 배경색 — 마우스를 가져가 클릭하면 그 자리의 색을 정확히 잡습니다.

• 클릭할 때마다 자동으로 클립보드에 저장됩니다. 별도의 “복사” 동작이 필요 없습니다.
• Eyedropper 위젯에서 RGB / HEX / HSL / CMYK / OKLCH 중 어느 형식으로 클립보드에 들어갈지 선택할 수 있습니다.
• 잡은 색의 시각 미리보기와 근접한 시스템 색상도 같이 보여 줍니다.

Eyedropper → 자동 클립보드 저장 → 클립보드 픽커에서 다시 꺼내기 — 흐름이 끊기지 않습니다. Mac 기본 디지털 컬러 미터처럼 따로 띄울 필요도, 매번 복사 단축키를 누를 필요도 없습니다.

클립보드가 색을 자동 인식합니다

fns의 클립보드 히스토리는 복사한 텍스트가 색 코드인지 자동으로 알아챕니다. 형식과 무관하게 인식합니다.

복사한 색을 히스토리에서 다시 꺼낼 때, 텍스트만 봐서는 어떤 색이었는지 기억하기 어렵습니다. fns는 항목 옆에 작은 색 칩을 띄워 줘서 한눈에 어떤 색인지 보입니다.

색만 모아 보기

키 하나로 클립보드 히스토리에서 색 코드만 필터링해서 볼 수 있습니다. 디자인 작업 중에 최근 쓴 색만 모아 보고 싶을 때, 텍스트·URL·코드 사이를 뒤지지 않아도 됩니다.

• 같은 픽커에서 color: 같은 필터 키워드 → 색 항목만 보임
• 색 이름으로 검색 — “blue”, “red” 검색하면 그 색 계열만 추려짐
• 비슷한 색끼리 시각적으로 묶여서 정렬

한 색을 다른 형식으로

같은 색을 다른 표기법으로 변환해서 꺼낼 수 있습니다. Figma에서 #FF5733을 복사한 다음 CSS에 rgb(...) 형태로 붙여 넣고 싶을 때, fns 클립보드 픽커에서 그 항목을 선택하고 단축키 한 번이면 자동 변환됩니다.

Figma(HSB)와 CSS(HSL/HEX/OKLCH) 사이를 오갈 때 매번 변환기를 띄우지 않아도 됩니다.

텍스트 확장과 묶기

자주 쓰는 브랜드 컬러는 텍스트 단축어로 등록합니다.

CSS, Figma의 색 입력창, 슬랙 메시지, 코드 에디터 어디에서든 같은 단축어가 그대로 작동합니다. 브랜드 가이드의 색을 매번 검색해서 복사하는 시간이 사라집니다.

매번 변환기를 띄우고 색 코드를 다른 형식으로 옮기던 시간, fns로 한 번 줄여 보세요.

색이 애초에 어디서 온 숫자인지 — RGB 세 채널과 2진수, HEX 표기의 기초가 궁금하다면 컴퓨터는 색을 어떻게 만들까: RGB, HEX, 2진수 이야기부터 읽어 보세요.