색상 변환기 (HEX · RGB · HSL)

사용 방법

HEX, RGB, HSL 중 어느 입력창에 값을 입력해도 나머지 두 형식이 자동으로 갱신됩니다. 색상 피커를 클릭해 시각적으로 색을 선택할 수도 있습니다. 각 형식 옆의 복사 버튼으로 CSS에 바로 붙여 쓸 수 있는 값을 클립보드에 저장합니다.

색상 모델 이해하기

세 가지 색상 표현 방식은 각각 쓰임새가 다릅니다.

• HEX: #RRGGBB 형식으로 빨강·초록·파랑을 16진수로 표기합니다. CSS와 디자인 툴에서 가장 흔히 쓰입니다. 예: #FF5733
• RGB: Red, Green, Blue 각각을 0–255 사이의 10진수로 나타냅니다. CSS에서 rgb(255, 87, 51) 형태로 사용합니다.
• HSL: Hue(색조, 0–360도), Saturation(채도, 0–100%), Lightness(명도, 0–100%)로 표현합니다. 색을 직관적으로 조정할 때 유용하며, 명도나 채도만 바꾸고 싶을 때 HEX·RGB보다 다루기 쉽습니다.

자주 묻는 질문

Q. HEX 코드를 3자리로 줄일 수 있나요?

#RRGGBB에서 각 채널이 두 자리 모두 같을 때(예: #FF3300)#F30처럼 3자리 약식으로 쓸 수 있습니다. CSS에서는 두 표기가 동일하게 해석되지만, 이 도구는 항상 6자리 형식을 출력합니다.

Q. 투명도(알파)는 어떻게 표현하나요?

투명도는 #RRGGBBAA(8자리 HEX) 또는 rgba(r, g, b, a),hsla(h, s%, l%, a) 형식으로 표현합니다. 이 도구는 불투명(alpha 1) 색상 변환에 집중하며, 알파 채널이 포함된 변환은 지원하지 않습니다.

Q. 디자인 작업에서 어떤 형식을 쓰는 것이 좋나요?

Figma·Sketch 등의 디자인 툴은 HEX가 기본이고, CSS 변수로 테마를 관리할 때는 HSL이 채도·명도 조작이 쉬워 편리합니다. 개발 코드에서는 세 형식 모두 CSS에서 지원되므로 팀 컨벤션에 맞게 선택하면 됩니다.