세 표기는 같은 색의 다른 주소
HEX(#3b82f6)는 빨강·초록·파랑 값을 16진수 두 자리씩 붙인 것이고, RGB(rgb(59,130,246))는 같은 값을 10진수로 적은 것입니다. 둘은 표기만 다를 뿐 완전히 같은 정보입니다. HSL은 색상(Hue, 0–360°)·채도(Saturation)·명도(Lightness)로 나눈 표현으로, "같은 색을 조금 더 연하게" 같은 조정을 숫자 하나만 바꿔서 할 수 있어 디자인 시스템에서 선호됩니다. 변환은 브라우저에서만 계산됩니다.
HSL과 HSB(HSV)는 다르다
포토샵·피그마의 색상 피커는 HSB(밝기 Brightness)를 쓰고 CSS는 HSL(명도 Lightness)을 씁니다. 같은 H·S 값이어도 마지막 값의 의미가 달라 숫자를 그대로 옮기면 다른 색이 됩니다. HSB에서 B=100%는 "가장 선명한 상태"이지만 HSL에서 L=100%는 항상 흰색입니다. 순수한 빨강은 HSB로 (0,100,100), HSL로는 (0,100%,50%)입니다. 디자인 툴의 값을 CSS에 넣을 때는 HEX를 거치는 편이 안전합니다.
흰 글자냐 검은 글자냐
WCAG는 두 색의 상대 휘도로 대비율을 계산합니다. 휘도는 단순 RGB 평균이 아니라 사람 눈이 초록에 민감한 점을 반영해 0.2126R + 0.7152G + 0.0722B로 가중하고, 감마 보정까지 거칩니다. 본문 글자는 4.5:1 이상(AA), 굵거나 큰 글자는 3:1 이상이면 통과합니다. 배경 휘도가 약 0.179를 넘으면 검은 글자가, 그 아래면 흰 글자가 대비가 높습니다. 중간 명도의 색(주황, 연두 등)은 둘 다 AA를 못 넘는 경우가 흔하니, 그때는 배경을 더 어둡게 하거나 밝게 조정해야 합니다.
지원하는 입력 형식
#abc(3자리 축약), #aabbcc, rgb(…)/rgba(…), hsl(…)/hsla(…)를 받습니다. 투명도(알파)는 대비 계산을 복잡하게 만들어 무시하며, 불투명한 색으로 계산합니다.
자주 묻는 질문
대비율 수치가 다른 도구와 약간 달라요.
HSL을 거쳐 변환하면 반올림으로 RGB 값이 1 정도 달라질 수 있고, 그러면 소수점 둘째 자리가 바뀝니다. 정확한 값이 필요하면 HEX나 RGB를 직접 입력하세요.
색 이름(red, cornflowerblue)도 입력되나요?
현재는 코드 형식만 지원합니다. 색 이름은 브라우저 개발자 도구에서 HEX로 확인한 뒤 입력하면 됩니다.