홍라이프 계산기HEX-RGB 변환기 쉽게 이해하기 — 개념과 원리
웹 색상은 #1E90FF 같은 HEX 코드로 자주 쓰고, 디자인 도구와 CSS 함수는 rgb(30, 144, 255) 같은 RGB 숫자를 씁니다. 이 변환기는 양방향으로 바꾸며, 줄임 표기와 알파(불투명도) 채널도 지원하고 색을 하나의 24비트 십진수로도 보여 줍니다.
계산 방법
#RRGGBB: 16진수 두 자리가 한 채널이며 00(0)~FF(255)입니다.
두 자리 값 = 첫째 자리 × 16 + 둘째 자리(A = 10 … F = 15)
줄임 표기는 각 자리를 두 번 씁니다: #0AF = #00AAFF
선택적인 네 번째 쌍은 알파로, 00(투명)~FF(불투명)이며 0~1로 표시합니다.
RGB → HEX: 0~255 값을 16진수 두 자리로 씁니다.
24비트 숫자 = R × 65,536 + G × 256 + B
원리
16진수는 16진법이라 두 자리로 16 × 16 = 256가지 값을 나타낼 수 있고, 이는 8비트 색상 채널 하나의 범위와 정확히 같습니다. 그래서 HEX는 색상의 3바이트를 간단히 쓰는 방법입니다. 같은 바이트를 빨강을 위 바이트, 파랑을 아래 바이트로 하는 24비트 숫자 하나로 읽을 수도 있으며, 많은 프로그램이 내부적으로 이렇게 색을 저장합니다.
예제 풀이
기본값인 HEX → RGB, #1E90FF로 계산합니다.
- 1E = 1 × 16 + 14 = 30(빨강)입니다.
- 90 = 9 × 16 + 0 = 144(초록)입니다.
- FF = 15 × 16 + 15 = 255(파랑)입니다.
- 결과 30, 144, 255, CSS rgb(30, 144, 255), 알파 1(알파 쌍 없음)입니다.
- 24비트 숫자 = 30 × 65,536 + 144 × 256 + 255 = 2,003,199입니다.
결과 해석
도구가 요구하는 표기를 쓰면 되며 색은 똑같습니다. 투명도가 필요하면 여덟 자리 #RRGGBBAA나 rgba()를 쓰십시오. 같은 값도 화면 보정과 색상 프로파일 때문에 기기마다 다르게 보일 수 있습니다.
흔한 실수
- 채널 순서를 바꾸는 경우(항상 빨강, 초록, 파랑 순서입니다)
- 코드의 알파벳 O를 숫자 0으로 잘못 읽는 경우
- 알파가 HEX에서는 00~FF, rgba()에서는 0~1이라는 점을 잊는 경우
- 여섯 자리를 요구하는 오래된 프로그램에 세 자리 코드를 쓰는 경우
자주 묻는 질문
#FFF는 무슨 색인가요?
#FFFFFF의 줄임 표기로 순수한 흰색입니다.
투명도는 어떻게 넣나요?
#RRGGBBAA를 쓰거나 a를 0~1로 하는 rgba(r, g, b, a)를 씁니다.
HEX는 대소문자를 구분하나요?
아닙니다. #1e90ff와 #1E90FF는 같은 색입니다.
#1E90FF는 어떤 색인가요?
밝은 파란색으로, CSS에서는 'dodgerblue'라는 이름으로도 쓸 수 있습니다.
24비트 숫자는 어디에 쓰나요?
일부 프로그램과 프로그래밍 언어가 색을 정수 하나로 저장하거나 주고받을 때 씁니다. 빨강이 가장 높은 자리, 파랑이 가장 낮은 자리입니다.
출처: W3C, CSS Color Module Level 4: hexadecimal notation and the rgb()/rgba() functions