🎨 색상 코드 변환기

색상 코드 형식 종합 가이드

본 도구는 12가지 색상 형식을 동시에 표시·변환합니다. 각 형식은 사용처가 명확히 다르므로, 적재적소에 맞는 표기를 선택하면 협업과 유지보수가 쉬워집니다.

WCAG 색상 대비비 (접근성)

W3C가 정한 웹 접근성 표준 — 텍스트와 배경 색상의 명도 대비를 1:1 ~ 21:1 사이의 수치로 평가합니다. 한국 정보접근성 인증, 미국 ADA, 유럽 EAA 모두 동일 기준을 따릅니다.

색맹 시뮬레이션

전 세계 인구의 약 8% 남성, 0.5% 여성이 색각 이상을 갖고 있습니다. 한국 성인 남성 약 30만 명이 영향을 받습니다. 본 도구는 표준 행렬 변환 기반으로 4가지 유형을 동시에 시뮬레이션합니다.

팔레트 이론 (색상환 기반 8가지 조합)

디자인 토큰·CSS 변수

현대 웹 개발의 표준 — Tailwind, shadcn/ui, MUI, Chakra 모두 동일한 패턴을 따릅니다. 본 도구는 한 색상에서 11단계 스케일과 다양한 형식의 CSS 변수를 자동 생성합니다.

:root {
  --color-primary-50:  #effbff;
  --color-primary-500: #3ec8ff;  /* 기준 */
  --color-primary-900: #06384a;

  /* 다중 형식 (color-mix·alpha 조작용) */
  --color-primary:     #3ec8ff;
  --color-primary-rgb: 62 200 255;
  --color-primary-hsl: 195 100% 62%;
}

장점: 다크 모드 쉽게(변수만 교체) · 디자인 일관성 · 유지보수 용이 · 디자인 시스템 표준

Tailwind CSS 색상 시스템

Tailwind는 22개 기본 색상 × 11단계 = 총 242개 색상을 제공합니다 — slate, gray, zinc, neutral, stone (회색 5종), red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose (유채색 17종).

본 도구의 가장 가까운 Tailwind 매칭 기능은 입력한 HEX와 RGB 유클리드 거리가 가장 가까운 5개 클래스를 자동 추천합니다. 디자이너가 시안에서 정한 색을 개발자가 Tailwind 클래스로 옮길 때 매우 유용합니다.

그라디언트 디자인

CSS는 3가지 그라디언트 함수를 제공합니다 — linear-gradient (직선 방향), radial-gradient (원형), conic-gradient (회전).

접근성 주의: 그라디언트 위 텍스트는 가장 어두운/밝은 부분 기준으로 대비비를 확인하세요. 본 도구의 10단계 색상 미리보기가 전 구간 색상을 보여주므로 가독성 검증에 활용 가능합니다.

활용 팁 5가지

자주 묻는 질문 (FAQ)

관련 도구

참고 자료

• WCAG 2.1 — w3.org/WAI/WCAG21
• Tailwind Colors — tailwindcss.com/docs/customizing-colors
• CSS Color Module Level 4 — w3.org/TR/css-color-4
• OKLCH 제안 — bottosson.github.io/posts/oklab
• 한국 웹 접근성 인증 — wa.or.kr