HEX to RGB 변환기

#3498DB는 rgb(52, 152, 219)입니다: 두 자리씩 16진수를 10진수로

HEX 코드와 RGB 값은 같은 색을 다르게 적은 것입니다. HEX는 빨강·초록·파랑 값을 16진수 두 자리씩 붙여 쓰고, RGB는 같은 값을 0부터 255까지의 10진수로 씁니다. #3498DB는 34·98·DB로 끊어 각각 10진수로 바꾸면 52, 152, 219가 되어 rgb(52, 152, 219)입니다. 두 자리 16진수는 앞자리 × 16 + 뒷자리이고, A~F는 10~15를 뜻합니다.

위 변환기는 HEX를 넣으면 RGB를, R·G·B 칸이나 막대를 움직이면 HEX를 큰 글자로 보여 줍니다. HSL·OKLCH·투명도를 포함한 코드는 줄마다 복사할 수 있습니다. 'HEX 풀이'는 채널마다 계산 과정과 0~255 중 어디쯤인지를 막대로 그리고, 아래에서는 이 색 위에 흰 글자와 검은 글자를 썼을 때의 명암비를 WCAG 기준으로 함께 보여 줍니다.

언제 HEX와 RGB를 바꾸나

• 디자인 시안의 색을 코드로 옮길 때: 시안이나 브랜드 가이드에 HEX로 적힌 색에 투명도를 함께 쓰려면 rgb(R G B / 알파)나 여덟 자리 HEX가 필요합니다.
• 프로그램에 색 값을 넣을 때: 색을 0~255 숫자 세 개로 받는 프로그램이라면 HEX를 RGB 숫자로 풀어 넣습니다.
• 색을 조금씩 조정할 때: RGB 막대로 한 채널만 올리거나 내리면 HEX가 어떻게 바뀌는지 바로 보입니다. 밝기나 채도를 기준으로 조정하려면 HSL이나 OKLCH 값을 함께 봅니다.
• 글자가 읽히는지 확인할 때: 버튼이나 배경색 위에 흰 글자와 검은 글자 중 어느 쪽이 더 잘 읽히는지 명암비로 판단합니다.

계산 방법

1. HEX → RGB: # 뒤 여섯 자리를 두 자리씩 R·G·B로 끊고, 각 두 자리를 앞자리 × 16 + 뒷자리로 바꿉니다. DB는 13 × 16 + 11 = 219입니다.
2. RGB → HEX: 각 값을 16으로 나눈 몫과 나머지를 16진수 한 자리씩으로 씁니다. 152 = 9 × 16 + 8이므로 98입니다. 16보다 작은 값은 0을 앞에 붙여 두 자리로 맞춥니다.
3. 짧은 표기: 세 자리 #39F는 각 자리를 두 번 써서 #3399FF로, 네 자리 #39F8은 #3399FF88로 늘립니다(CSS Color 4).
4. 투명도: 여덟 자리 HEX의 끝 두 자리는 알파이며, 00은 완전히 투명하고 FF는 완전히 불투명합니다. 퍼센트 × 255를 반올림해 16진수로 씁니다.

HEX 표기와 rgb()·hsl() 문법은 W3C CSS Color Module Level 4(2026-10-09 후보 권고안 초안), 명암비는 WCAG 2.2를 따르며 2026-10-12에 원문을 확인했습니다.

기본 16색 HEX·RGB 표

CSS가 정한 기본 색 이름 16개의 값입니다. 위 변환기의 '기본 16색'을 누르면 그 색이 바로 들어갑니다.

