CSS 및 프런트엔드 개발 도구

RGB → HEX 변환기

R, G, B 정수 세 개를 입력하여 RGB 색상을 바로 사용할 수 있는 HEX로 변환하세요.

입력값

브라우저에서 처리

실시간 미리보기

설정을 바꾸면 자동으로 업데이트됩니다
직접 선택하거나 복사할 수 있습니다

R, G, B 정수 범위를 검증하고 HEX를 생성합니다. 대문자 출력과 색상 미리보기를 지원합니다.

입력한 내용은 브라우저에서만 처리되며 서버에 업로드되지 않습니다.

도구 소개

RGB → HEX 변환기는 빨강, 초록, 파랑 채널을 6자리 HEX 색상으로 변환합니다. 대문자 또는 소문자 출력을 선택하고 RGB 표기와 실제 색상을 함께 확인할 수 있습니다.

사용 방법

  1. R, G, B를 각각 입력하세요. 모든 채널은 0~255의 정수여야 합니다.
  2. 필요에 따라 ‘대문자 HEX’ 옵션을 켜거나 끄세요.
  3. 실시간 결과를 확인하거나 ‘변환’을 클릭한 뒤 HEX를 복사하세요.
  4. ‘초기화’로 기본 상태를 복원하거나 예제를 불러와 비교하세요.

사용 예제

  • R 255, G 87, B 51 → #ff5733; 대문자 옵션을 선택하면 #FF5733입니다.
  • R 0, G 0, B 0 → #000000.
  • R 255, G 255, B 255 → #ffffff.

계산 원리

각 채널을 두 자리 16진수로 변환하고 한 자리이면 앞에 0을 붙인 다음 R, G, B 순서로 연결합니다. 대소문자는 표기만 바꾸며 색상은 변하지 않습니다. 범위를 벗어난 값, 빈 값, 소수는 오류로 표시하며 300을 알림 없이 255로 바꾸지 않습니다.

주요 용도

  • 그림이나 이미지 편집 프로그램의 RGB 값을 CSS에 사용합니다.
  • 프로젝트 색상 코드의 대소문자 표기를 통일합니다.
  • 직접 입력한 채널 세 개가 모두 유효한 범위인지 확인합니다.

개인정보 안내

모든 입력 처리, 계산, CSS 생성, 미리보기는 현재 브라우저에서 이루어집니다. 사용자 내용을 업로드하지 않으며 백엔드, 데이터베이스, 온라인 API, 외부 CDN을 사용하지 않습니다. 입력값은 자동 저장되지 않습니다.

FAQ

RGB 범위는 왜 0~255인가요?

이 페이지는 일반적인 8비트 sRGB 채널을 사용합니다. 각 채널에는 0부터 255까지 총 256개의 정수 단계가 있습니다.

12.5나 256을 입력할 수 있나요?

아니요. 모든 채널은 0~255의 정수여야 하며 잘못된 값은 명확한 오류 메시지로 안내합니다.

HEX 대문자와 소문자는 어떻게 다른가요?

#FF5733과 #ff5733은 같은 색상입니다. 프로젝트의 코드 스타일에 맞춰 대소문자를 선택하면 됩니다.

일부 HEX 채널 앞에는 왜 0이 붙나요?

각 채널은 두 자리를 차지해야 합니다. 예를 들어 9는 09로 써야 뒤따르는 채널의 위치가 바뀌지 않습니다.

개발자 도구 목록으로 돌아가기