데이터는 서버로 전송되지 않습니다 — 모든 처리는 브라우저에서 이루어집니다
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);
}

색상 변환기는 HEX, RGB, HSL, OKLCH 등 다양한 색상 공간 간 변환을 위한 무료 온라인 도구입니다. 시각적 피커, 이미지 팔레트 추출, WCAG 대비 검사기, 색맹 미리보기를 포함하며 브라우저에서 완전히 실행됩니다.

색상 변환 정보

이 색상 도구는 7개의 색상 공간 간 변환, 조화 색상 생성, 대비 비율 검사(WCAG 및 APCA), 색맹 시뮬레이션, 이미지에서 팔레트 추출을 지원합니다. 16진수 계산은 [진법 변환기](/numbase)를, 이미지 처리는 [이미지 압축기](/image)를 참조하세요.

색상 공간
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 점수를 사용합니다. 얇거나 작은 텍스트의 가독성과 더 잘 상관관계가 있습니다.

팁

  • 스포이드 도구를 사용하여 화면의 어떤 픽셀에서든 색상을 선택할 수 있습니다(Chromium 브라우저).
  • 팔레트 탭에 이미지를 드롭하면 중앙값 분할 양자화(median-cut quantization)로 6개의 주요 색상을 추출합니다.
  • Tailwind v4는 지각적 부드러움을 위해 OKLCH로 색상을 출력합니다 — @theme 블록을 복사하여 해당 워크플로우에 맞추세요.

이미지에서 색상을 추출할 수 있나요?

네. 팔레트 추출 영역에 이미지를 드래그 앤 드롭하면 주요 색상을 얻을 수 있습니다. 색각 이상 시뮬레이션(제1, 2, 3색각)도 가능합니다.

관련 도구

이미지 압축기진법 변환기