HEX RGB 변환기 사용법
- HEX 색상 코드 입력란에 색상 코드를 입력하거나 붙여넣으세요(
#는 있어도 없어도 됩니다). 색상 견본을 클릭해 색을 고를 수도 있습니다. - 결과를
rgb()형식으로 확인하고, 슬라이더에서 빨강·초록·파랑 값을 HSL, HSV, CMYK와 함께 살펴보세요. - 원하는 형식을 클릭 한 번으로 복사하세요. 형식 옆의 계산식에서 16진수 두 자리가 0부터 255 사이의 숫자로 바뀌는 과정을 확인할 수 있습니다.
HEX RGB 변환 공식
HEX 색상 코드는 3바이트를 16진수로 쓴 것입니다: #RRGGBB. 두 자리씩 하나의 채널을 나타내며 값의 범위는 00(0)부터 FF(255)까지입니다. 두 자리를 변환하려면 첫째 자리에 16을 곱하고 둘째 자리를 더합니다. 이때 A = 10, B = 11, C = 12, D = 13, E = 14, F = 15로 계산합니다. #7C3AED의 예:
- 빨강:
7C= 7 × 16 + 12 = 124 - 초록:
3A= 3 × 16 + 10 = 58 - 파랑:
ED= 14 × 16 + 13 = 237
따라서 #7C3AED = rgb(124, 58, 237)입니다.
축약형 HEX 코드와 투명도가 있는 HEX 코드
3자리 코드는 각 자리를 두 번씩 반복한 축약형입니다: #F80 = #FF8800 = rgb(255, 136, 0). 8자리 코드는 불투명도를 나타내는 알파 바이트가 추가된 형태입니다. #7C3AED80에서 마지막 두 자리 80 = 128이고 128 ÷ 255 ≈ 0.5이므로 rgba(124, 58, 237, 0.5)와 같습니다. 4자리 형식 #RGBA도 같은 방식으로 동작합니다.
자주 쓰는 HEX 색상 코드와 RGB 값
| 색상 | HEX | RGB |
|---|---|---|
| 흰색 | #FFFFFF | rgb(255, 255, 255) |
| 검은색 | #000000 | rgb(0, 0, 0) |
| 빨간색 | #FF0000 | rgb(255, 0, 0) |
| 라임 | #00FF00 | rgb(0, 255, 0) |
| 파란색 | #0000FF | rgb(0, 0, 255) |
| 노란색 | #FFFF00 | rgb(255, 255, 0) |
| 주황색 | #FFA500 | rgb(255, 165, 0) |
| 회색 | #808080 | rgb(128, 128, 128) |
| 남색 | #000080 | rgb(0, 0, 128) |
| 보라색 | #800080 | rgb(128, 0, 128) |
| 청록색 | #008080 | rgb(0, 128, 128) |
자주 묻는 질문
HEX를 RGB로 직접 변환하려면 어떻게 하나요?
코드를 두 자리씩 세 쌍으로 나누고 각 쌍을 16진수에서 변환하세요: 첫째 자리 × 16 + 둘째 자리. #1E90FF의 경우 1E = 30, 90 = 144, FF = 255이므로 색상은 rgb(30, 144, 255)입니다.
#F80 같은 3자리 HEX 색상은 무슨 뜻인가요?
각 자리를 두 번씩 반복한 6자리 코드의 축약형입니다: #F80 = #FF8800 = rgb(255, 136, 0). 각 쌍의 두 자리가 같은 색상만 이렇게 줄여 쓸 수 있습니다.
JavaScript나 Python에서 HEX를 RGB로 변환하려면 어떻게 하나요?
#RRGGBB 형식의 코드라면 JavaScript에서는 [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16)), Python에서는 tuple(int(h[i:i + 2], 16) for i in (1, 3, 5))를 사용하세요. CSS에서는 두 표기법을 모두 지원하므로 변환할 필요가 없습니다.
CSS에서는 HEX와 RGB 중 무엇이 더 좋나요?
두 방식은 정확히 같은 색을 나타냅니다. HEX는 더 짧고 디자인 도구에서 널리 쓰이며, rgb()는 읽고 조정하기 쉽고 rgba()로 투명도를 명확하게 표현할 수 있습니다. 최신 브라우저는 알파 값이 포함된 8자리 HEX 코드도 지원합니다.