색상 변환기

이런 작업에 씁니다

디자인 시안의 HEX 색상을 CSS의 RGB/HSL 값으로 바꾸거나, 기존 색상과 비슷한 Tailwind 색상명을 찾을 때 사용합니다. 다크모드나 hover 색상을 만들 때 HSL 값을 기준으로 밝기만 조절하면 일관된 색상 변형을 만들 수 있습니다.

색상 변환기란?

색상 변환기는 HEX, RGB, HSL, Tailwind CSS 클래스 등 다양한 형식으로 표현된 색상값을 상호 변환하는 도구입니다. 디자이너가 제공한 HEX 코드를 CSS hsl() 함수로 변환하거나, Tailwind 클래스에 해당하는 정확한 색상값을 확인하는 등 실무에서 자주 발생하는 색상 변환 작업을 빠르게 처리합니다.

색상 모델마다 활용 목적이 다릅니다. HEX는 디자인 도구와 CSS에서 가장 널리 쓰이고, HSL은 밝기와 채도를 직관적으로 조절할 때 유리하며, RGB는 프로그래밍에서 색상을 수치로 다룰 때 적합합니다. 이 도구는 세 형식을 즉시 변환하고 WCAG 접근성 기준 대비 비율도 제공합니다.

사용 방법

1. 색상값 입력 — HEX(#3b82f6), RGB(rgb(59, 130, 246)), HSL(hsl(217, 91%, 60%)) 중 알고 있는 형식으로 입력합니다. 또는 색상 피커로 원하는 색상을 직접 선택합니다.
2. 자동 변환 확인 — 입력 즉시 나머지 모든 형식으로 변환된 값이 표시됩니다.
3. Tailwind 클래스 확인 — 입력한 색상에 가장 가까운 Tailwind CSS 색상 클래스(예: blue-500)가 표시됩니다.
4. 명도/채도 변화 — Tints & Shades 영역에서 동일 색조의 밝기 변형을 확인하여 hover/disabled 상태별 색 설계에 활용합니다.
5. 복사 — 원하는 형식의 값을 복사 버튼으로 클립보드에 복사합니다.

실무 활용 시나리오

• 디자인 핸드오프: Figma 색상을 개발 코드용 HEX/RGB/HSL로 즉시 변환합니다.
• 테마 시스템 구축: 기본 색상에서 명도/채도 변형과 조화 팔레트를 빠르게 만듭니다.
• 프론트엔드 구현: Tailwind 근접 색상을 찾아 클래스 선택 시간을 줄입니다.

색상 작업에서 놓치기 쉬운 것

• HEX 3자리와 6자리를 혼동해 의도와 다른 색이 적용될 수 있습니다.
• HSL의 l(lightness)와 HSV의 v(value)를 같은 개념으로 보면 보정 값이 어긋납니다.
• 디자인 툴 색공간(sRGB 외)과 웹 색공간 차이를 고려하지 않으면 미세한 색차가 생길 수 있습니다.

각 영역 활용법

• Quick Palette: 자주 쓰는 기준 색을 빠르게 선택하는 영역입니다.
• Tints & Shades: 동일 Hue에서 밝기 변형을 확인해 상태별 색(hover/disabled) 설계에 활용합니다.
• Color Harmonies: 보색/유사색/삼원색 조합을 UI 액센트 세트로 확장할 때 유용합니다.

텍스트 색상을 정할 때 — WCAG 대비 비율 기준

배경과 글자 색을 정할 때 감으로 고르면 저시력 사용자와 야외 화면에서 읽기 어려운 조합이 나오기 쉽습니다. WCAG(웹 접근성 지침)은 대비 비율을 수치 기준으로 정해두었고, 이 도구가 계산해주는 대비 비율을 아래 기준과 비교하면 됩니다.

예를 들어 흰 배경(#ffffff)에 회색 글자를 쓸 때 #999999는 2.85:1로 AA에 미달하고, #767676부터 4.54:1로 통과합니다. "연한 회색 안내 문구"가 접근성 심사에서 가장 자주 걸리는 지점입니다.

다크모드 색상은 왜 반전만으로 안 되는가

밝은 테마의 색을 그대로 반전하면 채도가 높은 색이 어두운 배경에서 시각적으로 진동하는 문제가 생깁니다. 실무에서는 HSL 기준으로 명도(L)만 올리는 것이 아니라 채도(S)를 함께 낮추는 방식을 씁니다. 예를 들어 라이트 모드의 파란 버튼 hsl(217, 91%, 60%)를 다크 모드로 옮길 때는 hsl(217, 70%, 65%)처럼 채도를 20%p 정도 내려야 배경과의 관계가 자연스럽습니다. 이 도구의 HSL 출력을 기준으로 S와 L을 조정해보면 됩니다. HEX·RGB·HSL 세 모델의 수학적 관계와 변환 공식은 HEX·RGB·HSL 색상 체계 가이드에서 다룹니다.

자주 묻는 질문