WebTools

Useful Tools & Utilities to make life easier.

RGB To Hex

RGB 색상 값을 웹용 Hex 코드로 즉시 변환합니다.

RGB to HEX 변환기란?

빨강·초록·파랑 세 숫자(RGB)를 넣으면 #FF0000 같은 HEX 색상 코드로 바꿔 주는 도구입니다. 이미지 편집 프로그램이나 색 선택창에서 고른 색은 보통 255, 0, 0처럼 RGB 숫자로 나오는데, 웹 페이지의 CSS나 HTML에는 색을 #FF0000 형태의 HEX로 적는 경우가 많습니다. 이 도구는 그 사이를 이어 줍니다.

입력창은 R·G·B가 먼저 놓이고 그 아래에 결과 HEX 코드가 나오도록 배치되어, RGB 값을 알고 HEX를 얻는 흐름에 맞춰져 있습니다. 각 칸은 0~255 범위로 자동 제한되어 범위를 벗어난 숫자를 넣어도 안전하게 잘립니다. 아래 미리보기 상자에서 실제 색을 눈으로 확인할 수 있고, HEX 코드를 직접 고치면 R·G·B가 반대로 다시 계산됩니다.

사용 방법

  1. 위쪽 R·G·B 칸에 각각 0~255 사이의 숫자를 넣습니다. 범위를 벗어나면 자동으로 0~255로 맞춰집니다.
  2. 아래 HEX Color 칸에 나온 #으로 시작하는 여섯 자리 코드를 확인합니다.
  3. 색상 미리보기로 색을 확인하고, 복사 버튼으로 HEX 코드를 가져다 씁니다.

RGB를 HEX로 바꾸는 원리

각 색 값(0~255)을 두 자리 16진수(00~FF)로 바꿔 빨강·초록·파랑 순으로 이어 붙이면 됩니다. 예를 들어 255는 FF, 0은 00, 65는 41이 됩니다. 그래서 rgb(255, 0, 0)은 #FF0000, rgb(65, 105, 225)는 #4169E1이 됩니다.

RGB 값HEX 코드
rgb(255, 0, 0)#FF0000빨강
rgb(0, 255, 0)#00FF00초록
rgb(0, 0, 255)#0000FF파랑
rgb(255, 255, 255)#FFFFFF흰색
rgb(0, 0, 0)#000000검정
rgb(65, 105, 225)#4169E1로열 블루

한 자리로 나오는 값은 앞에 0을 채워 두 자리로 맞춥니다. 예를 들어 10은 16진수로 A지만 0A로 적습니다. 그래서 결과 코드는 항상 #과 여섯 자리로 이루어집니다.

자주 묻는 질문

255보다 큰 숫자를 넣으면 어떻게 되나요?

자동으로 255로 맞춰집니다. 각 칸은 0~255 범위를 벗어나지 않도록 제한되어 있어, 300을 넣으면 255로, 음수를 넣으면 0으로 잘립니다. 덕분에 잘못된 코드가 만들어지는 것을 막아 줍니다.

HEX 코드는 왜 여섯 자리인가요?

빨강·초록·파랑 각각을 두 자리씩 나타내기 때문입니다. 두 자리 × 세 색 = 여섯 자리가 됩니다. 각 두 자리는 16진수로 00부터 FF까지, 즉 RGB의 0부터 255까지와 같은 범위를 담습니다.

결과 코드는 대문자로 나오나요?

이 도구는 #FF0000처럼 대문자로 표기합니다. HEX 코드는 대소문자를 구분하지 않아 #ff0000#FF0000은 완전히 같은 색을 뜻하므로, CSS나 편집 프로그램에 어느 쪽으로 붙여 넣어도 문제없습니다.

반대로 HEX를 RGB로 풀어 보고 싶을 때는요?

이 도구에서도 아래 HEX 칸을 직접 고치면 R·G·B 값이 다시 계산됩니다. HEX 코드를 먼저 넣고 RGB를 얻는 작업이 잦다면, HEX 입력이 앞에 놓인 HEX to RGB 변환기를 쓰는 편이 더 자연스럽습니다.