OKLCH 컬러 피커
OKLCH는 CSS Color 4가 명도·채도·색조를 눈이 실제로 기대하는 방식으로 동작하게 만드는 색 공간: 고정 L+C에서 색조만 옮겨도 체감 밝기 유지, 옛 HSL은 극적으로 변동. 이 피커는 세 채널 + 알파 노출, 정확한 CSS oklch() 형식, 등가 sRGB hex/rgb/hsl, OKlab a/b 분해, 그리고 색이 너무 채도 높아 sRGB 모니터 gamut 밖일 때 경고(브라우저는 그 경우 가장 가까운 sRGB 색으로 폴백).
—
프리셋
#0099f0
sRGB 색역sRGB 밖 (클립됨)
- oklch()oklch(65.0% 0.180 240.0)
- Hex (클립됨)#0099f0
- rgb()rgb(0, 153, 240)
- hsl()hsl(202, 100%, 47%)
- oklab()oklab(65.0% -0.090 -0.156)
명도 0~1 (0 = 검정, 1 = 흰색). 채도 0은 무채색; 0.3 초과는 sRGB 밖 자주 발생.
사용법
- L·C·H 드래그로 색 맞추기 — gamut 뱃지 주시.
- 스크린 스와치를 정확히 원하면 뱃지 호박색일 때 채도 약간 낮추기.
- 스타일시트에 필요한 형식 복사: 현대 스택은 oklch() 문자열로.
자주 묻는 질문
- 색이 왜 "sRGB 밖"이라고 나옴?
- 표준 모니터는 인간 가시 색의 제한된 일부(sRGB)만 표시. OKLCH는 더 넓은 지각적 균등 공간 → sRGB 화면에 안 들어가는 색 지정 가능. 브라우저는 가장 가까운 sRGB 매치로 클립 — hex 미리보기는 클립된 결과 표시.
- oklch()를 hsl()보다 선호하는 이유?
- HSL은 RGB 기반이라 색조에 따라 명도 불균일(같은 L에서 노랑이 파랑보다 훨씬 밝게 보임). OKLCH는 실제 지각 데이터 기반 튜닝 → 색조 변경 시 애니메이션·테마 토큰·접근성 비율 예측 가능.
이 주제의 가이드
관련 도구
CSS color-mix() 미리보기 (보간 공간 비교)
모던 CSS `color-mix()` 함수가 두 색을 보간 공간(srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear)에 따라 어떻게 다르게 섞는지 한눈에 비교 — 실시간 스와치, 계산된 hex, 공간별 전체 그라데이션, 그리고 복사 가능한 CSS.
색상 0 0
색상 이름 찾기
임의의 hex/RGB 색상에 가장 가까운 CSS·Tailwind·XKCD 색상 이름을 OKLab 인지 거리 기준으로 정렬해 표시.
색상 0 0
컬러 포맷 변환기
어떤 색이든 HEX·RGB·HSL·HSV·OKLCH·CSS 변수로 한 번에 변환.
색상 0 0
색상 거리 (ΔE)
두 색의 지각적 차이를 숫자로 — CIE76 ΔE·CIEDE2000 ΔE·일반 RGB 거리, 나란한 스와치.
색상 0 0
컬러 보간 / 그라데이션 스텝
두 헥스 컬러 → N개 이산 중간 스텝 — sRGB·linear RGB·OKLab·HSL — 옵션 이징.
색상 0 0
CSS 그라디언트 생성기
선형·방사형 CSS 그라디언트를 다중 색상 스톱으로 디자인하고 코드를 복사하세요.
색상 0 0