HEX를 RGB로 (그리고 반대로) 변환하는 방법

#1E90FF는 실제로 무엇을 뜻하며, 어떻게 rgb(30, 144, 255)에 도달할까요? HEX 색상과 RGB 색상은 같은 세 숫자를 두 가지 방식으로 적은 것일 뿐입니다 — 규칙만 보이면 어느 방향으로든 변환이 빠릅니다. 아니면 계산을 아예 건너뛰고 색상 변환기를 쓰세요.

형식: #RRGGBB

HEX 색상은 # 뒤에 여섯 자리 16진수가 세 쌍으로 붙은 것입니다:

• RR — 빨강 채널
• GG — 초록 채널
• BB — 파랑 채널

각 쌍은 00부터 FF까지의 두 자리 16진수(base-16)이며, 이는 10진수로 0부터 255입니다. 그래서 각 채널은 256가지 값을 가질 수 있고, 익숙한 1,670만 색이 나옵니다. #000000은 검정(모두 0), #FFFFFF는 흰색(모두 최대), #FF0000은 순수한 빨강입니다.

계산 (HEX 쌍 → 10진수)

한 쌍을 변환하려면 첫 자리에 16을 곱하고 둘째 자리를 더합니다. 이때 A=10, B=11, C=12, D=13, E=14, F=15입니다.

예제 풀이 — #1E90FF:

• 1E → (1 × 16) + 14 = 30 (빨강)
• 90 → (9 × 16) + 0 = 144 (초록)
• FF → (15 × 16) + 15 = 255 (파랑)

따라서 #1E90FF = rgb(30, 144, 255)("dodger blue")입니다. 반대로 변환하려면 각 채널을 16으로 나눕니다: 몫이 첫 HEX 자리, 나머지가 둘째 자리입니다. 30 ÷ 16 = 1 나머지 14 → 1E.

3자리 축약형

CSS는 각 자리를 두 번씩 쓰는 3자리 형식도 허용합니다: #19E는 #1199EE로 확장됩니다. 축약형은 모든 쌍의 두 자리가 같을 때만 됩니다 — #FFF = #FFFFFF이지만, #1E90FF 같은 색은 3자리 형식이 없습니다.

알파와 8자리 HEX

최신 CSS는 네 번째 쌍으로 알파(불투명도) 채널을 지원합니다: #RRGGBBAA. 여기서 AA는 00(완전 투명)부터 FF(완전 불투명)까지이며, rgba()의 0~1 범위에 대응합니다 — 그래서 #1E90FF80은 약 50% 불투명도의 dodger blue입니다(0x80 = 128 ≈ 0.5). 이미지 색상 추출기로 색을 눈으로 고르거나, 색상 팔레트 추출기로 이미지에서 배색 전체를 뽑거나, CSS 그라디언트 생성기로 색을 섞어 보세요.

흔한 실수

• HEX가 10진수가 아니라 16진수임을 잊기. FF는 255이지 15나 99가 아닙니다. HEX의 10은 10진수 16입니다 — 밝은 색을 탁하게 만드는 흔한 실수입니다.
• 알파 스케일을 거꾸로 알기. #RRGGBBAA에서 00은 투명, FF는 불투명입니다 — "00은 꺼짐"이라 짐작하는 것과 정반대입니다.
• 3자리와 6자리 형식 혼동. #123은 #112233이지 #123000이 아닙니다. 헷갈리면 항상 여섯 자리를 온전히 쓰거나, 색상 변환기로 확장하게 하세요.
• rgb()가 백분율을 받는다고 가정하기. 표준 rgb() 값은 0~255 정수입니다. rgb(30, 144, 255)가 맞고, rgb(12%, 56%, 100%)는 사람들이 이와 혼동하는 다른(백분율) 문법입니다.