색상 코드 변환기

색상 코드 형식 종합 가이드

본 도구는 12가지 색상 형식을 동시에 표시·변환합니다. 각 형식은 사용처가 명확히 다르므로, 적재적소에 맞는 표기를 선택하면 협업과 유지보수가 쉬워집니다. 아래 예시는 모두 같은 색 #0891B2를 도구의 변환 함수로 계산한 값입니다(HEXA·RGBA·HSLA는 알파 50% 예시).

변환에서 자주 헷갈리는 점이 두 가지 있습니다. 첫째, HSL·HSV·HWB는 정수로 반올림해 표시하므로 HSL 값을 다시 HEX로 되돌리면 채널값이 몇 단계씩 달라질 수 있습니다. 기본색도 #0891B2 → hsl(192, 91%, 36%) → #088EAF로, 채널당 최대 3씩 바뀝니다 — 원본 색은 HEX나 RGB로 보관하세요. 둘째, CMYK는 잉크·용지 특성을 반영하는 ICC 프로파일 없이 RGB에서 단순 환산한 값이라 인쇄소의 실제 색과 다를 수 있습니다. 명함·인쇄물은 인쇄소가 지정한 프로파일로 디자인 툴에서 다시 변환하는 것이 안전합니다.

WCAG 색상 대비비 (접근성)

W3C가 정한 웹 접근성 표준 — 텍스트와 배경 색상의 명도 대비를 1:1 ~ 21:1 사이의 수치로 평가합니다. 한국 정보접근성 인증(KWCAG)·미국 ADA Title II 규칙·유럽 EAA 모두 WCAG 계열 기준을 채택합니다.

계산 공식: 대비비 = (밝은 색 휘도 + 0.05) ÷ (어두운 색 휘도 + 0.05). 여기서 상대 휘도 L = 0.2126 × R + 0.7152 × G + 0.0722 × B이고, R·G·B는 sRGB 감마를 풀어 선형값으로 바꾼 뒤 넣습니다. 초록 계수가 가장 크고 파랑이 가장 작아서, 같은 채도라도 초록·노랑 계열은 밝게, 파랑·보라 계열은 어둡게 계산됩니다.

예시: 도구 기본색 #0891B2에 흰 글자를 올리면 3.68 : 1로, 큰 글자·아이콘 기준 3:1은 넘지만 본문 기준 4.5:1에는 못 미칩니다. 같은 색 위에 검은 글자는 5.70 : 1로 AA를 통과합니다. 브랜드 색 버튼에 흰 글자를 꼭 써야 한다면 접근성 탭의 자동 추천처럼 색상각과 채도는 두고 명도만 내리면 되는데, 이 색은 HSL 명도 36% → 32%인 #077E9C(4.69 : 1)에서 처음 4.5:1을 넘습니다.

* 도구의 대비비 표시는 소수 둘째 자리에서 내림합니다. 반올림하면 4.495가 ‘4.50’으로 보이는데 판정은 미달이라 모순이 생기기 때문입니다.

색맹 시뮬레이션

색각 이상은 북유럽계 기준 남성 약 8%, 여성 약 0.5%가 갖고 있습니다 (아시아·아프리카계는 이보다 낮음). 한국은 남성 약 5.9%, 여성 약 0.4%로 남성 100만 명 이상 규모입니다 (질병관리청 국가건강정보포털). 본 도구는 선형 RGB에서 적색맹·녹색맹은 Machado 2009, 청색맹은 Brettel 1997 모델로 계산하고, 전색맹은 휘도만 남기는 방식으로 근사합니다.

위 4종은 완전 이색자(색맹) 기준입니다. 실제로 가장 흔한 유형은 이보다 변화가 약한 녹색약(Deuteranomaly, 남성 약 5%)으로, 색맹 시뮬레이션에서 구분이 어려운 조합은 녹색약 사용자에게도 부담이 됩니다. 대표적인 예가 ‘빨강 = 오류, 초록 = 성공’ 표시입니다. 빨강 #DC2626과 초록 #16A34A는 녹색맹 시뮬레이션에서 각각 #8F801B·#958951로 거의 같은 황갈색이 되고, 두 색끼리의 대비비도 1.46 : 1에 불과해 명도로도 구분되지 않습니다.

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

팔레트 탭의 조합은 모두 HSL 색상환에서 색상각(H)을 돌리거나 명도·채도를 단계적으로 바꿔 만듭니다. 아래 표는 기준색 #0891B2(hsl 192°, 91%, 36%)를 넣었을 때 도구가 실제로 내놓는 색입니다. 기준색도 HSL 정수값을 거쳐 다시 계산하므로 첫 색의 끝자리가 입력과 조금 다를 수 있습니다.

HSL로 색상각만 돌리면 명도(L) 값은 그대로지만 체감 밝기는 달라집니다. 위 삼각 조합의 세 색은 모두 HSL 명도 36%인데, 연두색 #8EAF08이 자홍색 #AF088E보다 훨씬 밝아 보이는 것이 그 예입니다(흰색 대비 2.53 : 1 대 6.46 : 1). 팔레트를 텍스트 배경으로 쓸 계획이라면 조합을 고른 뒤 각 색을 접근성 탭에서 한 번씩 확인하세요.

