색상 선택

HEX

RGB

HSL

대비 비율

색상 변환과 대비 검토

UI 색상을 정할 때 HEX, RGB, HSL을 오가며 같은 색인지 확인하는 일이 잦습니다. 여기서 세 표기를 한 번에 맞춰 보고, 흰색과 검은색 배경에서의 대비까지 확인할 수 있습니다. 대비는 색상이 아니라 밝기가 결정하므로 채도만 올려서는 읽히지 않는다는 점을 같이 보게 두었습니다.

디자인 토큰 정리

디자인 툴에서 받은 HEX 값을 CSS, JavaScript, 문서에 맞게 RGB와 HSL 값으로 바로 변환합니다.

명도 대비 확인

선택한 색상이 밝은 배경과 어두운 배경에서 읽히는지 대비 비율을 함께 확인합니다.

복사 중심 작업

각 형식 값을 바로 복사할 수 있어 테마 변수, 컴포넌트 스타일, 문서 표기 작업을 줄입니다.

자주 만나는 오류

디자인은 예쁜데 접근성 검사에서 걸릴 때

밝은 배경의 연회색 텍스트가 가장 흔한 탈락 사례입니다. 4.5:1을 못 넘기면 명도를 낮추거나 글자 크기를 키워 큰 텍스트 기준(3:1)으로 맞추세요.

투명도가 계산에 안 들어갈 때

대비비는 최종적으로 눈에 보이는 색으로 계산해야 합니다. 반투명 색은 배경과 합성된 뒤의 실제 색을 넣어야 정확합니다.

확인할 점

대비는 맥락과 함께 보기

계산된 대비 비율은 빠른 기준점입니다. 실제 접근성 판단은 글자 크기, 굵기, 상태 색상, 주변 배경을 같이 봐야 합니다.

HSL 조정

HSL은 색조를 유지한 채 명도와 채도를 조절하기 좋아 hover, disabled, border 색상을 만들 때 유용합니다.

대비는 색상이 아니라 밝기입니다

대비 계산은 상대 휘도만 봅니다. 그래서 채도가 높은 두 색을 나란히 두어도 밝기가 비슷하면 대비가 낮게 나옵니다. 색만 바꾸지 말고 밝기 차이를 벌려야 실제로 읽힙니다.

알파가 섞이면 계산이 달라집니다

반투명 배경 위의 글자는 실제로 보이는 색이 뒤 배경과 합성된 결과입니다. 선언된 색만으로 대비를 계산하면 실제와 다른 값이 나옵니다. 겹친 레이어가 있으면 합성 후 색으로 확인해야 합니다.

HEX와 HSL은 왕복에서 값이 변합니다

HEX는 채널당 256단계이고 HSL은 각도와 백분율이라 변환할 때 반올림이 생깁니다. HEX에서 HSL로 갔다 돌아오면 한두 단계 달라질 수 있습니다. 디자인 토큰의 원본은 한 형식으로 정해두고 그것만 수정하세요.

사용 순서

색상 선택기에서 기준 색상을 고르거나 HEX 값을 확인합니다.

RGB와 HSL 출력값을 필요한 코드 형식에 맞게 복사합니다.

흰색·검은색 대비 비율을 보고 텍스트나 아이콘에 적절한지 판단합니다.

실제 UI에서는 배경색, 글자 크기, 굵기를 함께 적용해 최종 확인합니다.

실제 입력과 결과

같은 색의 세 가지 표기

입력

#2DD4BF

결과

HEX  #2DD4BF
RGB  rgb(45, 212, 191)
HSL  hsl(173, 66%, 50%)

본문 텍스트 대비 검사

입력

전경 #64748B / 배경 #FFFFFF

결과

대비비 4.76:1
본문 AA 통과 · AAA 미달

WCAG 기준은 본문 AA 4.5:1, AAA 7:1이고 큰 텍스트는 AA 3:1입니다.

함께 쓰면 좋은 도구