HEX·RGB·HSL 차이, 같은 색인데 표기가 다른 이유

같은 파란색인데 시안에는 #3B82F6, CSS에는 rgb(59, 130, 246), 디자인 도구에는 hsl(217, 91%, 60%)으로 적혀 있어 헷갈린 적 있으실 겁니다. 결론부터 말하면 세 값은 전부 같은 색입니다.

다른 건 색이 아니라 적는 방식입니다. 셋 다 화면이 내는 빨강·초록·파랑 빛의 세기를 가리키는데, HEX는 16진수로, RGB는 0~255 숫자로, HSL은 색상환 각도와 백분율로 옮겨 적을 뿐입니다.

요약 ① #3B82F6 = rgb(59, 130, 246) = hsl(217, 91%, 60%) — 표기만 다른 같은 색입니다. ② HEX는 두 자리씩 끊어 16진수로 읽으면 곧바로 RGB가 됩니다. 3B는 59, 82는 130, F6은 246입니다. ③ HSL은 색상(0~360도)·채도(%)·밝기(%)라, "같은 색인데 조금 더 연하게" 같은 조정에 강합니다. ④ 8자리 HEX(#RRGGBBAA)의 마지막 두 자리는 색이 아니라 투명도입니다.

왜 한 색이 세 가지로 적혀 있을까

디자인 시안에서는 #3B82F6 하나만 받았는데, 개발자가 보낸 CSS에는 rgb(59, 130, 246)이 적혀 있는 상황이 대표적입니다. 두 값이 같은 색인지 눈으로는 확신이 서지 않습니다.

여기에 디자인 도구의 색상 패널이 hsl(217, 91%, 60%)처럼 세 번째 표기를 보여주면 더 혼란스러워집니다. "채도 91%"라는 숫자가 HEX 어디에도 안 보이기 때문입니다.

이 세 표기는 같은 색을 서로 다른 좌표계로 부르는 이름입니다. 어느 쪽이 더 정확하거나 더 최신인 것이 아니라, 쓰기 편한 상황이 다를 뿐입니다.

각 표기가 실제로 나타내는 값

HEX — 빛 세기를 16진수 두 자리씩

#3B82F6은 # 뒤 여섯 자리를 두 자리씩 셋으로 끊어 읽습니다. 앞에서부터 빨강(3B)·초록(82)·파랑(F6) 순서입니다.

각 두 자리는 16진수이고, 00(0)부터 FF(255)까지 256단계를 나타냅니다. 그래서 HEX가 담는 정보는 RGB와 완전히 같습니다.

#39F처럼 세 자리로 적힌 것도 자주 보입니다. 이건 각 자리를 두 번 반복한 축약형이라 #3399FF와 같은 색입니다.

RGB — 같은 값을 10진수로

rgb(59, 130, 246)은 위의 16진수를 10진수로 바꿔 적은 것뿐입니다. 각 채널은 0~255 범위이고, 세 값이 모두 0이면 검정, 모두 255면 흰색입니다.

최근 CSS에서는 쉼표 없이 rgb(59 130 246)처럼 띄어쓰기로 적어도 됩니다. 표기 방식만 다르고 같은 색입니다.

HSL — 색상환 각도·채도·밝기

hsl(217, 91%, 60%)의 첫 숫자는 색상(H)으로, 색상환 위의 각도입니다. 0도는 빨강, 120도는 초록, 240도는 파랑 근처라 217도면 파랑 계열이라는 걸 숫자만 보고 알 수 있습니다.

두 번째 채도(S)는 색의 선명함입니다. 0%면 회색이 되고 100%에 가까울수록 쨍해집니다.

세 번째 밝기(L)는 0%가 검정, 100%가 흰색이며 50% 부근이 색이 가장 진하게 보이는 지점입니다. 이 구조 덕분에 "색은 그대로 두고 밝기만 10% 올리기" 같은 조정이 HSL에서는 숫자 하나만 바꾸면 됩니다.

도구 없이 직접 바꿔 보는 법

HEX → RGB : 두 자리를 16진수로 읽습니다

16진수 두 자리의 값은 앞자리 × 16 + 뒷자리입니다. A는 10, B는 11, ... F는 15로 셉니다.

3B  →  3 × 16 + 11 = 59
82  →  8 × 16 +  2 = 130
F6  →  15 × 16 + 6 = 246

그래서 #3B82F6은 rgb(59, 130, 246)입니다. 반대로 갈 때는 각 숫자를 16으로 나눈 몫과 나머지를 16진수 한 자리씩으로 적으면 됩니다(59 ÷ 16 = 3 … 11 → 3B).

RGB → HSL : 최댓값과 최솟값만 있으면 됩니다

세 채널을 255로 나눠 0~1로 만든 뒤, 그중 최댓값(max)·최솟값(min)과 그 차이(d)로 계산합니다.

L = (max + min) / 2
S = d / (1 - |2L - 1|)        (d 가 0이면 S = 0)
H = 60 × ((G-B)/d mod 6)      max 가 R 일 때
H = 60 × ((B-R)/d + 2)        max 가 G 일 때
H = 60 × ((R-G)/d + 4)        max 가 B 일 때

rgb(59, 130, 246)으로 직접 해보면 이렇게 나옵니다. 0.231(R), 0.510(G), 0.965(B)이므로 max는 0.965, min은 0.231, d는 0.734입니다.

