색상 코드 완전 정복 — HEX·RGB·HSL

웹이나 디자인 작업을 하다 보면 #3B82F6, rgb(59, 130, 246), hsl(217, 91%, 60%) 같은 색상 코드를 만나게 됩니다. 모두 같은 색을 가리키는데 표현 방식만 다릅니다. 세 형식이 어떻게 색을 나타내는지, 투명도는 어떻게 다루는지 정리하고 색상 변환기로 형식을 자유롭게 바꾸는 방법을 알아봅니다.

한눈에 보기

• HEX: #RRGGBB. 빨강·초록·파랑 각 채널을 16진수 00FF(0255)로 표기.
• RGB: 빨강·초록·파랑을 각각 0~255 값으로 표기.
• HSL: 색상(Hue 0360°)·채도(Saturation 0100%)·명도(Lightness 0~100%)로 직관적 표현.
• 투명도는 RGBA 또는 8자리 HEX(#RRGGBBAA)로 추가.
• 세 형식 모두 같은 색을 표현 방식만 다르게 나타낸 것입니다.

HEX — 16진수로 보는 색

HEX는 #RRGGBB 형식으로, 빨강(R)·초록(G)·파랑(B) 세 채널을 각각 두 자리 16진수로 적습니다. 각 채널은 00부터 FF까지, 즉 10진수로 0~255 범위를 가집니다.

예를 들어 #FF0000은 빨강 255, 초록 0, 파랑 0이라 순수한 빨강입니다. #FFFFFF는 세 채널 모두 최대라 흰색, #000000은 모두 0이라 검정입니다. CSS나 디자인 툴에서 가장 널리 쓰이는 표기입니다.

RGB — 0~255 채널 값

RGB는 같은 세 채널을 16진수 대신 10진수 0~255로 표기합니다. rgb(255, 0, 0)은 HEX의 #FF0000과 완전히 같은 빨강입니다.

값을 사람이 직관적으로 읽기엔 RGB가 편하고, 코드에 짧게 적기엔 HEX가 편합니다. 둘은 표기만 다를 뿐 동일한 색입니다. 변환이 번거롭다면 색상 변환기에서 한 번에 바꿀 수 있습니다.

HSL — 사람이 이해하기 쉬운 색

HSL은 색을 사람의 감각에 가깝게 표현합니다.

• 색상(Hue): 0~360°의 색상환 각도. 0°은 빨강, 120°은 초록, 240°은 파랑입니다.
• 채도(Saturation): 0~100%. 0%는 회색, 100%는 가장 선명한 색입니다.
• 명도(Lightness): 0~100%. 0%는 검정, 100%는 흰색입니다.

"조금 더 밝게" 또는 "채도를 낮춰 차분하게" 같은 조정을 할 때 HSL이 직관적입니다. 색을 고르고 싶다면 색상 선택기로 시각적으로 집은 뒤, 그 값을 다른 형식으로 변환해 쓰면 편리합니다.

투명도 다루기

색에 투명도를 더하려면 알파(alpha) 채널을 추가합니다.

• RGBA: rgba(59, 130, 246, 0.5)처럼 마지막에 0~1 사이 불투명도를 둡니다. 0은 완전 투명, 1은 완전 불투명입니다.
• 8자리 HEX: #RRGGBBAA 형식으로 끝에 두 자리(00~FF)를 더해 투명도를 표현합니다.

자주 묻는 질문

HEX와 RGB는 다른 색인가요?

아닙니다. 같은 색을 16진수(HEX)와 10진수(RGB)로 다르게 적은 것뿐입니다. #FF0000과 rgb(255, 0, 0)은 동일합니다.

HSL은 왜 쓰나요?

명도나 채도를 조금씩 조정하기 쉽기 때문입니다. 같은 색상(Hue)을 유지하면서 밝기만 바꾸는 식의 작업에 직관적입니다.

투명한 색은 어떻게 표현하나요?

RGBA의 알파 값(0~1)이나 8자리 HEX(#RRGGBBAA)를 사용합니다. 값이 작을수록 더 투명합니다.

형식 변환은 어떻게 하나요?

색상 변환기에 값을 넣으면 HEX·RGB·HSL을 서로 바꿔 줍니다. 색을 직접 고르려면 색상 선택기를 함께 쓰세요.

마무리

HEX·RGB·HSL은 모두 같은 색을 표현 방식만 다르게 나타낸 것이고, 투명도는 RGBA나 8자리 HEX로 더합니다. 용도에 맞는 형식을 골라 쓰되, 변환이 필요할 때는 색상 변환기를, 색을 직접 고를 때는 색상 선택기를 활용해 보세요.