Utilore

색상 변환기

#1f5fd6, 1f5fd6, #1f5, rgb(31, 95, 214)처럼 익숙한 어떤 표기로 입력해도 나머지 표기가 한꺼번에 나옵니다. 읽히는 글자색을 정하는 데 필요한 명도 대비 수치도 함께 나옵니다.

  • #1f5fd6 HEX
  • rgb(31, 95, 214) RGB
  • hsl(219, 75%, 48%) HSL

명도 대비:

사용 방법

알아두면 좋은 점

같은 색의 세 가지 표기

HEX는 짧고 CSS에서 두루 통합니다. RGB는 채널을 그대로 드러내므로 값을 손으로 쓰지 않고 계산해서 낼 때 유용합니다. HSL은 색상·채도·명도를 나타내므로 «같은 색을 한 톤만 밝게»를 원할 때 알맞습니다. 세 숫자를 짐작하는 대신 하나만 움직이면 되니까요.

명도 대비는 장식이 아니다

WCAG는 본문에 배경 대비 4.5:1 이상, 큰 글자에 3:1 이상을 요구합니다. 여기 표시되는 두 수치를 보면 이 색이 흰 글자를 받을 수 있는지, 검은 글자를 받을 수 있는지, 아니면 둘 다 어려운지를 디자인이 개발로 넘어가기 전에 알 수 있습니다.

자주 묻는 질문

어떤 형식을 받나요?

세 자리, 네 자리, 여섯 자리, 여덟 자리 HEX(앞의 # 은 있어도 없어도 됩니다)와 쉼표 또는 공백으로 구분한 rgb(), rgba()입니다. 알파 값은 유지되어 HEX 값에도 반영됩니다.

왜 HSL에서는 색이 조금 달라 보이나요?

읽기 쉽도록 HSL 값을 정수로 반올림하기 때문에 되돌릴 때 채널이 1만큼 어긋날 수 있습니다. HEX와 RGB 값은 정확합니다.

서버로 무엇이든 전송되나요?

아니요. 모든 계산이 페이지 안에서 이뤄지므로 공개 전 브랜드 색상도 기기를 벗어나지 않습니다.

관련 도구