색상 변환기
HEX, RGB, HSL, HSB/HSV, CMYK 간 색상을 실시간 미리보기, 대비 검사, 팔레트 생성과 함께 변환하세요
투명도100%
색상 형식
HEX
#3b82f6RGB
rgb(59, 130, 246)HSL
hsl(217.22, 91.22%, 59.8%)HSB/HSV
hsv(217.22, 76.02%, 96.47%)CMYK
cmyk(76.02%, 47.15%, 0%, 3.53%)CSS 출력
color: #3b82f6;background-color: rgb(59, 130, 246);border-color: hsl(217.22, 91.22%, 59.8%);대비 검사기 (WCAG)
Aa
vs 흰색 (#FFFFFF) — 3.68:1
일반: Fail큰 텍스트: AA
Aa
vs 검정 (#000000) — 5.71:1
일반: AA큰 텍스트: AAA
vs 사용자 지정 배경 — 3.68:1
일반: Fail큰 텍스트: AA
색상 팔레트
보색
유사색
삼원색
분할 보색
HEX·RGB·HSL, 언제 무엇을 쓰나요?
세 표기법은 같은 색의 다른 표현입니다
- HEX (`#1a73e8`): 가장 간결. 디자인 툴·코드에서 색을 전달할 때의 사실상 표준.
- RGB (`rgb(26, 115, 232)`): 빛의 삼원색 성분값. 투명도가 필요하면 `rgba(..., 0.5)`.
- HSL (`hsl(217, 82%, 51%)`): 색상(Hue)·채도(S)·명도(L) — 사람이 직관적으로 조작하기 좋은 표기입니다. '같은 색을 조금 어둡게'가 L값 하나로 됩니다. 디자인 시스템의 색 변형(hover, disabled) 정의에 유리합니다.
실무 팁
- CSS 최신 표기는 쉼표 없이 씁니다: `rgb(26 115 232 / 50%)`.
- 접근성: 텍스트와 배경의 명도 대비는 WCAG 기준 일반 텍스트 4.5:1 이상이어야 합니다. 색 선택 시 대비 검사를 습관화하세요.
- OKLCH 같은 신형 색공간은 명도 지각이 균일해 팔레트 생성에 점점 널리 쓰이고 있습니다.
자주 묻는 질문
관련 도구
근거 자료 및 출처
콘텐츠 최종 검토: 2026-08-22