색상 코드 변환
🎨 색상HEX·RGB·HSL·HSV·CMYK 변환은 물론 색 미리보기, 대비색(WCAG), 보색·배색, 명도 스케일까지 한 번에.
가장 가까운 색 이름: royalblue (#4169E1)
RGB 조절
#3B82F6
rgb(59, 130, 246)
hsl(217, 91%, 60%)
hsv(217, 76%, 96%)
cmyk(76%, 47%, 0%, 4%)
rgba(59, 130, 246, 1)
대비색 · 명암비 (WCAG)
두 색 명암비 자세히 →이 배경에는 검은색 글자가 더 잘 읽혀요.
어울리는 배색
팔레트 더 만들기 →명도 스케일 (밝게 → 어둡게)
색을 클릭하면 그 값으로 바뀝니다.
🎨 색상 종합 도구란?
HEX·RGB·HSL·HSV·CMYK 변환은 물론, 입력한 색의 대비색(WCAG 명암비), 보색·유사색·삼각배색, 명도 스케일, 가장 가까운 CSS 이름색까지 한 화면에서 보여 줍니다. HEX뿐 아니라 rgb(59,130,246),hsl(217,91%,60%), tomato 같은 이름색을 그대로 붙여넣어도 인식합니다.
🔗 공유 팁
주소 끝에 ?c=ff5733 처럼 색상값을 붙이면 그 색이 열린 상태로 공유됩니다.
📋 색상 형식 비교
| 형식 | 예시 | 특징 |
|---|---|---|
| HEX | #3B82F6 | 웹에서 가장 흔함 |
| RGB | rgb(59, 130, 246) | 빨강/초록/파랑 조합 |
| HSL | hsl(217, 91%, 60%) | 색조/채도/밝기 |
| HSV | hsv(217, 76%, 96%) | 색조/채도/명도(디자인 툴) |
| CMYK | cmyk(76%, 47%, 0%, 4%) | 인쇄용 잉크 모델 |
🔬 대비색과 명암비는 왜 중요할까
글자색과 배경색의 명암비(contrast ratio)가 낮으면 저시력 사용자뿐 아니라 일반 사용자도 읽기 어렵습니다. 웹 접근성 기준 WCAG는 본문 텍스트에 4.5:1(AA), 큰 텍스트에 3:1, 더 엄격하게는 7:1(AAA)를 권장합니다. 이 도구는 입력한 색을 배경으로 두고 흰색/검은색 글자의 명암비를 계산해 어떤 글자색이 통과하는지 바로 알려 줍니다.
자주 묻는 질문
rgb()나 hsl() 값을 그대로 넣어도 되나요?▼
네. HEX는 물론 rgb(59,130,246), hsl(217,91%,60%), tomato 같은 CSS 이름색까지 입력창에 그대로 붙여넣으면 자동으로 인식해 모든 형식으로 변환합니다.
대비색은 어떻게 정해지나요?▼
입력한 색을 배경으로 두고 흰색·검은색 글자의 WCAG 명암비를 각각 계산해, 더 높은 쪽을 추천 글자색으로 안내합니다. AA(4.5:1)·AAA(7:1) 통과 여부도 함께 표시합니다.
CMYK 값이 인쇄물과 다르게 보여요.▼
CMYK는 잉크 기준 모델이라 화면(RGB)과 완벽히 일치하지 않습니다. 실제 인쇄는 용지·프로파일에 따라 달라지므로 변환값은 참고용으로 사용하세요.
특정 색 링크를 공유할 수 있나요?▼
주소 끝에 ?c=ff5733 처럼 색상값을 붙이면 그 색이 선택된 상태로 페이지가 열립니다. 블로그·메신저에 바로 공유하기 좋습니다.