ToolkitBox

색상 변환기

HEX, RGB, HSL 색상 코드를 서로 변환하고 미리봅니다.

입력한 내용과 선택한 파일은 서버에 저장되지 않으며, 가능한 경우 사용자의 브라우저에서 직접 처리됩니다.

HEX
#2563EB
RGB
rgb(37, 99, 235)
HSL
hsl(221, 83%, 53%)
미리보기

주요 기능

  • HEX, RGB, HSL 세 가지 색상 표기를 서로 변환
  • 3자리 축약 HEX(예: #fff)와 6자리 HEX 모두 지원
  • '#' 포함/미포함 HEX 입력 모두 정상 처리
  • 변환 결과 색상을 실시간 미리보기로 확인

사용 방법

  1. HEX, RGB, HSL 중 입력할 형식을 선택합니다.
  2. 값을 입력합니다 (RGB는 0~255, HSL은 H 0~360·S/L 0~100 범위).
  3. 미리보기와 함께 나머지 두 형식의 결과를 확인하고 복사합니다.

사용 예시

#2563EB → rgb(37, 99, 235) / hsl(221, 83%, 53%)

디자인 시안에서 받은 HEX 코드를 CSS의 rgb()/hsl() 표기로 바꾸거나, 반대로 코드에 적힌 RGB 값이 실제로 어떤 색인지 눈으로 바로 확인할 때 사용합니다.

알아두면 좋은 점

  • 3자리 HEX(#fff)는 각 자리가 두 번 반복되는 방식으로 6자리(#ffffff)와 동일하게 해석됩니다.
  • RGB는 정수만 입력할 수 있습니다. 255를 초과하거나 음수인 값은 입력할 수 없습니다.
  • HSL의 H(색상)는 0~360도의 각도이며, 360과 0은 같은 색(빨강 계열)을 가리킵니다.

FAQ

Q. 입력한 색상 값이 서버에 저장되나요?
A. 아니요. 모든 변환과 미리보기는 브라우저에서만 처리되며 서버로 전송되지 않습니다.
Q. 잘못된 값을 입력하면 어떻게 되나요?
A. 화면이 깨지지 않고, 어떤 부분이 문제인지 안내하는 오류 메시지가 표시됩니다. 예를 들어 HEX는 3자리·6자리가 아니면, RGB는 0~255를 벗어나면 오류로 안내합니다.

관련 도구

QR 코드 생성기

URL이나 텍스트로 QR 코드를 만들고 PNG로 저장합니다.

단위 변환기

길이, 무게, 온도, 면적, 부피 단위를 서로 변환합니다. 평(坪) 변환도 지원합니다.

퍼센트 계산기

비율, 증감률, 증가·감소한 값 등 다양한 퍼센트 계산을 한 번에 처리합니다.

글자수·바이트 계산기

공백 포함/제외 글자수, UTF-8 바이트 수, 단어·줄·문장 수를 바로 계산합니다.