색상 포맷 설명: HEX, RGB, HSL

웹에서는 같은 색을 여러 방식으로 쓸 수 있습니다 — #3498db, rgb(52, 152, 219), hsl(204, 70%, 53%)는 모두 정확히 같은 파랑입니다. 각 포맷이 무엇을 뜻하는지(그리고 언제 어느 것을 잡을지) 알면 색을 고르고, 손보고, 맞추는 일이 훨씬 쉬워집니다. 이 가이드는 HEX·RGB·HSL과 그 관계를 풀어 봅니다.

모든 것은 빨강·초록·파랑에서 시작된다

화면은 세 가지 색광을 섞어 색을 만듭니다: 빨강, 초록, 파랑. 당신이 보는 모든 색은 이 세 채널의 어떤 조합이며, 각각 0(꺼짐)부터 255(최대)까지의 세기로 설정됩니다. 완전한 검정은 0, 0, 0, 완전한 흰색은 255, 255, 255입니다. HEX와 RGB는 이 같은 세 숫자에 대한 두 가지 표기법일 뿐입니다.

RGB

RGB는 세 채널 값을 직접 나타냅니다:

rgb(52, 152, 219)
     R    G    B

세 가지 중 가장 사람이 읽기 쉬운데, 숫자가 "빨강·초록·파랑이 얼마나"로 곧장 대응하기 때문입니다. 채널 자체를 놓고 따지고 싶을 때 좋습니다.

HEX

HEX는 바로 그 0–255 채널 값을 16진수(base 16)로, # 뒤에 세 쌍으로 인코딩합니다:

#3498db
 34 98 db
 R  G  B     →  R=52, G=152, B=219

각 쌍은 00(0)부터 ff(255)까지입니다. HEX는 간결하고 대부분의 디자인 도구와 CSS의 기본값이라, 당신이 가장 자주 복사·붙여넣기 하게 될 포맷입니다. 단축형도 있습니다: #39f는 각 자리를 두 배로 늘려 #3399ff가 됩니다.

HSL

HSL은 사람이 색을 직관적으로 생각하는 방식으로, 세 개의 다른 축으로 색을 기술합니다:

• 색상(Hue) (0–360°) — 색상환 위의 색 자체: 0° 빨강, 120° 초록, 240° 파랑.
• 채도(Saturation) (0–100%) — 얼마나 선명한지, 회색에서 순색까지.
• 명도(Lightness) (0–100%) — 얼마나 밝은지, 검정에서 그 색을 거쳐 흰색까지.

hsl(204, 70%, 53%)
    hue  sat  light

HSL의 초능력은 색을 조정하는 것입니다. 어떤 색의 더 어두운 버전을 원하나요? 명도를 낮추고 색상과 채도는 그대로 두세요. 어울리는 음영 세트를 원하나요? 색상을 고정하고 명도만 바꾸세요. HEX나 RGB로 그렇게 하려면 세 채널을 모두 다시 계산해야 하지만, HSL로는 숫자 하나입니다.

알파: 투명도 더하기

각 포맷에는 불투명도를 위한 알파(alpha) 채널이 있는 변형이 있습니다. 0(완전 투명)부터 1(완전 불투명)까지: rgba(52, 152, 219, 0.5)와 hsla(204, 70%, 53%, 0.5). 최신 CSS는 마지막 쌍이 알파인 8자리 HEX도 허용합니다 — #3498db80은 같은 파랑을 50%로.

무엇을 써야 하나?

• HEX — 고정된 브랜드 색을 복사하거나 디자인 도구에 붙여넣을 때. 간결하고 보편적.
• RGB / RGBA — 원시 채널을 놓고 따지거나 간단한 투명도가 필요할 때.
• HSL / HSLA — 디자인할 때: 팔레트 만들기, 호버/액티브 음영, 감각으로 색 손보기.

좋은 소식은 손으로 변환할 필요가 없다는 것입니다. 우리 HEX↔RGB 변환기는 포맷 사이를 즉시 옮기고, 컬러 피커는 색을 시각적으로 고르고 그 HEX·RGB·HSL 값을 한 번에 읽게 해 줍니다 — 그라디언트와 팔레트 만들기도 됩니다. 이미지에서 색을 뽑아야 하나요? 이미지 컬러 피커가 바로 그 일을 합니다.