HEX RGB 변환기
HEX, RGB, HSL 색상 코드를 즉시 변환하세요.
색상 미리보기
HEX
RGB
HSL
HEX, RGB, HSL이란?
HEX, RGB, HSL은 웹 개발에서 색상을 표현하는 세 가지 방식입니다. HEX는 6자리 16진수 코드, RGB는 빨강/초록/파랑 값(0–255), HSL은 색조(0–360°)·채도·밝기(0–100%)로 색상을 나타냅니다.
HEX vs RGB vs HSL — 언제 쓸까?
HEX
가장 간결한 형식. CSS 정적 색상과 디자인 툴에서 주로 사용합니다. 예: #ff5733
RGB
rgba()로 투명도 조절이 필요할 때 유용합니다. 화면 색상 채널에 직접 대응합니다. 예: rgb(255, 87, 51)
HSL
사람이 직관적으로 이해하기 쉬운 형식. 밝기나 채도를 코드로 조절하기 편합니다. 테마 시스템에 적합합니다. 예: hsl(11, 100%, 60%)
색상 코드 변환 방법
컬러 피커를 클릭하거나 HEX, RGB, HSL 입력란에 직접 값을 입력하세요. 나머지 포맷은 즉시 자동으로 변환됩니다. 복사 버튼을 눌러 원하는 포맷을 클립보드에 복사하세요.
자주 묻는 질문
HEX 색상 코드란 무엇인가요?
HEX 색상 코드는 #ff5733처럼 6자리 16진수로 빨강·초록·파랑 값을 표현합니다. 각 쌍은 00부터 ff(0–255) 범위를 가집니다.
HEX를 RGB로 어떻게 변환하나요?
6자리 HEX를 2자리씩 세 쌍으로 나누고 각각 16진수를 10진수로 변환합니다. 예: #ff5733 → R: 255, G: 87, B: 51.
HSL 색상이란 무엇인가요?
HSL은 색조(Hue, 0–360°), 채도(Saturation, 0–100%), 밝기(Lightness, 0–100%)를 나타냅니다. 사람이 색상을 직관적으로 조절하기 쉬운 포맷입니다.
CSS에서 어떤 색상 포맷을 써야 하나요?
세 가지 모두 CSS에서 유효합니다. 정적 색상은 HEX, 테마 시스템은 HSL, 투명도가 필요하면 rgba()를 사용하는 것이 일반적입니다.
3자리 HEX 코드도 변환할 수 있나요?
네. #f53 같은 3자리 HEX는 #ff5533의 축약형입니다. 각 자리를 두 번 반복해 6자리로 확장합니다.
회색 계열에서 HSL 색조가 0으로 표시되는 이유는?
회색은 채도가 0%이기 때문에 색조 값이 의미가 없어 기본값 0으로 표시됩니다. 정상적인 동작입니다.
변환 결과가 정확한가요?
네. 표준 수학 공식을 사용하며 유효한 색상 입력에 대해 정확한 결과를 제공합니다.