색상 변환기

HEX, RGB, HSL 값이나 색상 이름을 붙여 넣으면 모든 형식을 한 번에 보여 주고, WCAG 명도 대비도 검사해요.

색상 견본

—

#rgb, #rrggbb, #rrggbbaa, rgb(), rgba(), hsl(), hsla) 또는 rebeccapurple 같은 CSS 색상 이름을 입력할 수 있어요.

HEX—

RGB—

HSL—

HSV—

CMYK (대략적인 값)—

명도별 색조와 음영, 눌러서 복사

배경 견본

흰색 위 — 대비

검은색 위 — 대비

내 배경 위 — 대비

각 비율은 WCAG 2.x 기준이에요. 큰 텍스트는 24px 이상이거나, 18.66px 이상이면서 굵은 글씨예요. 통과 여부는 정확한 비율로 판단하며, 반투명 색상은 먼저 각 배경과 섞어서 계산해요.

색상 코드 변환하기 방법

CMYK 값이 대략적인 이유는 무엇인가요?

CMYK 값은 인쇄 잉크, 용지, 색상 프로파일에 따라 달라져요. 이 변환기는 이 세 가지를 고려하지 않는 기본 산술 공식을 쓰기 때문에, 인쇄물의 색은 화면과 다르게 나올 수 있어요. 대량 인쇄 전에는 인쇄소에 교정쇄를 요청하세요.

명도 대비 비율은 어떻게 계산하나요?

WCAG 2.x는 감마 보정을 거친 빨강, 초록, 파랑 값으로 각 색의 상대 휘도를 구해요. 비율은 밝은 쪽 휘도에 0.05를 더한 값을 어두운 쪽 휘도에 0.05를 더한 값으로 나눈 것이에요. 흰 바탕에 검은 글자는 21:1로, 가능한 최고 값이에요.

검사에는 어떤 기준값을 쓰나요?

WCAG 2.x는 AA 등급에서 일반 텍스트는 4.5:1 이상, 큰 텍스트는 3:1 이상을 요구해요. AAA 등급에서는 각각 7:1과 4.5:1이에요. 큰 텍스트는 24px 이상이거나, 18.66px 이상이면서 굵은 글씨인 경우예요.

입력 상자에는 어떤 색상 형식을 넣을 수 있나요?

숫자 세 자리, 여섯 자리, 여덟 자리 HEX 코드, rgb()와 rgba(), hsl()과 hsla(), 그리고 rebeccapurple 같은 CSS 색상 이름을 입력할 수 있어요. 브라우저가 CSS 색상으로 이해하는 값이라면 모두 동작해요.

아직 리뷰가 없어요. 첫 리뷰를 남겨 보세요.