WebTools

Useful Tools & Utilities to make life easier.

Hex To RGB

16진수 색상 코드를 직관적인 RGB 수치로 확인합니다.

HEX to RGB 변환기란?

#FF0000처럼 우물 정(#) 기호로 시작하는 HEX 색상 코드를 넣으면, 빨강·초록·파랑 세 값으로 이루어진 RGB 값으로 바꿔 주는 도구입니다. 웹 디자인 시안이나 CSS 파일에는 색이 보통 #4169E1 같은 HEX로 적혀 있는데, 이미지 편집 프로그램이나 앱의 색 입력창은 65, 105, 225처럼 RGB 숫자를 요구할 때가 많습니다. 이럴 때 손으로 계산하지 않고 코드를 붙여 넣으면 곧바로 R·G·B 값을 얻을 수 있습니다.

입력창 아래에는 색상 미리보기 상자가 있어, 넣은 코드가 실제로 어떤 색인지 눈으로 바로 확인할 수 있습니다. 변환된 R·G·B 숫자를 직접 고치면 위쪽 HEX 코드도 반대로 다시 계산되어, 한 화면에서 두 방향을 오갈 수 있습니다.

사용 방법

  1. 위쪽 HEX Color 입력창에 #FF0000처럼 색상 코드를 적거나 붙여 넣습니다.
  2. 아래 색상 미리보기에서 실제 색을 확인하고, R·G·B 칸에 나온 0~255 숫자를 읽습니다.
  3. 필요하면 R·G·B 숫자를 직접 고쳐 HEX 코드를 반대로 얻거나, 복사 버튼으로 코드를 가져다 씁니다.

HEX 코드와 RGB의 구조

HEX 코드는 # 뒤에 여섯 자리로 이루어지며, 두 자리씩 끊어 빨강·초록·파랑을 나타냅니다. 각 두 자리는 16진수(0~9, A~F)로 00부터 FF까지 적히고, 이는 RGB의 0부터 255와 정확히 같은 범위입니다. 예를 들어 FF는 255, 00은 0, 41은 65입니다.

HEX 코드RGB 값
#FF0000rgb(255, 0, 0)빨강
#00FF00rgb(0, 255, 0)초록
#0000FFrgb(0, 0, 255)파랑
#FFFFFFrgb(255, 255, 255)흰색
#000000rgb(0, 0, 0)검정
#4169E1rgb(65, 105, 225)로열 블루

계산 방식은 간단합니다. 두 자리 16진수를 10진수로 바꾸면 됩니다. 41은 4×16 + 1 = 65, E1은 14×16 + 1 = 225입니다. 이 도구는 이 변환을 자동으로 처리합니다.

자주 묻는 질문

세 자리 짧은 HEX 코드(#F00)도 넣을 수 있나요?

넣을 수 있습니다. #F00처럼 세 자리로 적으면 각 자리를 두 번씩 펼쳐 #FF0000으로 해석합니다. 마찬가지로 #FFF#FFFFFF, #0AF#00AAFF가 되어 rgb(0, 170, 255)로 변환됩니다.

우물 정(#) 기호는 꼭 붙여야 하나요?

없어도 됩니다. FF0000처럼 기호를 빼고 여섯 자리만 넣어도 같은 결과가 나옵니다. 다만 잘못된 문자가 섞이거나 자릿수가 맞지 않으면 코드가 검정(#000000)으로 초기화되니, 0~9와 A~F 범위의 문자로 여섯 자리를 채우는 것이 안전합니다.

RGB 값은 왜 0부터 255까지인가요?

한 색(빨강·초록·파랑)당 두 자리 16진수, 즉 8비트로 표현하기 때문입니다. 8비트는 256단계를 나타낼 수 있어 0부터 255까지가 됩니다. 그래서 HEX의 00~FF와 RGB의 0~255는 완전히 같은 범위를 가리킵니다.

반대로 RGB를 HEX로 바꾸고 싶을 때는요?

이 도구에서도 R·G·B 숫자를 직접 고치면 위쪽 HEX 코드가 다시 계산됩니다. RGB 값을 먼저 정해 놓고 HEX를 얻는 작업이 잦다면, RGB 입력이 앞에 놓인 RGB to HEX 변환기를 쓰면 더 편합니다.