HEX·RGB·HSL 색상 코드 완벽 가이드

색상 가이드 · ← 목록으로

웹과 디자인 도구에서 같은 색을 표현하는 방법은 여러 가지입니다. 가장 널리 쓰이는 세 가지가 HEX, RGB, HSL입니다. 셋은 똑같은 색을 가리키지만 "사람이 다루기 쉬운 방식"이 서로 다릅니다. 차이를 이해하면 상황에 맞는 표기법을 골라 작업 속도를 높일 수 있습니다.

세 가지 표기법은 결국 같은 색

모니터의 모든 색은 빨강(R)·초록(G)·파랑(B) 빛을 섞어 만듭니다. HEX와 RGB는 이 세 빛의 양을 직접 표기하는 방식이고, HSL은 사람이 색을 인지하는 방식(색조·채도·명도)에 가깝게 다시 표현한 것입니다. 어떤 표기를 쓰든 화면에 찍히는 픽셀은 동일합니다.

HEX — 가장 보편적인 표기

HEX는 #RRGGBB 형태로, 각 두 자리가 R·G·B의 양을 16진수(00~FF, 즉 0~255)로 나타냅니다. 예를 들어 #1A73E8은 빨강 26, 초록 115, 파랑 232를 의미합니다. 짧고 복사·붙여넣기가 쉬워 CSS, HTML, Figma 등 거의 모든 곳에서 표준처럼 쓰입니다.

같은 숫자가 반복되면 #FFFFFF를 #FFF처럼 세 자리로 줄여 쓸 수 있고, 끝에 두 자리를 더해 #1A73E880처럼 투명도(알파)를 넣기도 합니다.

RGB — 투명도 조절에 강하다

RGB는 rgb(26, 115, 232)처럼 세 채널을 0~255 사이 숫자로 적습니다. HEX와 정보량은 같지만 사람이 숫자를 직관적으로 읽고 조정하기 쉽습니다. 특히 투명도가 필요할 때 rgba(26, 115, 232, 0.5)처럼 알파 값을 더해 반투명 오버레이나 그림자를 손쉽게 만들 수 있습니다.

HSL — 색을 "감각적으로" 다룬다

HSL은 hsl(214, 80%, 51%) 형태로 Hue(색조), Saturation(채도), Lightness(명도)를 나타냅니다. 색조는 0~360도의 각도(0=빨강, 120=초록, 240=파랑), 채도와 명도는 백분율입니다. HSL의 진짜 강점은 변형에 있습니다. 색조는 그대로 두고 명도만 낮추면 "같은 색의 어두운 버전"을, 채도만 낮추면 "차분한 버전"을 즉시 만들 수 있어 버튼 hover 상태나 팔레트 단계 생성에 매우 유용합니다.

서로 어떻게 변환될까

HEX와 RGB는 사실상 같은 데이터의 다른 표기라 변환이 단순합니다. 16진수 두 자리를 10진수로 바꾸면 RGB가 됩니다(예: 1A = 26). RGB를 HSL로 바꿀 때는 세 채널 중 최대·최소값으로 명도와 채도를 구하고, 어떤 채널이 가장 큰지로 색조 각도를 계산합니다. 계산이 번거롭다면 색상 추출 도구가 한 번의 추출로 세 형식을 동시에 보여 주므로 직접 변환할 필요가 없습니다.

언제 무엇을 쓸까

HEX — 색을 그냥 지정하거나 공유할 때. 가장 짧고 호환성이 좋습니다.
RGB / RGBA — 반투명 효과가 필요하거나 채널 값을 코드로 계산할 때.
HSL — 한 색을 기준으로 밝기·채도 변형을 만들거나 팔레트를 체계적으로 구성할 때.

실전 예제 — 색 하나로 세 형식 직접 변환해 보기

플랫 UI 팔레트에서 자주 쓰이는 에메랄드 그린 #2ECC71을 예로 직접 변환해 보겠습니다. 계산 순서를 따라가면 세 표기법이 왜 "같은 색의 다른 얼굴"인지 감이 잡힙니다.

1단계 — HEX를 RGB로

#2ECC71을 두 자리씩 끊으면 2E, CC, 71입니다. 각각을 16진수에서 10진수로 바꾸면 2E=46, CC=204, 71=113이 되어 rgb(46, 204, 113)을 얻습니다.

2단계 — RGB를 HSL로

세 값을 0~1 범위로 정규화하면 R=0.180, G=0.800, B=0.443입니다. 최댓값(G=0.800)과 최솟값(R=0.180)의 차이(delta)는 0.620입니다.

명도(L) = (최댓값+최솟값)/2 = (0.800+0.180)/2 ≈ 49%
채도(S) = delta / (1 − |2L−1|) = 0.620 / 0.980 ≈ 63%
색조(H) = 최댓값이 G이므로 60 × ((B−R)/delta + 2) = 60 × 2.424 ≈ 145°

따라서 #2ECC71 = rgb(46, 204, 113) = hsl(145, 63%, 49%)입니다. 세 값 모두 정확히 같은 색이며, 색상 추출 도구로 이미지에서 이 색을 뽑으면 세 형식을 계산 없이 동시에 확인할 수 있습니다.

자주 묻는 질문

HEX 코드 앞의 #은 무엇을 의미하나요?: 뒤에 오는 값이 16진수(hexadecimal)라는 것을 나타내는 기호입니다. CSS·HTML뿐 아니라 대부분의 디자인 툴이 동일한 규칙을 따릅니다.
색에 투명도(알파)를 함께 표기할 수 있나요?: 네. HEX는 8자리로 늘려 #2ECC71CC처럼 마지막 두 자리에 알파를 넣고, RGB는 rgba(46, 204, 113, 0.8), HSL은 hsla(145, 63%, 49%, 0.8)로 표기합니다.
HSL과 HSB(HSV)는 같은 건가요?: 둘 다 색조·채도·명도 기반이지만 계산식이 다릅니다. HSB(HSV)는 포토샵 등 그래픽 툴에서 흔하고, HSL은 CSS 표준입니다. 같은 색이라도 두 값이 표기하는 숫자는 서로 다를 수 있습니다.
"red", "skyblue" 같은 색 이름과 HEX 중 어떤 걸 써야 하나요?: 이름 있는 색(named color)은 CSS에 147개뿐이라 표현할 수 있는 색이 매우 제한적입니다. 정확한 색을 지정하려면 HEX·RGB·HSL 중 하나를 쓰는 것이 안전합니다.
같은 HEX 코드인데 모니터마다 색이 다르게 보이는 이유는요?: 코드 자체는 동일해도 모니터의 색 재현율(색공간, 캘리브레이션)에 따라 실제로 보이는 색이 달라질 수 있습니다. 웹은 기본적으로 sRGB 색공간을 기준으로 합니다.

지금 화면이나 이미지에서 색을 뽑아 세 형식을 한 번에 확인해 보세요 → 화면 색상 추출 도구 사용하기. 색을 조합하는 방법이 궁금하다면 색상 조화 이론도 함께 읽어보세요.