CanDoYa
KO

HEX RGB 색상 변환

브라우저에서 바로 실행됩니다. 업로드도, 회원가입도 없습니다.

CSSrgb(255, 87, 51)
RGB 값255, 87, 51
변환 과정
빨강FF255
초록5787
파랑3351

반대로 변환? RGB to HEX

#ff5733
이 도구 공유하기

HEX 코드를 RGB로 변환하는 방법은?

헥스 색상 코드는 두 자리씩 세 쌍으로 이루어지며, 각 쌍이 하나의 색상 채널을 나타냅니다. 각 쌍을 0에서 255 사이의 10진수로 바꾸면 됩니다. #ff5733의 경우 ff는 빨강 255, 57은 초록 87, 33은 파랑 51이므로 rgb(255, 87, 51)이 됩니다. 이 도구는 입력하는 즉시 그 변환을 처리합니다.

사용 방법

  1. 1HEX 코드 입력. #ff5733(또는 #f53)처럼 헥스 색상 코드를 입력하거나 붙여넣고, 색상 스와치로 직접 골라도 됩니다. #는 생략 가능합니다.
  2. 2RGB 값 확인. rgb() 문자열, 0-255 값, 실시간 색상 미리보기가 입력과 동시에 갱신되며, 각 헥스 쌍이 어떻게 변환됐는지 자릿수별로 보여줍니다.
  3. 3필요한 형식 복사. rgb() 문자열이나 원본 값 옆의 복사 버튼을 클릭하세요. 반대로 변환하려면 아래에 R·G·B 값을 입력하면 헥스 코드를 다시 얻을 수 있습니다.

이런 분께 추천

이 도구는 CSS에서 쓰는 모든 헥스 표기를 지원합니다. 6자리 #ff5733, 3자리 축약형 #f53, 그리고 알파 채널이 포함된 4자리와 8자리 형식까지 처리하며, #는 있어도 없어도 됩니다. 결과는 rgb() 또는 rgba() 문자열, 각 채널의 값, 자릿수별 변환 과정으로 표시되고, 반대로 RGB를 HEX로 되돌리는 입력란도 함께 제공됩니다. 모든 계산은 브라우저 안에서만 실행되며, 업로드도 계정 가입도 횟수 제한도 없습니다.

자주 묻는 질문

이 HEX RGB 변환 도구는 무료인가요?

네, 100% 무료이며 가입도 필요 없고 횟수 제한도 없습니다. 모든 처리는 브라우저에서만 이루어집니다.

입력한 색상이 어딘가로 업로드되나요?

아니요. 변환은 기기에서 실행되는 순수 JavaScript일 뿐이며 서버로 전송되는 데이터는 전혀 없습니다. 페이지를 한 번 불러오면 오프라인에서도 계속 사용할 수 있습니다.

HEX를 RGB로 바꾸는 공식은 무엇인가요?

헥스 코드를 두 자리씩 세 쌍으로 나눈 뒤 각각 16진수를 10진수로 바꿉니다. 첫째 자리에 16을 곱하고 둘째 자리를 더하면 됩니다(a=10 ... f=15). #ff5733에서 ff = 15×16+15 = 255, 57 = 5×16+7 = 87, 33 = 3×16+3 = 51입니다.

#f53 같은 3자리 축약형도 지원하나요?

네. CSS 축약형은 각 자리가 두 번씩 반복되므로 #f53은 #ff5533으로 확장되고 rgb(255, 85, 51)로 변환됩니다. 4자리 형식도 동일하게 처리되며 마지막 자리가 알파값입니다.

RGBA로는 어떻게 변환하나요?

8자리 헥스 코드는 마지막 두 자리에 알파값을 담고 있습니다. 이 0-255 바이트 값을 255로 나눠 rgba()가 요구하는 0-1 값으로 바꾸고 소수점 셋째 자리까지 반올림합니다. 그래서 #ff573380은 rgba(255, 87, 51, 0.502)가 됩니다.

RGB를 HEX로 다시 변환할 수도 있나요?

네. 결과 아래의 RGB to HEX 입력란에 빨강·초록·파랑 값을 0에서 255 사이로 입력하면 즉시 헥스 코드를 돌려줍니다. 범위를 벗어난 값은 0-255로 자동 조정됩니다.

왜 헥스 대신 rgb()를 써야 하나요?

주로 알파값과 계산 때문입니다. rgba(255, 87, 51, 0.5)로 색을 반투명하게 만들 수 있고, 많은 API·게임 엔진·디자인 스펙이 헥스 문자열이 아니라 0-255 채널 값을 따로 요구합니다.