HEX와 RGB를 빠르게 상호 변환

색상 미리보기를 보면서 HEX, RGB, HSL, CSS 값을 함께 비교할 수 있습니다.

🔒 100% 로컬 ⚡ 바로 처리 🚫 업로드 없음 🏠 전체 도구
#3b82f6

HEX와 RGB를 비교하며 색상 값을 정리하기

디자인과 구현 사이에서는 HEX와 RGB 표기가 섞이기 쉽습니다. DragKit은 라이브 미리보기와 함께 값을 상호 변환해 CSS 전달 전 확인용으로도 유용합니다.

양방향 변환

HEX에서 RGB, RGB에서 HEX로 바로 바꿀 수 있습니다.

라이브 미리보기

입력한 색상이 즉시 보이므로 값을 조정하며 확인하기 쉽습니다.

CSS 확인에 적합

HSL과 CSS 값도 함께 보여 구현 전 점검에 좋습니다.

사용 방법

  1. 색상 코드 입력 - HEX 또는 RGB 값을 입력해 변환을 시작합니다.
  2. 결과 확인 - 라이브 미리보기로 색상을 보며 값을 조정합니다.
  3. 필요한 형식 사용 - HEX, RGB, HSL, CSS 중 필요한 값을 복사해 사용합니다.

자주 쓰는 용도

  • CSS 색상 지정 확인
  • 디자인과 구현 간 색상 맞춤
  • 브랜드 컬러 형식 변환

FAQ

HEX와 RGB 중 무엇을 써야 하나요?

CSS에서는 둘 다 사용할 수 있습니다. 팀 규칙이나 디자인 툴 흐름에 맞춰 선택하면 됩니다.

HSL도 확인할 수 있나요?

네. 페이지에서 HSL 값도 함께 확인할 수 있습니다.