• L = (0.965 + 0.231) / 2 = 0.598 → 60%
• S = 0.734 ÷ (1 − |2×0.598 − 1|) = 0.734 ÷ 0.804 = 0.912 → 91%
• max가 B이므로 H = 60 × ((0.231 − 0.510)/0.734 + 4) = 60 × 3.620 → 217도

계산은 이렇게 끝나지만, 색 하나 확인하려고 매번 나눗셈을 세 번씩 하기는 번거롭습니다. 크롬·엣지 개발자 도구의 Styles 패널에서 색상 미리보기 네모를 Shift+클릭하면 HEX·RGB·HSL 표기가 차례로 바뀌기도 하지만, 그 색이 이미 페이지에 적용돼 있어야 쓸 수 있습니다.

저희 도구로 확인하기. HEX 칸에 값을 붙여 넣으면 RGB 세 칸과 HSL 줄이 동시에 채워지고, 위쪽 미리보기 띠에 실제 색이 나옵니다. 반대로 RGB 숫자만 고쳐도 나머지가 따라옵니다.

직접 해보기 →

각 줄 오른쪽의 "복사" 버튼을 누르면 #3B82F6, rgb(59, 130, 246), hsl(217, 91%, 60%) 형태 그대로 복사됩니다.

8자리 HEX — 마지막 두 자리는 색이 아닙니다

#3B82F680처럼 여덟 자리로 적힌 값을 보면 색이 하나 더 있는 것처럼 보이지만, 뒤의 두 자리는 색이 아니라 알파(투명도)입니다. 앞 여섯 자리는 그대로 #3B82F6입니다.

읽는 법은 다른 채널과 같습니다. 00이 완전 투명, FF가 완전 불투명이고, 그 사이는 값을 255로 나눈 비율입니다. 80은 128 ÷ 255 ≈ 0.50, CC는 204 ÷ 255 = 0.80입니다.

반대로 원하는 불투명도를 두 자리로 적으려면 255를 곱해 반올림한 뒤 16진수로 바꿉니다. 0.5 × 255 = 127.5 → 128 → 80입니다. 네 자리 축약 #RGBA도 같은 규칙으로 각 자리를 두 번 반복합니다.

그래서 8자리 값을 세 표기로 맞춰볼 때는 뒤 두 자리를 떼고 앞 여섯 자리만 넣으면 됩니다. 투명도는 색 좌표가 아니라 겹칠 때의 비율이라, HEX·RGB·HSL 어느 표기로 바꿔도 따로 붙는 값입니다.

자주 막히는 지점

가장 자주 겪는 건 두 번째입니다. HSL은 각 값을 정수로 반올림해 표시하는 경우가 많아서, hsl(217, 91%, 60%)을 다시 RGB로 되돌리면 59·130·246과 한두 단위 차이가 날 수 있습니다. 색을 최종 저장할 때는 HEX나 RGB 원본을 기준으로 두는 편이 안전합니다.

세 번째도 조심할 지점입니다. 웹(CSS)에서는 알파가 뒤에 붙는 #RRGGBBAA가 표준이지만, 안드로이드 앱 개발처럼 알파를 앞에 두는 표기를 쓰는 환경도 있어 같은 여덟 자리라도 순서가 다를 수 있습니다.

정리

• #3B82F6, rgb(59, 130, 246), hsl(217, 91%, 60%)은 같은 색의 다른 표기입니다.
• HEX는 두 자리씩 16진수로 읽으면 RGB가 됩니다(3B=59, 82=130, F6=246).
• HSL은 색상 각도(0~360)·채도(%)·밝기(%)라 색을 유지한 채 밝기만 조정하기 좋습니다.
• 8자리 HEX의 마지막 두 자리는 투명도이며, 색은 앞 여섯 자리로 판단합니다.
• HSL은 반올림 표시라 왕복 변환 시 1 정도 차이가 날 수 있어, 원본은 HEX·RGB로 두는 편이 안전합니다.

자주 묻는 질문

#3B82F6과 rgb(59, 130, 246)은 정말 같은 색인가요?

같습니다. HEX는 각 색 채널을 16진수 두 자리로, RGB는 같은 값을 10진수로 적은 것뿐입니다. 3B는 3×16+11로 59, 82는 8×16+2로 130, F6은 15×16+6으로 246이 됩니다. 담고 있는 정보가 동일하므로 화면에 찍히는 색도 동일합니다.

HSL은 언제 쓰는 게 편한가요?

같은 색 계열로 밝기나 선명도만 조절할 때입니다. HEX나 RGB에서는 세 숫자를 모두 다시 계산해야 하지만, HSL은 색상(H)을 고정한 채 밝기(L)나 채도(S) 하나만 바꾸면 됩니다. 버튼의 기본·호버 색을 같은 계열로 맞출 때 자주 쓰입니다.

8자리 HEX에서 50% 투명은 어떻게 적나요?

0.5에 255를 곱하면 127.5이고, 반올림하면 128이라 16진수로 80입니다. 그래서 #3B82F6을 절반 투명하게 하면 #3B82F680이 됩니다. 0.8은 204이므로 CC, 완전 불투명은 FF, 완전 투명은 00입니다.

변환기에서 나온 HSL 값을 다시 넣었더니 RGB가 1 차이 나요.

반올림 때문입니다. HSL의 세 값은 보통 정수(각도, 정수 %)로 표시되는데, 실제 계산값은 217.2도나 59.8% 같은 소수입니다. 표시 단계에서 잘린 소수가 되돌아올 때 복원되지 않아 한두 단위 차이가 생깁니다. 색 정의는 HEX나 RGB 쪽을 원본으로 관리하면 이 문제가 사라집니다.