HEX → RGB 변환기
HEX 값을 입력하면 RGB 값이 바로 나옵니다. 계산은 브라우저 안에서 끝나며 입력값을 서버로 보내지 않습니다.
계산 방법
HEX는 빨강·초록·파랑을 16진수 두 자리씩 이어 붙인 값입니다. #RRGGBB를 두 자리씩 끊어 각각 10진수로 바꾸면 RGB가 됩니다. FF은 255, 63은 99입니다.
HEX
HEX 는 RGB 와 똑같은 빨강·초록·파랑 세 값을 16진수로 적은 것뿐입니다. 채널 하나가 두 글자로 떨어져서 짧고 헷갈리지 않기 때문에 CSS·디자인 도구·설정 파일 어디서나 쓰입니다. 대소문자는 상관없고, #abc 는 #aabbcc 의 줄임입니다. 여덟 자리로 쓰면 마지막 두 자리가 투명도라서 #FF000080 은 반투명 빨강이 됩니다.
RGB
RGB 는 화면이 색을 만드는 방식 그대로입니다. 빛 세 개를 더하며, 각각 0~255 입니다. 셋 다 0 이면 검정, 셋 다 255 면 흰색입니다. 하드웨어와 같은 구조라 정확하고 손실이 없지만, 사람이 다루기는 불편합니다. "조금만 더 따뜻하게" 하려면 두세 숫자를 동시에 바꿔야 하는데 어느 쪽으로 가야 할지가 눈에 보이지 않습니다.
HEX → RGB 계산 과정
#FF6347 을 예로 실제 계산을 따라가 봅니다. 값은 이 페이지의 변환기와 같은 엔진으로 구합니다.
-
두 자리씩 끊기
#FF6347 → FF · 63 · 47 -
16진수를 10진수로
R FF = 15×16 + 15 = 255 G 63 = 6×16 + 3 = 99 B 47 = 4×16 + 7 = 71 -
결과
rgb(255, 99, 71)
HEX → RGB 변환 예시
| Color | HEX | RGB |
|---|---|---|
| Red | #FF0000 |
rgb(255, 0, 0) |
| Tomato | #FF6347 |
rgb(255, 99, 71) |
| Orange | #FFA500 |
rgb(255, 165, 0) |
| Gold | #FFD700 |
rgb(255, 215, 0) |
| Limegreen | #32CD32 |
rgb(50, 205, 50) |
| Teal | #008080 |
rgb(0, 128, 128) |
| Dodgerblue | #1E90FF |
rgb(30, 144, 255) |
| Royalblue | #4169E1 |
rgb(65, 105, 225) |
| Blueviolet | #8A2BE2 |
rgb(138, 43, 226) |
| Hotpink | #FF69B4 |
rgb(255, 105, 180) |
자주 묻는 것
HEX 를 RGB 로 바꾸면 값이 손실되나요?
아닙니다. 같은 숫자를 진법만 바꿔 적은 것이라 왕복해도 정확히 같은 값이 나옵니다. HEX 하나는 RGB 하나에 정확히 대응합니다.
세 자리 HEX 는 무슨 뜻인가요?
각 자리를 두 번 쓴 것과 같습니다. #f80 은 #ff8800 입니다. 1,670만 색 중 4,096 색만 표현할 수 있으므로 값이 딱 떨어질 때 쓰는 줄임 표기이지 압축이 아닙니다.
HEX 가 여덟 자리인 경우는 뭔가요?
마지막 두 자리가 투명도입니다. 00 이 완전 투명, FF 가 불투명입니다. 오래된 브라우저는 이 부분을 무시하므로 넓은 호환이 필요하면 불투명 값을 함께 지정해 두세요.