색상 코드 변환기

대비율 읽는 법

WCAG 2 는 본문 글자에 배경 대비 4.5:1 이상을 AA 적합 기준으로, 7:1 이상을 AAA 기준으로 정합니다. 18pt 이상 큰 글자나 굵은 14pt 는 3:1 이면 AA 입니다. (WCAG 는 W3C 의 웹 접근성 지침 명칭입니다.) 파란 #2457E6 은 흰 배경에서 약 5.9:1 로 본문에도 쓸 수 있고, 검정 배경에선 3.6:1 이라 큰 글자에만 맞습니다.

HSL 이 편한 이유

HSL 은 색상(H)·채도(S)·밝기(L)라서 같은 색을 밝게·어둡게 만들 때 L 만 바꾸면 됩니다. 아래 밝기 단계가 그 결과입니다. 버튼을 누르면 그 색이 입력칸으로 들어갑니다.

HSV·HCV 는

HSV(포토샵·피그마에서는 HSB)는 색상(H)·채도(S)·명도(V)로, 색 선택기의 사각형이 이 방식입니다. V 는 가장 밝은 채널 값, S 는 그 안에서 색이 얼마나 짙은지입니다. HCV 는 채도 대신 채도량(C, Chroma) — 가장 밝은 채널과 가장 어두운 채널의 차이 — 를 씁니다. #2457E6 은 hsv(224, 84%, 90%), hcv(224, 76%, 90%)입니다. 이 둘은 CSS 에는 없는 표기라 웹 코드에는 HEX·RGB·HSL 을 쓰세요.

받아들이는 형식

#RGB, #RRGGBB, #RRGGBBAA, rgb()/rgba(), hsl()/hsla(), hsv()·hsb()·hcv(), '36, 87, 230' 같은 숫자 셋, 그리고 흔한 CSS 색 이름(navy, coral 등 50여 개).

자주 묻는 질문