색상 변환기 & 피커 - HEX, RGB, HSL, OKLCH

* 입력한 콘텐츠는 서버로 전송되지 않습니다. 모든 계산은 브라우저에서 직접 수행됩니다

시뮬레이션:

HEX

RGB

HSL

HSV

CMYK

LAB

OKLCH

HSV는 참고용입니다. CSS에는 hsv() 함수가 없으므로 HSL을 사용하세요.

CSS 변수

--color-primary: #06d6a0;

Tailwind 유틸리티

bg-[#06d6a0]

Tailwind v4 @theme

@theme {
  --color-primary: oklch(78% 0.16 167);
}

색상 변환기는 웹, 인쇄, 디자인에서 사용하는 형식 간에 같은 색상을 변환해 줍니다. CSS용 HEX, 실시간 조정을 위한 RGB/HSL, 인쇄용 CMYK, 지각적 균일성을 위한 LAB/OKLCH 등을 지원합니다.

색상 공간

HEX — 간결한 6/8자리 RGB 표기. CSS의 기본 형식입니다.

RGB — 가산혼합 원색 0~255. 디스플레이 픽셀에 직접 대응합니다.

HSL — 색상/채도/명도. RGB보다 사람이 이해하기 쉽습니다.

HSV — 색상/채도/값. 디자인 도구에서 널리 사용되지만 CSS 함수는 아닙니다.

CMYK — 인쇄에 사용되는 감산혼합 원색. RGB에서 변환 시 근사치입니다.

LAB — 지각적 균일 색공간. 숫자 간 거리가 시각적 거리와 거의 일치합니다.

OKLCH — 현대적 지각 색공간. Tailwind v4와 CSS Color Module Level 4에서 권장합니다.

명암비 (WCAG vs APCA)

WCAG 2.1은 휘도 비율(1:1~21:1)을 사용하며 AA/AAA 기준이 있습니다. 널리 지원되지만 작은 텍스트나 다크 모드를 완전히 반영하지 못합니다.

APCA는 WCAG 3의 후보로, 극성을 인식하는 Lc 점수를 사용합니다. 얇거나 작은 텍스트의 가독성과 더 잘 상관합니다.