디자인 토큰·CSS 변수

Tailwind, shadcn/ui, MUI, Chakra 같은 디자인 시스템은 색을 이름 붙인 변수(토큰)로 관리합니다. 본 도구는 한 색상에서 11단계 스케일과 여러 형식의 CSS 변수를 자동 생성합니다.

:root {
  /* #0891B2 입력 시 실제 생성 예시 (일부) */
  --color-primary-50:  #f4f9fb;
  --color-primary-500: #0bc5f4;  /* 명도 정규화 단계 (L 50%) */
  --color-primary-900: #0a4351;

  /* 입력한 기준색 + 다중 형식 (color-mix·alpha 조작용) */
  --color-primary:     #0891b2;
  --color-primary-rgb: 8 145 178;
  --color-primary-hsl: 192 91% 36%;
}

500 단계는 입력색이 아니라 명도를 50%로 정규화한 값입니다 — 입력한 기준색 자체는 --color-primary로 함께 내보냅니다. 11단계는 HSL 명도를 97·94·86·76·66·50·42·34·26·18·10%로 두고 입력색의 채도에 단계별 배율을 곱해 만듭니다 — 밝은 쪽은 50 단계에서 절반(×0.5)까지, 어두운 쪽은 950 단계에서 ×0.8까지 채도를 낮춥니다. 공백으로 구분한 -rgb·-hsl 변수는 rgb(var(--color-primary-rgb) / 0.5)처럼 알파만 바꿔 쓰는 용도입니다. 다크 모드는 같은 변수 이름에 다른 값을 넣어 전환하면 컴포넌트 코드를 건드리지 않아도 됩니다.

Tailwind CSS 색상 시스템

Tailwind v4는 26개 기본 색상 × 11단계 = 총 286개 색상을 제공합니다 — slate, gray, zinc, neutral, stone에 v4.2+에서 추가된 taupe, mauve, mist, olive까지 무채색·저채도 9종, red부터 rose까지 유채색 17종. v4부터 색이 OKLCH로 정의되고, 커스텀 색상도 tailwind.config.js 대신 CSS의 @theme 블록에 CSS 변수로 선언합니다.

본 도구의 가장 가까운 Tailwind 매칭 기능은 입력한 색과 RGB 유클리드 거리가 가장 가까운 5개 클래스를 v4 팔레트(sRGB 변환값) 기준으로 추천합니다. 예를 들어 #0891B2는 cyan-600(#0092B8, 거리 10.0), sky-600(#0084D1, 거리 34.6), cyan-700(#007595, 거리 41.1) 순으로 가깝습니다. 거리 10 안팎인 cyan-600은 나란히 놓아야 차이가 보이는 정도지만, 거리가 30을 넘는 sky-600부터는 색조가 눈에 띄게 달라집니다. 가장 가까운 후보도 거리가 크다면 억지로 맞추기보다 기준색을 그대로 @theme에 등록하는 편이 낫습니다. RGB 거리는 계산이 단순한 대신 지각 차이와 완전히 비례하지 않는다는 점도 감안하세요.

그라디언트 디자인

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

• 비슷한 색상 조합 — 자연스럽고 부드러운 분위기
• 보색 조합 — 강렬하고 시선을 끄는 효과 (중간이 탁해지기 쉬워 보간 방식 선택이 중요)
• 3색 조합 — 풍부한 색감, 포스터·히어로 배경
• 같은 색의 명도 변화 — 세련되고 통일감 있는 분위기

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

활용 팁 5가지

1. 브랜드 컬러를 입력 → Tailwind 11단계 즉시 생성 → 그대로 디자인 시스템에 채택
2. 시안의 핵심 색상을 추출 탭으로 뽑고 → 접근성 탭에서 텍스트 색상과 대비비 검증
3. UI 상태 자동 생성(hover는 HSL 명도 −8%p, active는 −15%p)으로 버튼·링크 디자인 시간 절감
4. 브랜드 색상이 색맹 사용자에게 어떻게 보이는지 확인 → 명도/아이콘으로 보강
5. 인기 그라디언트 프리셋 9종을 시안 배경 제안용으로 빠르게 비교

자주 묻는 질문

참고 자료

• WCAG 2.2 (대비 기준은 2.1과 동일) — w3.org/TR/WCAG22 · WCAG 2.1
• Tailwind CSS v4 색상 — tailwindcss.com/docs/colors
• CSS Color Module Level 4 — w3.org/TR/css-color-4
• Oklab 원문 — bottosson.github.io/posts/oklab
• 색맹 시뮬레이션 모델 — Machado et al. 2009 · Brettel et al. 1997 · daltonlens.org 구현 리뷰
• 색각 이상 유병률 — 질병관리청 국가건강정보포털 ‘색각이상(색맹)’
• 한국 웹 접근성 인증 — wa.or.kr · 확인일 2026-07-26