--color-primary: #06d6a0;bg-[#06d6a0]@theme {
--color-primary: oklch(78% 0.16 167);
}색상 변환기는 HEX, RGB, HSL, OKLCH 등 다양한 색상 공간 간 변환을 위한 무료 온라인 도구입니다. 시각적 피커, 이미지 팔레트 추출, WCAG 대비 검사기, 색맹 미리보기를 포함하며 브라우저에서 완전히 실행됩니다.
Color Tool이란?
7개 색상 공간(HEX, RGB, HSL, HSV, CMYK, LAB, OKLCH) 간 변환, 색상 조화 생성, 접근성을 위한 대비 비율 검사, 색각 이상 시뮬레이션, 이미지에서 팔레트 추출을 지원하는 종합 색상 유틸리티입니다.
일반적인 활용 사례
웹 개발을 위한 색상 선택 및 변환 — CSS나 Tailwind에 필요한 정확한 HEX, RGB, HSL 또는 OKLCH 값을 얻을 수 있습니다.
WCAG 접근성 가이드라인(AA/AAA) 또는 최신 APCA 표준을 충족하기 위해 배경색에 대한 텍스트 대비를 검사합니다.
이미지에서 주요 색상을 추출하여 통일된 디자인 팔레트를 구축하고, 보색, 유사색, 3색 조화를 생성합니다.
색상 공간
이 색상 도구는 7개의 색상 공간 간 변환, 조화 색상 생성, 대비 비율 검사(WCAG 및 APCA), 색맹 시뮬레이션, 이미지에서 팔레트 추출을 지원합니다. 16진수 계산은 [진법 변환기](/numbase)를, 이미지 처리는 [이미지 압축기](/image)를 참조하세요.
WCAG 2.1은 휘도 비율(1:1 ~ 21:1)을 사용하며 AA/AAA 기준이 있습니다. 널리 지원되지만 작은 텍스트나 다크 모드에서의 지각을 완전히 반영하지는 못합니다.
APCA는 WCAG 3의 후보로 극성을 고려한 Lc 점수를 사용합니다. 얇거나 작은 텍스트의 가독성과 더 잘 상관관계가 있습니다.
팁
- 스포이드 도구를 사용하여 화면의 어떤 픽셀에서든 색상을 선택할 수 있습니다(Chromium 브라우저).
- 팔레트 탭에 이미지를 드롭하면 중앙값 분할 양자화(median-cut quantization)로 6개의 주요 색상을 추출합니다.
- Tailwind v4는 지각적 부드러움을 위해 OKLCH로 색상을 출력합니다 — @theme 블록을 복사하여 해당 워크플로우에 맞추세요.