색상 변환기
HEX 색상 코드를 입력하여 개별 빨강, 초록, 파랑 채널 값과 함께 RGB 및 HSL 변환 결과를 확인하세요.
이 색상 변환기 사용 방법
- 헥스 색상 코드 입력
헥스 색상 코드 필드에 6자리 헥스 코드를 입력하세요 (예: FF6B35 또는 00FF88). # 기호는 제외합니다.
- RGB 값 확인
빨강(Red), 초록(Green), 파랑(Blue) 채널 결과에 각 성분의 0~255 값이 표시됩니다.
- HSL 출력 확인
색상 조절에 유용한 색상(0~360°), 채도, 명도에 대한 HSL 결과를 확인하세요.
이 색상 변환기의 작동 원리
이 도구는 16진수(Hex) 색상 코드를 RGB(빨강, 초록, 파랑) 및 HSL(색상, 채도, 명도) 표현으로 변환합니다. 각 16진수 쌍은 8비트 채널 값(0~255)에 매핑되며, HSL 변환에는 표준 색 공간 수학이 사용됩니다.
R = hex[0:2] → 10진수; G = hex[2:4] → 10진수; B = hex[4:6] → 10진수 Hex #FF6B35 → RGB(255, 107, 53) → HSL(16, 100%, 60%).
헥스 000000 → RGB(0, 0, 0) → HSL(0, 0%, 0%) — 순수 검정.
헥스 FFFFFF → RGB(255, 255, 255) → HSL(0, 0%, 100%) — 순수 하양. 헥스 808080 → RGB(128, 128, 128) → HSL(0, 0%, 50%) — 중간 회색.
- ✓ 입력값은 유효한 6자리 16진수 색상 코드입니다.
- ✓ 이 버전에서는 알파 채널이 지원되지 않습니다.
- CMYK 변환에는 색상 프로필이 필요하며 여기에는 포함되지 않습니다.
색상 모델 이해하기
HEX, RGB, HSL은 동일한 색상을 설명하는 서로 다른 방식입니다. HEX는 RGB를 6자리 16진수 문자열로 인코딩하며, 각 문자 쌍은 하나의 8비트 채널(0~255)을 나타냅니다. RGB는 화면에서 방출되는 가산 혼합의 삼원색을 세 개의 숫자로 표현합니다. HSL(색상, 채도, 명도)은 원통형 모델입니다. 색상은 색상환의 각도(0° 빨강, 120° 초록, 240° 파랑)이며, 채도는 색의 강도, 명도는 밝기를 의미합니다. 디자이너는 프로그래밍 방식으로 색상을 조정할 때 HSL을 선호하는 경우가 많습니다. 명도만 변경하면 색상을 유지하면서 어둡게 하거나 밝게 할 수 있고, 채도를 조절하여 선명도를 조정할 수 있기 때문입니다.
색상 변환의 개발자 활용 사례
개발자는 디자인 시스템 구축, 테마 구현, 색상 팔레트 생성 및 CSS 디버깅 시 색상을 변환합니다. 디자인 토큰은 종종 색상을 헥스 형식으로 저장하며, 이를 RGB나 HSL로 변환하면 불투명도 오버레이나 접근성 대비 확인과 같은 런타임 계산이 가능해집니다. 테마 전환기에서는 HSL을 사용하여 기본 색상에서 더 밝거나 어두운 변형을 파생시켜야 할 수도 있습니다. 자동화된 접근성 도구는 색상을 변환하여 휘도와 대비 비율을 계산합니다. 레이아웃이나 테마 버그를 디버깅할 때 헥스 값을 RGB나 HSL로 확인하면 어떤 채널에 문제가 있는지 파악하는 데 도움이 됩니다. 색상 변환은 데이터 시각화, 차트 라이브러리 및 동적 UI 테마 설정에도 사용됩니다.
자주 묻는 질문
3자리 헥스 코드를 입력할 수 있나요?
현재 이 도구는 6자리 코드를 지원합니다. F60과 같은 3자리 약식 코드는 먼저 FF6600으로 확장하여 입력해 주세요.
HSL이란 무엇인가요?
HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)를 의미합니다. 일부 디자이너들이 RGB보다 더 직관적이라고 느끼는 색상 표현 방식입니다.