본문으로 건너뛰기
BrowserUtil

색상 변환기

HEX, RGB, HSL, HSV, CMYK 간의 상호 변환, 컬러 피커 및 WCAG 명암비 검사.

#2563EB100% 투명도
불투명도100%
RGB 채널
R37
G99
B235
프리셋 색상

색상 형식 변환

HEX
#2563EB
HEXA (with Alpha)
#2563EBFF
RGB
rgb(37, 99, 235)
RGBA
rgba(37, 99, 235, 1)
HSL
hsl(221, 83%, 53%)
HSLA
hsla(221, 83%, 53%, 1)
HSV / HSB
hsv(221, 84%, 92%)
CMYK (Print)
cmyk(84%, 58%, 0%, 8%)

명암 팔레트 생성 (Tints & Shades)

밝은 톤 (Tints)
어두운 톤 (Shades)

WCAG 2.1 명암비 분석

흰색 배경 (#FFFFFF) 대비5.17:1
다람쥐 헌 쳇바퀴에 타고파 동해물과 백두산이
AA (≥4.5) ✓ Pass AAA (≥7.0) ✕ Fail
검은색 배경 (#000000) 대비4.06:1
다람쥐 헌 쳇바퀴에 타고파 동해물과 백두산이
AA (≥4.5) ✕ Fail AAA (≥7.0) ✕ Fail

사용 방법

  1. 1 컬러 피커로 색상을 선택하거나 HEX, RGB, HSL 등의 색상값을 입력하세요.
  2. 2 투명도 슬라이더 또는 R/G/B 개별 채널 슬라이더로 색상을 미세 조정하세요.
  3. 3 HEX, RGB, HSL, HSV, CMYK 형식 중 필요한 값을 클릭 한 번으로 복사하세요.
  4. 4 WCAG 2.1 웹 접근성 명암비 평가와 명암 팔레트를 확인하세요.

주요 기능

  • HEX, HEXA, RGB, RGBA, HSL, HSLA, HSV, CMYK 실시간 양방향 변환
  • 체커보드 투명도 미리보기가 포함된 네이티브 컬러 피커
  • 표준 CSS 명명 색상(crimson, rebeccapurple 등) 지원
  • 흰색/검은색 배경에 대한 WCAG 2.1 AA 및 AAA 접근성 명암비 분석
  • 밝은 톤(Tints)과 어두운 톤(Shades)의 10단계 팔레트 자동 생성
  • 정밀한 R, G, B 채널 슬라이더 조절
  • 서버 전송 없는 100% 클라이언트 로컬 연산

자주 묻는 질문

RGB, HSL, HSV의 차이는 무엇인가요?

RGB는 빛의 삼원색 강도를 기반으로 한 하드웨어 중심 모델입니다. HSL(색상, 채도, 명도)과 HSV(색상, 채도, 명도값)는 인간의 시각적 인지 방식에 더 가까워 디자인 작업에 적합합니다.

WCAG 명암비 기준은 무엇인가요?

W3C 웹 접근성 지침에 따라 일반 텍스트는 최소 4.5:1(AA) 또는 7:1(AAA), 대형 텍스트는 3:1(AA) 이상의 명암비를 충족해야 시각 약자도 선명하게 읽을 수 있습니다.

알파 투명도(Alpha)가 포함된 색상도 변환되나요?

네, 완벽하게 지원됩니다. 투명도 슬라이더를 조절하면 HEXA, RGBA, HSLA 등 모든 형식에 투명도가 실시간 반영됩니다.

관련 도구