LOCAL TOOL · DESIGN
색상 코드 변환기 (HEX ↔ RGB ↔ HSL)
아무 CSS 색상 형식이나 붙여넣으면 나머지 형식과 미리보기를 바로 보여줍니다.
- HEX
- RGB
- HSL
사용 방법
- 색상을 입력하세요: #hex(3·4·6·8자리), rgb()/rgba(), hsl()/hsla() 모두 지원합니다.
- 색상 견본으로 미리 확인하고, 세 형식이 동시에 갱신되는 것을 확인하세요.
- CSS, 디자인 도구, 코드에 필요한 형식을 복사하세요.
예시
브랜드 컬러를 HSL로
#336699를 붙여넣으면 rgb(51, 102, 153)과 hsl(210, 50%, 40%)이 나옵니다. HSL로 바꾸면 밝기만 조절하기 편합니다.
반투명 오버레이
rgba(0, 0, 0, 0.5)를 붙여넣으면 #00000080이 나옵니다. 50% 검정의 8자리 hex 표기입니다.
자주 묻는 질문
어떤 형식을 지원하나요?
HEX 3·4·6·8자리(# 유무 무관), 0~255 채널의 rgb()/rgba(), 각도·퍼센트의 hsl()/hsla()를 지원합니다. 투명도(알파)는 모든 형식 간에 유지됩니다.
H, S, L은 각각 무엇인가요?
색상(Hue)은 색상환 위 위치(0~360°), 채도(Saturation)는 색의 진하기(0% 회색 ~ 100% 선명), 명도(Lightness)는 0% 검정 ~ 50% 순색 ~ 100% 흰색입니다.
hex에서 투명도는 어떻게 표기하나요?
네 번째 16진수 쌍으로 붙입니다: #RRGGBBAA. 80(16진수)은 255 중 128, 약 50% 불투명도입니다. 완전 불투명이 아닐 때만 알파 표기가 표시됩니다.
왕복 변환하면 값이 1 정도 달라지는 이유는?
HSL은 반올림된 퍼센트, RGB는 0~255 정수를 쓰기 때문에 왕복 변환에서 채널이 ±1 움직일 수 있습니다. 눈으로는 구분되지 않으며 모든 색상 도구에서 동일한 현상입니다.