RGB와 HEX는 같은 sRGB 채널을 설명합니다
sRGB 색에는 빨강·초록·파랑 채널값이 있습니다. 전통적인 rgb()는 각 채널을 0~255로 쓰고 HEX는 같은 바이트를 16진수로 씁니다. #336699는 rgb(51 102 153)입니다. 표기를 바꾼다고 다른 색공간으로 이동하지 않습니다.
짧은 표기와 익숙한 전달 관행이 중요하면 HEX를 씁니다. CSS 가독성, 채널 계산, 알파 문법이 필요하면 rgb()가 편리합니다. 둘 다 화면용 가산 혼합 모델이며 채널 빛을 더 방출할수록 흰색에 가까워집니다.
HSL은 직관적이지만 명도가 지각적이지 않습니다
HSL은 sRGB를 색상 각도, 채도, 명도로 재배열합니다. “이 파랑을 30도 돌리기”나 “채도 낮추기”를 표현하기 쉽습니다. 일상 언어와 닮은 조작부라 디자이너가 빠르게 배웠습니다.
문제는 HSL의 형태가 사람의 시각이 아니라 RGB에서 나온다는 점입니다. 완전히 선명한 노랑과 파랑이 모두 HSL 명도 50%여도 노랑이 훨씬 밝아 보입니다. HSL 명도만 바꾼 단계는 눈에 간격이 고르지 않고 대비도 예측하기 어렵습니다.
HSL 명도는 수학적 원통 안의 위치이며 같은 지각 밝기를 약속하지 않습니다.
OKLCH는 지각 밝기, 채도, 색상을 나눕니다
OKLCH는 Oklab의 원통형 표현입니다. L은 지각 밝기, C는 채도, H는 색상 각도에 가깝습니다. 색상과 채도를 유지하며 L을 바꾸면 HSL보다 눈에 고른 밝기 단계를 만들기 쉽습니다.
테마 토큰, 데이터 단계, 브랜드색과 가까운 접근성 변형에 유용합니다. 그래도 검사는 필요합니다. 대비는 최종 렌더링 색으로 계산하고 매우 높은 채도는 화면 색역 밖에 있을 수 있습니다. 브라우저가 표시 가능한 색으로 매핑할 수 있습니다.
색공간과 색역은 관련 있지만 다릅니다
색공간은 좌표와 기준을 정의하고 색역은 기기나 인코딩이 표현할 수 있는 부분집합입니다. sRGB는 널리 지원되지만 Display P3보다 작습니다. OKLCH 표기는 sRGB 밖의 색도 설명하지만 사용자가 보는 색은 브라우저와 화면이 렌더링할 수 있는 범위입니다.
넓은 호환성이 필요하면 sRGB 안전값 또는 폴백을 두고 적절한 CSS 기능 쿼리 안에서 넓은 색역 색을 향상값으로 제공합니다. 브랜드 핵심색은 광색역 디자인 모니터뿐 아니라 일반 sRGB 화면에서도 확인하세요.
각 형식이 잘하는 곳에 사용하세요
원본 토큰은 실제 결정에 도움이 되는 형식으로 관리합니다. 밝기와 채도 관계를 유지하려면 OKLCH가 유용합니다. 도구나 전달 과정이 sRGB를 요구하면 HEX 또는 rgb()를 내보냅니다. 지각적 균일성이 핵심이 아닌 빠른 색상 수정에는 HSL이 편합니다.
반올림한 값을 도구 사이에서 반복 복사하지 마세요. 충분한 정밀도의 원본 하나를 저장하고 거기서 출력값을 만들며 최종 CSS를 대상 브라우저에서 확인합니다. 색상 관리는 전체 파이프라인이므로 좋은 좌표도 프로필 없는 이미지와 검사하지 않은 화면 맥락을 고칠 수는 없습니다.
색공간 선택 체크리스트
- HEX와 RGB를 같은 sRGB 색의 표기로 다룹니다.
- HSL 명도가 지각적으로 고르다고 가정하지 않습니다.
- OKLCH 단계도 대비와 색역을 검사합니다.
- 광색역 값에는 의도적인 폴백 전략이 있습니다.
- 정밀한 원본 하나에서 반올림 전달값을 만듭니다.
- 최종 CSS를 대상 브라우저와 일반 화면에서 검사합니다.
자주 묻는 질문
OKLCH가 HEX보다 좋은가요?
해결하는 일이 다릅니다. OKLCH는 지각적 조작을 제공하고 HEX는 짧은 sRGB 표기입니다. OKLCH로 관계를 설계하고 호환 가능한 HEX를 배포·문서화할 수 있습니다.
HSL 명도 50%인 두 색이 왜 다르게 보이나요?
HSL 명도는 RGB 형태에서 나오지만 사람 눈은 파장마다 민감도가 크게 다릅니다. 같은 HSL 숫자가 같은 지각 휘도는 아닙니다.
모든 브라우저가 OKLCH를 지원하나요?
현대 브라우저는 지원하지만 대상 환경과 색역 매핑을 검사해야 합니다. 사용자나 도구 체인에 필요하다면 sRGB 폴백을 제공하세요.