Utilore

RGB를 HEX로

rgb(31, 95, 214)을 붙여넣으면 — 쉼표든 공백이든 상관없습니다 — #1f5fd6이 나옵니다. CSS에도, 디자인 파일에도, 스타일 가이드에도 그대로 쓸 수 있습니다.

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

명도 대비:

사용 방법

  1. RGB 또는 RGBA 값을 붙여넣거나 색상 선택기로 고릅니다.
  2. 다른 형식 위에 나오는 HEX 코드를 확인합니다.
  3. HEX 줄 옆의 「복사」를 누릅니다.

알아두면 좋은 점

디자이너가 HEX를 요구하는 이유

HEX는 숫자 셋이 아니라 하나의 덩어리여서 명세서나 이슈, 대화창에 붙여도 자릿수가 빠지지 않습니다. 디자인 도구가 기본으로 보여 주는 표기이기도 해서, HEX로 적은 팔레트는 모두가 보고 있는 값과 그대로 일치합니다.

알파 채널은 어떻게 되나

투명도가 있는 rgba()를 넣으면 결과는 여덟 자리 HEX입니다. 마지막 두 자리가 0에서 255 사이의 알파 값입니다. 최신 브라우저는 제대로 읽지만 오래된 브라우저는 그렇지 않으니, 넓은 호환이 필요한 곳에는 rgba()를 남겨 두세요.

자주 묻는 질문

숫자를 rgb(...)로 감싸야 하나요?

쉼표든 공백이든 rgb()와 rgba()의 완전한 표기를 받습니다. 255를 넘는 값은 조용히 되돌지 않고 최대값에서 멈춥니다.

왜 제 HEX가 여덟 자리인가요?

색에 알파 채널이 있기 때문입니다. 투명도를 빼면 익숙한 여섯 자리 코드가 나옵니다.

서버로 무언가 전송되나요?

아니요. 변환은 모두 페이지 안에서 이뤄지므로 공개 전 브랜드 색상도 그대로 남습니다.

관련 도구