HEX / RGB / HSL 색상 변환기

색상 변환기는 무엇인가요?

색상을 변환하는 방법

1. 1
   시작 형식 선택

   HEX 값을 붙여넣거나 (# 없이도 가능), 기본 색상 선택기를 드래그하거나, 슬라이더 또는 숫자 입력으로 RGB / HSL 채널을 설정하세요.

2. 2
   샘플 업데이트 보기

   모든 키 입력 또는 슬라이더 드래그 시 큰 샘플과 HEX 레이블이 업데이트되어 색상을 확인할 수 있습니다.

3. 3
   다른 두 형식 읽기

   편집한 형식에 따라 다른 두 형식이 즉시 복사하기 섹션에서 재계산됩니다 — HEX, rgb(...), 및 hsl(...)이 CSS, 디자인 도구 또는 코드에 붙여넣을 준비가 됩니다.

4. 4
   필요한 값 복사

   클립보드에 해당 문자열을 넣으려면 어떤 행에서든 복사 버튼을 클릭하세요. 버튼은 1.5초 동안 체크 표시로 확인합니다.

5. 5
   대비 확인

   대비 스냅샷은 순수한 흰색 및 순수한 검은색에 대한 색상의 WCAG 비율을 보여줍니다. 사용자 정의 배경에 대한 전체 WCAG AA / AAA 판별이 필요하면 아래에 링크된 대비 검사기 도구로 이동하세요.

색상 변환 수학

HEX → RGB:
  R = parseInt(hex[0..1], 16)
  G = parseInt(hex[2..3], 16)
  B = parseInt(hex[4..5], 16)
 
RGB → HSL (각 채널이 0–1로 스케일됨):
  max = max(R, G, B); min = min(R, G, B)
  L   = (max + min) / 2
  S   = L > 0.5 ? (max − min) / (2 − max − min) : (max − min) / (max + min)
  H는 어떤 채널이 max인지에 따라 다릅니다:
    R: H = 60 · ((G − B) / (max − min) mod 6)
    G: H = 60 · ((B − R) / (max − min) + 2)
    B: H = 60 · ((R − G) / (max − min) + 4)

참조: CSS 색상 모듈 레벨 4 — sRGB

예시

일반적인 사용 사례

• Figma 파일에서 HEX 색상 견본을 rgb() 또는 hsl()로 변환하여 CSS 변수로 사용
• H 슬라이더로 색조를 선택한 후 S와 L을 조정하여 브랜드 색조를 맞춤
• 그래픽 도구나 스크린샷 선택기에서 RGB 값을 변환하여 스타일시트에서 기대하는 HEX로 변환
• 후보 브랜드 색상이 흰색 또는 검은색과 충분한 대비를 가지는지 빠르게 확인
• 색조를 일정하게 유지하고 밝기 채널을 단계적으로 조정하여 톤 스케일 구축
• 디자이너가 언급한 색상 이름을 실제 코드의 HEX와 비교하여 확인
• 3자리 약어 (#03A)를 정식 6자리 형태 (#0033AA)로 변환

관련 도구

자주 묻는 질문