색상 변환기

색상 변환기란?

색상 변환기는 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 액센트 세트로 확장할 때 유용합니다.

자주 묻는 질문