색상 미리보기
HEX
#4f46e5
RGB
rgb(79, 70, 229)
HSL
hsl(243, 75%, 59%)
HSV
hsv(243, 69%, 90%)
도구 설명
색상 변환기 정보
Color Converter는 HEX, RGB, HSL, HSV 사이에서 색상 값를 변환해 프런트엔드 CSS, 디자인 전달, 테마 토큰 정리에 도움을 줍니다.
#4f46e5, rgb(...), hsl(...)을 입력하면 색상을 복사하기 쉬운 여러 형식으로 통일합니다.
Color Converter 사용 방법
- HEX, RGB, RGBA, HSL, HSLA 색상 값를 붙여 넣습니다.
- 변환한 뒤 HEX, RGB, HSL, HSV 출력을 확인합니다.
- 색상 미리보기로 색상을 확인하고 하나의 형식 또는 모든 형식를 복사합니다.
사용 사례
- 디자인 HEX 값를 CSS rgb() 또는 hsl()로 변환합니다.
- HSL에서 명도와 채도를 조정해 호버 상태 색을 시험합니다.
- 테마를 정리하면서 색상 토큰 값을 통일합니다.
Color 형식와 주의점
HEX, RGB, HSL, HSV는 같은 색상를 다른 coordinates로 표현합니다. 이 변환기는 RGB 색상 자체를 유지하며 RGBA/HSLA 입력의 alpha는 허용하지만 출력에는 보존하지 않습니다.
- 3자리 HEX는 6자리 HEX로 확장됩니다.
- RGB 채널은 0에서 255 사이여야 합니다.
- HSL은 S/L에 percentages를 쓰고 hue는 0에서 360 degrees로 순환합니다.
- HSV는 색상 선택기에서 흔하고 HSL은 CSS 테마 조정에 더 편합니다.
색상 변환 자주 묻는 질문
- HEX to RGB와 RGB to HEX를 지원하나요?
- 네. HEX 입력은 RGB/HSL/HSV를 만들고 RGB 입력은 HEX/HSL/HSV를 만듭니다.
- 왜 alpha가 result에 없나요?
- 이 도구는 불투명한 색상 변환에 집중하므로 RGBA/HSLA의 알파 값은 무시됩니다.
- Colors가 업로드되나요?
- 아니요. Parsing, conversion, 미리보기, copy는 브라우저 로컬에서 실행됩니다.
색상 변환과 가독성
형식 변환은 대비를 보장하지 않습니다. 본문, 버튼, 링크에 쓰기 전 실제 배경에서 WCAG 대비, 브랜드 적합성, UI 상태를 확인하세요.
CSS 색상 형식 선택법
같은 색상도 HEX, RGB, HSL, HSV로 쓸 수 있지만 유지보수 작업마다 적합한 형식이 다릅니다.
- 디자인 전달과 안정적인 테마 토큰에는 간결한 HEX가 좋습니다.
- 투명도, 변수 또는 동적 조합이 필요하면 CSS rgb()나 hsl()이 편리합니다.
- Hover, active, 더 밝고 어두운 변형를 만들 때는 원본 RGB보다 HSL의 hue, saturation, lightness가 이해하기 쉽습니다.
배포 전 accessibility 색상 checks
색상 변환은 값의 동등성만 보장하며 텍스트 가독성, 상태 명확성, 대비 기준 준수를 보장하지 않습니다.
- 본문과 버튼 텍스트는 실제 배경에서 WCAG 대비 기준으로 확인합니다.
- 오류, 성공, 비활성 상태를 색상만으로 표현하지 말고 텍스트, 아이콘, 형태 변화를 함께 씁니다.
- 브랜드 색상을 링크나 포커스 링에 쓸 때 호버, 활성, 비활성, 선택 상태도 검증합니다.