HEX ↔ RGB ↔ HSL 색상 변환기 | CSS 컬러 유틸리티

HEX ↔ RGB ↔ HSL Converter

실시간으로 색상 코드를 변환하고 미리보기를 통해 확인하세요.

PREVIEW & PICK #2196f3

# HEX

RGB

HSL

🌓 Color Variants (Lighter & Darker)

📖 사용 방법

Color Picking: 좌측의 대형 프리뷰 박스를 클릭하면 컬러 피커가 열려 시각적으로 색상을 선택할 수 있습니다.
Sync: 컬러 피커, 팔레트, 텍스트 입력 중 무엇을 사용해도 모든 수치가 실시간으로 동기화됩니다.
Variants: 선택한 색상의 명도별 변환 수치를 함께 보여주어 디자인 작업 시 편리하게 활용 가능합니다. (우측 패널)
변환된 코드는 바로 복사하여 CSS에서 사용할 수 있습니다.

색상 변환 및 팔레트 가이드: 디자인의 언어, 컬러

HEX ↔ RGB ↔ HSL 색상 변환기는 디자인 시스템과 웹 개발 사이의 가교 역할을 하는 도구입니다. 다양한 기기와 브라우저 환경에서 동일한 색상을 구현하고, 상황에 맞는 최적의 색상 포맷을 선택할 수 있도록 도와줍니다.

1. HEX, RGB, HSL: 어떤 것을 사용해야 할까요?

HEX (#FFFFFF): 16진수 표기법으로, 웹 디자인에서 가장 널리 사용됩니다. 코드가 짧고 직관적이지만, 투명도 조절이나 실시간 색상 변화를 코드로 구현하기에는 다소 불편함이 있습니다.

RGB (rgb(255, 255, 255)): 빛의 3원색인 빨강, 초록, 파랑의 조합입니다. rgba() 형식을 통해 투명도(Alpha)를 쉽게 조절할 수 있어 오랫동안 개발자들에게 사랑받아온 포맷입니다.

HSL (hsl(0, 0%, 100%)): 색상(Hue), 채도(Saturation), 명도(Lightness)를 기준으로 합니다. 인간이 색을 인식하는 방식과 가장 유사하여, CSS 변수와 조합했을 때 가장 강력한 위력을 발휘합니다.

2. HSL 포맷의 강력한 장점

현대적인 CSS 아키텍처에서는 HSL 포맷 사용을 적극 권장합니다. 예를 들어 메인 컬러를 --primary-h: 210; --primary-s: 50%; --primary-l: 60%;로 설정해두면, 단순히 명도(L) 값만 조절하여 호버 효과용 밝은 색상이나 비활성용 어두운 색상을 수식만으로 생성할 수 있습니다. 본 변환 도구는 모든 색상을 HSL로 정확히 변환해 주므로 이러한 고급 테마 시스템 구축이 훨씬 수월해집니다.

3. 컬러 변형(Variants) 활용법

디자인 작업 시 하나의 기준 색상만으로는 부족합니다. 배경, 테두리, 강조 텍스트 등을 위해 기준 색상의 밝기 변형이 필요합니다. 우측의 Color Variants 패널은 여러분이 선택한 색상을 기준으로 가장 조화로운 밝기별 팔레트를 자동으로 생성해 줍니다. 이를 통해 디자인의 통일성을 유지하면서도 시각적인 풍부함을 더할 수 있습니다.

4. 실무 활용 팁

디자인 시안(피그마, 어도비 XD 등)에서 HEX 코드를 가져와 본 도구에 입력하세요. 그 후 프로젝트의 성격에 맞춰 RGB나 HSL로 변환하여 CSS 파일에 붙여넣으면 됩니다. 실시간 프리뷰를 통해 색감이 정확한지 즉시 확인하고, 하단의 사용 가이드를 참고하여 효율적인 컬러 워크플로우를 구축해 보세요.