색상 변환기
HEX ↔ RGB ↔ HSL 변환과 미리보기
🔒 데이터는 서버로 전송되지 않습니다 — 모든 처리는 브라우저 안에서만
색상 변환기 사용법
HEX, RGB, HSL 중 아무 입력칸에나 색상 코드를 입력하면 나머지 두 형식이 자동으로 변환되고, 큰 미리보기 영역에서 실제 색을 바로 확인할 수 있습니다. 컬러피커를 클릭해 눈으로 색을 고르는 것도 가능합니다.
디자인 시안의 HEX 코드를 CSS의 rgb() 값으로 옮기거나, HSL로 명도만 살짝 조절해 hover 색상을 만들 때처럼 웹 퍼블리싱·디자인 작업에서 자주 필요한 변환을 한 화면에서 처리할 수 있습니다. 각 형식 옆의 복사 버튼으로 코드에 바로 붙여넣으세요.
자주 묻는 질문
- HEX, RGB, HSL은 각각 언제 쓰나요?
- HEX(#3b82f6)는 CSS와 디자인 툴에서 가장 널리 쓰이는 표기입니다. RGB는 빨강·초록·파랑 값을 직접 다룰 때, HSL은 색상(Hue)·채도(Saturation)·명도(Lightness)를 직관적으로 조절할 때 편리합니다. 셋은 같은 색을 다르게 표현한 것일 뿐이라 자유롭게 변환할 수 있습니다.
- 3자리 HEX 코드(#fff)도 입력할 수 있나요?
- 네. #fff처럼 3자리 축약형을 입력하면 자동으로 #ffffff로 해석합니다. # 기호는 생략해도 인식됩니다.
- RGB 값을 쉼표만으로 입력해도 되나요?
- 네. rgb(59, 130, 246) 형식은 물론 59, 130, 246처럼 숫자와 쉼표만 입력해도 변환됩니다. HSL도 마찬가지로 % 기호를 생략할 수 있습니다.