green(#008000)은 초록 채널이 128인 어두운 초록이고, 초록 채널이 255인 밝은 초록은 lime(#00FF00)입니다. 이름만 보고 값을 짐작하면 틀리기 쉬우니 HEX를 확인합니다.

투명도와 HEX 끝 두 자리

여덟 자리 HEX의 끝 두 자리는 알파를 0~255로 적은 값입니다. 아래 퍼센트는 불투명도라서 100%가 완전히 불투명하고 0%가 완전히 투명합니다. 퍼센트 × 255를 반올림해 16진수로 바꾸므로, 다시 퍼센트로 바꾸면 끝자리가 조금 달라집니다. 50%는 128(80)이 되고 128 ÷ 255는 50.2%입니다.

CSS에 쓰는 색 표기 정리

• HEX: #3498DB, 짧게 #39F(각 자리가 같은 쌍일 때만), 투명도 포함 #3498DB80. 대소문자는 구분하지 않습니다.
• rgb(): 옛 표기 rgb(52, 152, 219)는 쉼표로, 새 표기 rgb(52 152 219 / 50%)는 공백과 슬래시로 구분합니다. CSS Color 4에서 rgba()는 rgb()의 다른 이름이라 rgba(52, 152, 219, 0.5)도 같은 뜻입니다.
• hsl(): 색상각(0~360)·채도·밝기로 적습니다. 같은 색을 밝게 하거나 어둡게 할 때 밝기 값만 바꾸면 되어 편합니다.
• oklch(): CSS Color 4가 정의한 OKLab 기반 표기로, 밝기·채도·색상각을 사람이 느끼는 차이에 더 가깝게 나눕니다. 밝기를 같게 맞춘 색 묶음을 만들 때 쓸 수 있습니다.
• HSV: 그래픽 프로그램의 색 고르기에서 흔히 보이지만 CSS 함수는 없습니다. 참고용으로만 씁니다.

흰 글자·검은 글자 명암비 읽는 법

WCAG 2.2는 두 색의 상대 휘도를 구해 (밝은 쪽 + 0.05) ÷ (어두운 쪽 + 0.05)로 명암비를 계산합니다. 상대 휘도는 각 채널을 0~1로 바꿔 감마를 푼 뒤 빨강 0.2126, 초록 0.7152, 파랑 0.0722의 비중으로 더한 값입니다. 일반 본문은 4.5 : 1, 큰 글자(18포인트 이상, 굵게 14포인트 이상)는 3 : 1 이상이어야 AA, 본문 7 : 1 이상이면 AAA입니다. 예시 #3498DB는 흰 글자 3.15 : 1, 검은 글자 6.66 : 1이라 본문에는 검은 글자가 맞습니다. 이 변환기는 명암비를 반올림하지 않고 판정하며, 다른 두 색의 조합은 색상 접근성 검사기에서 확인할 수 있습니다.

자주 틀리는 경우

• 세 자리 HEX를 0을 붙여 늘립니다: #39F는 #3090F0이 아니라 #3399FF입니다. 각 자리를 두 번 씁니다.
• 투명도 퍼센트가 정확히 돌아올 거라 봅니다: 50%는 80(128)이 되고, 다시 바꾸면 50.2%입니다. 0~255 정수로 저장하기 때문입니다.
• RGB 0~1 값과 0~255 값을 섞습니다: 일부 그래픽 도구는 채널을 0~1 소수로 받습니다. 그때는 52 ÷ 255 = 0.204처럼 255로 나눕니다.
• 투명한 색의 명암비를 그대로 봅니다: 투명한 색은 아래 배경과 섞인 색으로 보이므로, 실제 배경과 섞은 뒤의 색으로 다시 확인해야 합니다.
• HSL로 바꿨다 되돌린 값을 그대로 씁니다: 정수로 반올림한 HSL은 되돌리면 채널 값이 몇 단위(많게는 5 정도) 달라질 수 있습니다. 정확한 값은 HEX나 rgb()로 옮깁니다.
• 색 이름만 보고 값을 짐작합니다: CSS의 green은 #008000이고, #00FF00은 lime입니다.

한계와 주의

• sRGB 색만 다룹니다. display-p3처럼 더 넓은 색 공간의 값을 넣으면 브라우저가 sRGB로 바꾼 값으로 계산합니다.
• HSL·HSV는 정수, OKLCH는 밝기 소수 첫째 자리·채도 소수 셋째 자리·색상각 소수 첫째 자리로 반올림해 보여 줍니다.
• 무채색(회색 계열)은 색상각이 정해지지 않아 0으로 표시합니다.
• 명암비는 투명도를 빼고 불투명한 색으로 계산합니다. 글자 굵기나 크기, 화면 밝기에 따른 차이는 반영하지 않습니다.
• 색 고르기 창의 모양과 기능은 브라우저와 운영체제마다 다릅니다.

출처

• 01W3C — CSS Color Module Level 42026-10-09 후보 권고안 초안. §5.2 HEX 3·4·6·8자리와 늘림 규칙, 알파 00·ff, rgb()와 rgba() 별칭·새 표기와 옛 표기, §6.1 기본 색 이름, §7.2 sRGB → HSL, OKLab·OKLCH — 2026-10-12 확인
• 02W3C — Web Content Accessibility Guidelines (WCAG) 2.2상대 휘도(0.04045 기준, 2021년 5월 이전 0.03928), 명암비 (L1 + 0.05) / (L2 + 0.05), 1.4.3 AA 4.5 : 1·큰 글자 3 : 1, 1.4.6 AAA 7 : 1, 큰 글자 정의

자주 묻는 질문

함께 쓰는 도구