HEX(3·4·6·8자리), rgb()/rgba(), hsl()/hsla() 중 아무 형식이나 입력하면 나머지 형식으로 바꿔 줍니다. # 은 빼도 되고, "255, 0, 0"처럼 숫자만 넣어도 됩니다.
색 고르기 버튼으로 화면에서 색을 골라도 됩니다(투명도는 선택기에서 지원하지 않음).
아래 명도 대비 확인에서 글자색과 배경색을 넣으면 WCAG 2.x 대비 비율과 AA·AAA 통과 여부를 보여 줍니다.
변환 예시
HEX
RGB
HSL
#1E90FF
rgb(30, 144, 255)
hsl(209.6, 100%, 55.9%)
#FF6347
rgb(255, 99, 71)
hsl(9.1, 100%, 63.9%)
#2E8B57
rgb(46, 139, 87)
hsl(146.5, 50.3%, 36.3%)
#FFD700
rgb(255, 215, 0)
hsl(50.6, 100%, 50%)
#808080
rgb(128, 128, 128)
hsl(0, 0%, 50.2%)
#00000080
rgba(0, 0, 0, 0.502)
hsla(0, 0%, 0%, 0.502)
대비 예시
글자 / 배경
대비
AA 일반
AA 큰 글자
AAA 일반
가A#767676 / #FFFFFF
4.54:1
통과
통과
미달
가A#777777 / #FFFFFF
4.47:1
미달
통과
미달
가A#595959 / #FFFFFF
7.00:1
통과
통과
통과
가A#FFFFFF / #1E90FF
3.23:1
미달
통과
미달
가A#FFFFFF / #0066CC
5.56:1
통과
통과
미달
가A#000000 / #FFD700
14.97:1
통과
통과
통과
흰 배경에서 AA를 통과하는 가장 옅은 회색은 #767676(4.54:1)이고, 한 단계 옅은 #777777은 4.47:1로 미달입니다.
계산 기준
대비 비율 = (밝은 색의 상대 휘도 + 0.05) ÷ (어두운 색의 상대 휘도 + 0.05). 상대 휘도는 WCAG 2.x 정의(sRGB 선형화 후 0.2126R + 0.7152G + 0.0722B)를 따릅니다.
통과 여부는 반올림하지 않은 값으로 판정하고, 화면의 비율은 소수 둘째 자리에서 내림해 보여 줍니다. 4.499:1이 4.50:1로 보여 통과한 것처럼 오해하지 않게 하기 위해서입니다.
HEX·RGB는 채널을 정수로 반올림(0.5는 올림), HSL은 소수 첫째 자리까지 반올림합니다. 알파는 HEX에서 0~255 정수, rgba()에서 소수 셋째 자리까지 표시합니다.
CSS 색 이름(red 등)과 CMYK, HSB는 지원하지 않습니다.
자주 묻는 질문
HEX 코드가 8자리일 때 마지막 두 자리는 무엇인가요?
투명도(알파)입니다. 00이 완전 투명, FF가 완전 불투명이며 80은 약 50%(128/255)입니다. 4자리 #RGBA도 같은 뜻으로, 각 자리를 두 번 쓴 8자리와 같습니다. 오래된 브라우저나 일부 디자인 도구는 8자리 HEX를 읽지 못하니 그럴 때는 rgba()를 쓰세요.
WCAG 대비 4.5:1 기준은 어디에 적용되나요?
본문처럼 일반 크기 글자가 배경과 이루는 대비의 AA 기준입니다. 큰 글자(24px 이상, 굵으면 약 18.66px 이상)는 3:1, 아이콘·입력칸 테두리 같은 비텍스트 요소도 3:1이 기준입니다. 로고나 비활성화된 버튼 글자, 순수 장식은 예외입니다. 한국의 웹 접근성 인증(KWCAG 2.2)도 같은 4.5:1 기준을 씁니다.
포토샵의 HSB와 CSS의 HSL은 같은 건가요?
다릅니다. HSB(HSV)의 B는 밝기(명도 최대 = 순색)이고, HSL의 L은 0%가 검정, 50%가 순색, 100%가 흰색입니다. 그래서 같은 빨강이 HSB로는 (0°, 100%, 100%), HSL로는 (0°, 100%, 50%)입니다. 디자인 도구의 HSB 값을 CSS에 그대로 넣으면 색이 달라집니다.
HEX를 HSL로 바꿨다가 다시 HEX로 바꾸면 값이 달라지지 않나요?
이 도구는 H·S·L을 소수 첫째 자리까지 남기기 때문에 1,677만 가지 HEX 색 모두 원래 값으로 돌아오는 것을 확인했습니다. H·S·L을 정수로 반올림하는 도구에서는 1~2 차이가 날 수 있습니다. RGB 값은 각 채널을 정수로 반올림(0.5는 올림)합니다.
반투명한 글자색의 대비는 어떻게 계산하나요?
글자색을 배경색 위에 알파 합성한 실제 보이는 색으로 대비를 계산합니다. 배경색도 반투명이면 흰 바탕 위에 있다고 보고 먼저 합성합니다. 실제 화면에서 배경 뒤에 다른 색이 있다면 결과가 달라질 수 있습니다.
세상의 모든 유틸