MyDevTools
KO

색상 변환기

HEX, RGB, HSL, CMYK 간 색상 변환, 9단계 색조 팔레트 생성, 두 색상의 WCAG 대비를 브라우저에서 확인합니다.

입력 내용과 파일은 브라우저 밖으로 전송되지 않습니다

색상

예시: #3b82f6, rgb(59, 130, 246), hsl(217, 91%, 60%), cmyk(76%, 47%, 0%, 4%)

변환된 형식

대비 검사기

예시 텍스트16 px

예시 텍스트24 px

큰 텍스트는 보통 굵기 24 px 이상 또는 굵게 약 18.67 px 이상인 글자입니다.

대비 비율—

    틴트와 셰이드

    선형 sRGB에서 검정(셰이드)과 흰색(틴트)을 섞었습니다. 견본을 클릭하면 HEX를 복사합니다.

    이 페이지에서

    흔히 쓰는 표기의 CSS 색상을 붙여 넣으면 같은 색을 HEX, RGB, HSL, CMYK로 보여 주고 바로 복사할 수 있습니다. 더 밝고 어두운 색조 팔레트를 만들고, 글자색과 배경색의 WCAG 대비도 검사합니다.

    상세 기능

    형식은 자동으로 감지됩니다: #3b82f6, 짧은 형식 #38f(# 생략 가능), 0–255 또는 퍼센트 채널의 rgb(59, 130, 246)/rgba(…), deg를 붙여도 되는 hsl(217, 91%, 60%), 그리고 cmyk(76%, 47%, 0%, 4%). rgb(59 130 246 / 50%)처럼 공백으로 구분한 CSS 문법도 됩니다. 출력에는 투명도가 없으므로 알파 값은 받되 무시합니다. 잘못되었거나 범위를 벗어난 값은 추측하지 않고 오류로 표시합니다. 기본 색상 선택기로 고를 수도 있습니다.

    팔레트는 현재 색에 검정(셰이드)과 흰색(틴트)을 20·40·60·80% 비율로 선형 sRGB에서 섞은 9개 견본이며, 가운데가 원래 색입니다. 견본을 클릭하면 HEX 코드를 복사합니다. 대비 검사기는 글자색과 배경색으로 대비율을 계산하고 WCAG 2.x의 네 기준(일반 텍스트 AA 4.5:1·AAA 7:1, 큰 텍스트 AA 3:1·AAA 4.5:1) 통과 여부를 보여 줍니다.

    모든 변환은 페이지에서 실행되는 JavaScript 공식이며 아무것도 업로드하지 않습니다. CMYK는 ICC 프로파일 없는 단순 공식이라 참고용일 뿐 인쇄 교정용은 아닙니다. HSL과 CMYK는 정수로 반올림되므로 역변환 시 원래 값과 1 차이가 날 수 있습니다.

    실용적인 예제

    HEX를 모든 형식으로: #3b82f6 → rgb(59, 130, 246), hsl(217, 91%, 60%), cmyk(76%, 47%, 0%, 4%).

    HSL을 HEX로: hsl(0, 100%, 50%)는 #FF0000이 되며, cmyk(0%, 100%, 100%, 0%)도 같습니다.

    대비 검사: 흰 배경 #ffffff 위 회색 글자 #777777의 대비율은 4.48:1로, 큰 텍스트 AA(3:1)는 통과하지만 일반 텍스트 AA(4.5:1)는 통과하지 못합니다.

    기본 조합: 미리 설정된 #1e3a8a와 #ffffff는 10.36:1로 WCAG 네 단계를 모두 통과합니다.

    이 도구 사용 방법

    1. 색상 입력

      '수동 입력'에 값(HEX, rgb(), hsl(), cmyk())을 입력하거나 붙여 넣고 '변환' 또는 Enter를 누릅니다. '색상 선택기'로 고를 수도 있습니다.

    2. 필요한 형식 복사

      '변환된 형식'에서 HEX, RGB, HSL, CMYK 옆의 복사 버튼을 누릅니다.

    3. 틴트나 셰이드 복사

      '틴트와 셰이드'에서 견본을 클릭해 HEX 코드를 복사합니다.

    4. 대비 확인

      '대비 검사기'에서 '전경색'과 '배경색'을 정하고 대비율과 AA/AAA 결과를 확인합니다.

    팁 및 모범 사례

    • #은 생략할 수 있고 세 자리 짧은 형식도 됩니다: 38f는 #3388FF로 읽힙니다.
    • 색상(hue)은 deg를 붙여도 되고 빼도 됩니다. 채도와 명도는 0~100입니다.
    • 범위를 벗어난 값(예: rgb(300, 0, 0))은 몰래 잘라내지 않고 거부합니다.
    • 본문 텍스트는 최소 4.5:1을 목표로 하세요. 3:1은 큰 텍스트(24px 또는 굵은 18.66px)에만 충분합니다.
    • 이 CMYK 값을 인쇄 작업에 쓰지 말고, 인쇄소에 ICC 프로파일 기준 값을 요청하세요.