calai
← 모든 도구
개발자

색상 변환기

HEX ↔ RGB ↔ HSL 동시 변환 + 컬러 미리보기. 디자이너·개발자 필수.

100% 브라우저 처리가입·로그인 불필요영구 무료·워터마크 없음
RGB
rgb(79, 70, 229)
HSL
hsl(243, 75%, 59%)
Tailwind class
bg-[#4f46e5]
이렇게 사용해요
  1. 1
    입력 붙여넣기
    JSON·SQL·URL 등 그대로 입력
  2. 2
    실시간 처리
    포맷·변환·검증이 즉시
  3. 3
    복사·다운로드
    결과를 클립보드/파일로
개발자 · 가이드

색상 변환 완벽 정리

색상 변환기는 HEX(#RRGGBB)·RGB(0~255)·HSL(색상·채도·명도) 세 가지 표기를 양방향 변환합니다. 디자이너는 디자인 도구별 표기 차이로 자주 변환이 필요하며, 개발자는 CSS·Tailwind·디자인 시스템 정의 시 변환을 자주 사용합니다. HSL은 색감을 직관적으로 조정하기에 가장 좋은 형식입니다.

01

계산 공식

HEX → RGB: #FF5733 → R=255, G=87, B=51 RGB → HSL: H=색상(0~360°), S=채도(0~100%), L=명도(0~100%) CSS: rgb(255,87,51) / hsl(11,100%,60%) / #ff5733
02

언제 사용하나요

  • 01디자인 시안 → CSS 변환
  • 02Tailwind config 색상 정의
  • 03디자인 시스템·테마 색상 표 작성
  • 04색상 명도·채도 조정 (HSL)
03

알아두면 좋은 점

  • HSL이 색상 조정에 가장 직관 — L 값 ↑/↓로 light·dark 변형 손쉬움
  • Tailwind v4는 OKLCH 표준 권장 (인지적 균일성)
  • WCAG 명도 대비 4.5:1 이상 (본문 텍스트) — 접근성 필수
04

자주 묻는 질문

01HEX와 RGB 차이는?▾

표기만 다름. HEX(#FF5733)는 16진수 6자리, RGB(255,87,51)는 10진수 3개. 같은 색.

02HSL이 왜 편한가요?▾

H(색상)·S(채도)·L(명도)가 직관적이라 다크모드·hover 색상 만들 때 L만 조정하면 됨.

03투명도는 어떻게?▾

HEX 8자리(#RRGGBBAA) 또는 rgba(R,G,B,A) / hsla(H,S,L,A). A는 0~1.

04OKLCH가 뭐예요?▾

CSS Color 4 표준. 인지적으로 균일한 색공간이라 미세 조정·접근성에 유리. Tailwind v4 기본.