hex · rgb · oklch · lab · display-p3

언제 쓰나

Figma 에서 받은 hex 를 Tailwind v4 의 oklch() 로 옮길 때, 디자인 토큰 한 다발을 한 번에 변환할 때, 또는 해외 디자인 시스템 사이트의 lab/p3 표기를 sRGB 로 떨어뜨려야 할 때 씁니다.

세 모드

• 단일 — 색 한 개를 hex / rgb / hsl / oklch / lab / display-p3 여섯 포맷으로 동시에 보여 줍니다. 각 셀 클릭으로 즉시 복사.
• 일괄 — 텍스트 또는 CSS 파일을 통째로 붙여넣으면 색 토큰만 정규식으로 추출해 표로 정리합니다. 한 번에 200 개까지.
• Tailwind v4 — Tailwind v3 config 또는 CSS 변수 정의 (--color-*) 를 받아 oklch() 로 마이그레이션합니다. 결과는 두 가지 — 원본 구조 유지(인라인) + @theme { } 블록(v4 권장 형식).

OKLCH 가 왜 필요한가

CSS Color 4 의 표준이고, Tailwind v4 의 기본 색공간이며, 무엇보다 인지적으로 균일한 hue 회전이 가능합니다. RGB / HSL 은 같은 hue 사이 간격이 달라 lighten / darken 시 회색 mud 가 생기지만, OKLCH 는 11-stop 스케일이 균등하게 떨어집니다.

sRGB 색역 밖 색

OKLCH · Lab 색공간은 사람 눈이 인식하는 색역이라 sRGB 보다 넓습니다. 일부 색은 display-p3 (P3) 에서만 정확히 표현됩니다. 이 경우:

• HEX 출력은 sRGB 안으로 chroma 가 클램프된 근사값 (대부분 큰 차이 없음)
• P3 RGB 컬럼이 원본을 표현
• "sRGB 색역 밖" 라벨로 표시

최신 Mac · iPhone · iPad 의 와이드 게멋 디스플레이에선 차이가 보입니다. 일반 PC 모니터는 거의 sRGB 라 차이 없음.

로컬 처리

culori 라이브러리 (이미 color-palette · contrast 가 사용 중) 의 클라이언트 산술. 일괄 모드의 정규식 토큰 추출도 페이지 안에서. 외부 라이브러리 추가 의존성 0KB.

이럴 땐 안 맞습니다

• Pantone 코드 변환 — Pantone 색은 라이선스 데이터가 필요해서 본 도구 미지원. 인쇄 색은 RGB↔CMYK 도구 (별도) 또는 인쇄소 자체 ICC 프로파일을 쓰세요.
• CMYK 변환 — 본 도구는 화면용 색 (sRGB / oklch / p3) 만. CMYK 는 인쇄 ICC 프로파일이 필요해 별도 도구로 분리 예정.
• Tailwind v4 의 다른 변경 사항 — theme.colors → @theme 변수 외에 corePlugins, darkMode 설정도 v3 → v4 마이그레이션이 필요한데 본 도구는 색만 다룹니다.