색상 변환기 - HEX, RGB, HSL, CMYK 상호 변환 및 팔레트
디자이너와 프론트엔드 개발자는 서로 다른 색상 포맷을 자주 다룹니다. Figma에서는 HEX나 HSL을 쓰고, CSS에서는 rgb()나 hex를 작성하며, 인쇄물 작업 시에는 CMYK 수치가 필요합니다. 본 색상 변환기는 모든 주요 색상 모델 간의 상호 변환을 실시간으로 지원하며, 웹 접근성 가이드라인(WCAG)에 따른 텍스트 대비비(Contrast Ratio)를 함께 검증합니다.
이런 상황에서 사용하세요
- CSS 테마 및 디자인 시스템 구축: 피그마(Figma)에서 전달받은 HEX 코드를 CSS 커스텀 속성용 HSL이나 RGB 수치로 변환합니다.
- 웹 접근성(WCAG) 명도 대비비 점검: 배경색 위에 올릴 글자색이 WCAG AA 기준(4.5:1 이상)을 충족하는지 실시간으로 검사합니다.
- 인쇄용 CMYK와 웹용 RGB 동기화: 브로슈어나 명함용 CMYK 잉크 값을 웹사이트용 디지털 sRGB/HEX 코드로 손쉽게 환산합니다.
- Tailwind CSS 불투명도 채널 추출: Tailwind에서 투명도 조절(bg-opacity)이 가능한 RGB 채널 분리값을 도출합니다.
사용 방법 및 실무 가이드
- 색상 선택 또는 입력: 비주얼 컬러 피커를 클릭하거나 입력창에 HEX(#3b82f6) 또는 RGB 값을 직접 입력합니다.
- 실시간 색상값 확인: HEX, RGB, HSL, CMYK 포맷으로 자동 변환된 정확한 수치들을 확인합니다.
- 웹 접근성 대비비 확인: 선택한 색상 위에서 흰색 글자와 검은색 글자가 읽기 쉬운지(WCAG 합격 여부)를 점검합니다.
- CSS 코드 복사: 원하는 포맷 옆의 복사 버튼을 눌러 스타일시트나 디자인 토큰 파일에 바로 붙여넣습니다.
입출력 실무 예시
Input:
HEX: #3B82F6
Output:
RGB: rgb(59, 130, 246)
HSL: hsl(217, 91%, 60%)
CMYK: cmyk(76%, 47%, 0%, 4%)
WCAG Contrast on White: 3.4:1 (Fail)
WCAG Contrast on Black: 6.2:1 (Pass AA)
자주 묻는 질문 (FAQ)
Q. 프론트엔드에서 HEX 대신 HSL을 선호하는 이유는 무엇인가요?
A. HSL(색상, 채도, 명도)은 인간의 직관과 가장 잘 맞습니다. 버튼 호버 효과를 만들 때 색상값을 새로 찾을 필요 없이 명도(Lightness) 수치만 50%에서 60%로 올리면 일관된 테마 색상을 유지할 수 있기 때문입니다.
Q. 화면의 RGB 색상을 CMYK로 100% 똑같이 인쇄할 수 있나요?
A. 빛으로 표현되는 RGB의 색역(Color Gamut)이 잉크로 표현되는 CMYK보다 넓기 때문에, 화면에서 보이는 형광 파랑이나 네온 녹색 등은 인쇄 시 다소 톤이 가라앉아 보일 수 있습니다.
Q. 본문 텍스트의 웹 접근성(WCAG) 최소 대비비는 얼마인가요?
A. WCAG 2.1 AA 기준에 따르면 일반 본문 텍스트는 배경과의 명도 대비비가 최소 4.5:1 이상이어야 하며, 18pt 이상의 큰 글씨는 3.0:1 이상이어야 시각 장애인도 원활히 식별할 수 있습니다.
기술 및 보안 유의사항
- W3C CSS Color Module 국제 표준 수학 공식을 적용하여 변환 오차를 없앴습니다.
- sRGB 표준 상대 휘도(Relative Luminance) 알고리즘을 바탕으로 엄밀한 WCAG 명도 대비비를 계산합니다.
함께 사용하면 좋은 관련 도구