HEX → RGB 변환기
16진수 색상 코드를 RGB 값으로 바꾸세요.
브라우저에서 실행됩니다. 입력한 내용은 어디로도 전송되지 않습니다.
- 3, 4, 6, 8자리 지원
- RGBA와 HSL도 함께
- 클릭 한 번으로 복사
HEX를 RGB로 변환하는 방법
- #이 있든 없든 HEX 코드를 입력하거나 붙여넣으세요.
- 입력하는 대로 RGB, RGBA, HSL 값이 바로 바뀝니다.
- 필요한 값 옆의 복사 버튼을 클릭하세요.
HEX to RGB 변환 예시
| HEX | RGB | 참고 |
|---|---|---|
| #FF8800 | rgb(255, 136, 0) | 표준 6자리 HEX |
| #F80 | rgb(255, 136, 0) | 3자리 약식, 같은 색 |
| #000000 | rgb(0, 0, 0) | 검은색 |
| #FFFFFF | rgb(255, 255, 255) | 흰색 |
| #FF880080 | rgba(255, 136, 0, 0.5) | 알파가 포함된 8자리 HEX |
약식 표기와 전체 길이 표기는 각 자리를 그대로 반복한 것이므로 항상 정확히 같은 색으로 해석됩니다.
HEX 코드는 어디서 비롯됐나
Figma나 Photoshop 같은 디자인 도구, 그리고 모든 브라우저의 DevTools는 색을 정확한 텍스트로 나타내는 가장 짧은 방법이기 때문에 기본적으로 HEX로 표시합니다.
HEX는 rgb()나 hsl() 같은 CSS 함수가 등장하기 훨씬 전인 1990년대 HTML 초기의 색상 속성 시절부터 웹에서 쓰여 왔습니다. 그런 역사 때문에 지금도 많은 스타일 가이드가 HEX를 맨 앞에 내세웁니다.
자주 하는 HEX 코드 실수
- HEX 코드는 3, 4, 6, 8자리 중 하나여야 합니다. 5자리나 7자리는 유효하지 않아 변환되지 않습니다.
- 일부 오래된 Windows API는 색을 RGB가 아닌 BGR 순서로 저장하므로, 레거시 코드에서 복사한 값은 빨강과 파랑이 뒤바뀌어 있을 수 있습니다.
- 8자리 코드의 마지막 두 자리는 네 번째 색 채널이 아니라 알파이므로, #FF880000은 어두운 주황색이 아니라 완전히 투명한 색입니다.
HEX → RGB 자주 묻는 질문
HEX를 RGB로 손으로 변환하려면?
코드를 두 자리씩 세 쌍으로 나누고 각각을 16진수에서 10진수로 바꾸세요. #F08A3C라면 F0 = 240, 8A = 138, 3C = 60이 되어 rgb(240, 138, 60)이 됩니다.
3자리 HEX 코드란 무엇인가요?
각 자리를 두 번씩 반복하는 약식 표기입니다. #F80은 #FF8800과 같은 색이고, #000은 검은색입니다.
8자리 HEX 코드의 마지막 두 자리는 무엇을 뜻하나요?
알파, 즉 불투명도입니다. #FF880080은 약 50% 불투명도의 주황색으로 rgba(255, 136, 0, 0.5)와 같습니다.
코드 앞에 #이 꼭 있어야 하나요?
아니요. 이 변환기는 #의 유무, 대문자와 소문자를 가리지 않고 받아들입니다.
내 HEX 코드가 유효하지 않다고 나오는 이유는 무엇인가요?
HEX 코드는 0-9와 A-F를 사용한 3, 4, 6, 8자리 중 하나여야 합니다. 5자리나 7자리처럼 다른 길이거나 범위 밖의 문자가 있으면 변환되지 않습니다.
var(--brand) 같은 CSS 변수를 붙여넣어도 되나요?
아니요, 실제 색상 값을 붙여넣으세요. 브라우저 DevTools의 계산된 스타일 패널 등에서 변수가 어떤 값으로 계산되는지 먼저 확인하세요.
가장 짧은 HEX 코드는 몇 자리인가요?
3자리입니다. 검은색은 #000, 흰색은 #fff처럼 씁니다. 각 자리는 6자리 전체 표기에서 반복되는 쌍을 나타냅니다.