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는 실제 지각 데이터 기반 튜닝 → 색조 변경 시 애니메이션·테마 토큰·접근성 비율 예측 가능.
관련 도구
색맹 시뮬레이터
8가지 색각 이상(CVD)에 따라 이미지가 어떻게 보이는지 시뮬레이션.
색상00
CSS Box Shadow 생성기
여러 레이어로 CSS box-shadow를 디자인 — 실시간 미리보기 + CSS·Tailwind 출력.
색상00
컬러 포맷 변환기
어떤 색이든 HEX·RGB·HSL·HSV·OKLCH·CSS 변수로 한 번에 변환.
색상00
CSS 그라디언트 생성기
선형·방사형 CSS 그라디언트를 다중 색상 스톱으로 디자인하고 코드를 복사하세요.
색상00
컬러 팔레트 생성기
기준 색에서 여섯 가지 배색으로 조화로운 팔레트를 만드세요.
색상00
색상 대비 검사기
글자/배경 대비를 WCAG AA·AAA 기준으로 검사하세요.
색상00