HEX, RGB, HSL 차이 완벽 정리

웹 개발이나 디자인을 하다 보면 같은 색을 #ff6b6b, rgb(255, 107, 107), hsl(0, 100%, 71%) 등 여러 방식으로 표현하는 걸 보게 됩니다. 세 가지 모두 같은 색을 나타내지만, 구조와 쓰임새가 다릅니다.

HEX 코드란?

HEX(Hexadecimal)는 16진수로 색상을 표현하는 방식입니다. #RRGGBB 형식으로, 빨강(RR), 초록(GG), 파랑(BB) 각각의 강도를 00~FF(0~255)로 나타냅니다.

HEX는 가장 널리 쓰이는 형식으로 디자인 툴(Figma, Photoshop 등)과 CSS에서 모두 사용됩니다. 짧고 직관적이라 복사·붙여넣기가 편리합니다.

RGB란?

RGB는 Red, Green, Blue 세 채널의 0~255 값으로 색을 표현합니다. rgb(255, 107, 107) 형식으로 사용합니다. 알파(투명도) 값을 추가한 RGBA도 자주 쓰입니다.

RGB는 HEX와 동일한 정보를 담고 있지만 숫자로 직접 표현되어 프로그래밍에서 계산하거나 조작하기 편리합니다. JavaScript에서 색상 값을 계산할 때 유리합니다.

HSL이란?

HSL은 Hue(색조), Saturation(채도), Lightness(명도)의 세 요소로 색을 표현합니다. hsl(0, 100%, 71%) 형식입니다.

• H (Hue): 색상환 위의 각도 0°~360°. 0°/360°=빨강, 120°=초록, 240°=파랑
• S (Saturation): 채도. 0%는 회색, 100%는 순수한 색
• L (Lightness): 밝기. 0%는 검정, 100%는 흰색, 50%가 기본

HSL은 사람이 색을 인식하는 방식에 가깝습니다. "이 색의 밝기를 20% 높이고 싶다"는 요구를 HEX나 RGB로 처리하기 어렵지만, HSL에서는 L 값만 조절하면 됩니다.

언제 무엇을 써야 할까?

HEX는 디자이너와 개발자가 색상을 주고받을 때 가장 보편적입니다. Figma, Zeplin 등 디자인 협업 툴에서 기본으로 사용하므로 색상 코드 공유 시 HEX를 쓰면 됩니다.

RGB / RGBA는 JavaScript로 색상을 계산하거나, 투명도가 필요할 때 유용합니다. Canvas API 등 프로그래밍 환경에서 많이 사용합니다.

HSL은 CSS에서 색상을 직접 조작하거나 다크모드, 테마 시스템을 설계할 때 가장 강력합니다. 색 이론을 이해하고 배색 작업을 할 때도 HSL이 직관적입니다.

비교 정리