HEX/RGB → OKLCH 변환 + 슬라이더 편집. CSS Color 4의 지각적 균일 컬러 공간을 시각화합니다.
미리보기
코드
색조 그라데이션 (H 0°~360°)

OKLCH 컬러 변환기 사용법

  1. HEX 코드를 입력하거나 컬러 피커로 색을 선택합니다.
  2. L (Lightness), C (Chroma), H (Hue) 슬라이더로 미세 조정합니다.
  3. 실시간 미리보기와 변환된 코드(HEX·RGB·OKLCH)를 확인합니다.
  4. 📋 코드 복사로 CSS oklch() 함수를 가져갑니다.

주요 기능

  • sRGB ↔ OKLab ↔ OKLCH 양방향 정확 변환 (D65 백색점)
  • L·C·H 슬라이더로 인지적 균일 편집
  • 같은 L·C에서 H만 회전한 색조 바 시각화
  • CSS oklch() 함수 즉시 복사
  • sRGB 영역 밖 색상도 표시(클램핑 후)

활용 예시

  • 디자인 시스템 — 톤은 같고 밝기만 다른 셰이드를 정확히 생성
  • 접근성 개선 — L 값으로 대비 직관적 조정
  • 그라데이션 품질 향상 — RGB 보간 시 회색 띠 → OKLCH로 채도 유지
  • Tailwind v4 / Open Props — 모던 CSS 변수에 직접 활용
  • 다크모드 변환 — L만 반전해 채도 보존

OKLCH가 뭔가요? 왜 중요한가요?

OKLCH는 2020년 Björn Ottosson이 발표한 OKLab 컬러 공간의 원통형 좌표(L=Lightness·C=Chroma·H=Hue)입니다. HSL과 달리 인간 시각에 균일해서 L 값이 같으면 어떤 색조든 같은 밝기로 보입니다. HSL에서 노랑이 파랑보다 훨씬 밝아 보이던 문제가 사라지죠. CSS Color Module Level 4로 표준화되어 모든 모던 브라우저(Chrome 111+, Safari 15.4+, Firefox 113+)에서 oklch() 함수가 네이티브 지원됩니다. Tailwind v4가 기본 색상 체계로 채택했습니다.

자주 묻는 질문

OKLCH와 HSL은 뭐가 다른가요?

HSL은 RGB 직접 변환이라 같은 L 값이어도 색조에 따라 밝기가 다르게 보입니다(노랑은 밝고 파랑은 어둡게). OKLCH는 인간 시각 모델 기반이라 L 값이 같으면 어떤 색조든 동일한 밝기로 보입니다.

모든 OKLCH 값이 화면에 표시되나요?

아니요. C(채도)가 매우 높으면 sRGB로 표현 불가능한 색이 됩니다(P3·Rec.2020 와이드 컬러). 본 도구는 자동 클램핑해서 가장 가까운 sRGB 색을 표시합니다.

구형 브라우저 호환은?

2023년 이전 브라우저는 oklch() 함수를 지원하지 않습니다. 그래서 HEX 코드도 함께 제공하니 백업으로 쓰세요. PostCSS 플러그인으로 빌드 시 변환할 수도 있습니다.

완전 무료인가요?

네, 모든 변환은 브라우저에서 진행되며 회원가입 없이 무제한 사용 가능합니다.