색상 코드 변환기 (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, CSS는 rgba, 인쇄소는 또 다른 값을 요구합니다. #336699 하나를 변환해 세 형식을 복사해 두면 도구마다 색을 다시 고르지 않아도 됩니다.
밝기 단계 만들기
hsl(210, 50%, 40%)에서 명도만 30%, 50%, 60%로 바꾸면 같은 계열의 어둡고 밝은 변형이 나옵니다. RGB로는 세 채널을 모두 다시 맞춰야 하는 작업입니다.
어두운 배경에서 확인하기
밝은 배경용으로 고른 색이 다크 모드에서 안 보이는 경우가 많습니다. 명도(L)를 보면 대략 가늠할 수 있습니다. 아주 밝거나 아주 어두운 색은 테마별로 값을 따로 두세요.
자주 묻는 질문
어떤 형식을 지원하나요?
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 움직일 수 있습니다. 눈으로는 구분되지 않으며 모든 색상 도구에서 동일한 현상입니다.
HEX 대신 HSL은 언제 쓰나요?
복사해서 붙여 넣을 고정 값이면 HEX, 더 밝게·덜 진하게처럼 색을 조정할 때는 HSL입니다. HSL은 색상·채도·명도가 분리돼 있어 하나만 바꿀 수 있습니다.
알파 값은 무엇인가요?
불투명도입니다. 0은 완전 투명, 1은 완전 불투명입니다. 8자리 HEX의 마지막 두 자리가 알파로, 80은 약 50%입니다. 반투명 색은 뒤에 깔린 배경에 따라 다르게 보입니다.
HSL과 HSB는 같은 건가요?
다릅니다. HSL(CSS)은 명도 100%가 흰색이고, HSB/HSV(포토샵 등 디자인 도구)는 밝기 100%가 순색입니다. 같은 숫자를 넣으면 다른 색이 나오니 도구에 맞는 모델을 확인하세요.