같은 색이라도 여러 형식으로 표현됩니다

디자인 도구는 HEX, CSS는 RGB나 HSL, 접근성 확인에서는 대비(Contrast). 색을 다루는 작업에서는 같은 색이라도 여러 표기를 오가게 됩니다. 형식 간 변환은 디자인 전달, 프론트엔드 구현, 접근성 리뷰를 잇는 데 도움이 됩니다.

HEX·RGB·HSL 색상 변환과 대비(Contrast) 확인 방법

**색상 변환·대비 확인 도구**를 사용하면 HEX, RGB, HSL 변환과 전경색·배경색 대비 확인을 브라우저에서 할 수 있습니다.

예시: 버튼의 글자색 확인하기

브랜드 컬러 #2563eb를 버튼 배경으로 쓰고 글자색을 흰색으로 하고 싶다고 합시다.

.primary-button {
  background: #2563eb;
  color: #ffffff;
}

도구에 전경색 #ffffff, 배경색 #2563eb를 넣으면 구현 전에 대비 비율을 확인할 수 있습니다. 충분히 읽힌다면 그대로 쓰고, 낮다면 배경을 진하게 하거나 글자색을 바꾸거나 버튼 크기·굵기를 조정합니다. 같은 파랑이라도 #60a5fa처럼 밝게 하면 흰 글자로는 읽기 어려워질 수 있으니, 인상이 아니라 수치로 확인하세요.

스타일뿐 아니라 가독성도 확인하기

색 조합이 보기에는 멋져도 모바일 화면, 밝은 디스플레이, 저품질 모니터에서는 읽기 어려울 수 있습니다. 버튼, 라벨, 링크, 알림, 내비게이션 상태를 배포하기 전에 대비를 확인하세요.

런칭용 에셋을 준비한다면 브랜드 컬러를 정한 뒤 **파비콘 생성 도구**를 사용해 아이콘을 UI와 일관되게 유지하세요.

HSL은 변형(variation)을 만들 때 유용합니다

HSL은 hover 상태, 테두리, 옅은 배경, 비활성 상태를 위해 명도와 채도를 조정하기 쉽습니다. HEX 값을 HSL로 변환해 조정한 뒤 그 결과를 CSS에 사용하세요.

.primary-button:hover {
  background: hsl(221 83% 45%);
}

.primary-button-subtle {
  background: hsl(221 83% 96%);
  color: hsl(221 83% 32%);
}

hover용으로 살짝 어둡게, 옅은 배경용으로 명도를 올리고, 글자색만 진하게 하는 조정은 색을 HSL로 두면 논리적으로 이해하고 리뷰에서 설명하기도 쉽습니다.

요약

색상 변환과 대비 확인은 함께 다뤄야 합니다. 형식 변환은 구현을 돕고, 대비 확인은 최종 인터페이스가 읽기 쉽고 사용하기 좋게 유지되도록 보장합니다.

자주 묻는 질문

대비 비율은 어느 정도 필요한가요?

WCAG(접근성 지침)에서는 일반 크기 글자에 대해 배경과의 대비 비율 4.5:1 이상, 큰 글자(약 18pt 상당, 또는 굵게 14pt)에 대해 3:1 이상을 권장합니다. 버튼·링크 같은 조작 요소도 가독성이 중요하므로, 구현 전에 색상 변환·대비 확인 도구로 수치를 확인하면 안전합니다.

HEX·RGB·HSL은 어떻게 구분해 쓰나요?

HEX(#2563eb)는 간결해 디자인 도구와 코드에서 표준입니다. RGB는 투명도(rgba)를 다룰 때 편리합니다. HSL은 색상·채도·명도를 직관적으로 조정할 수 있어, hover용으로 어둡게·배경용으로 옅게 같은 “같은 색의 변형”을 만들기에 좋습니다.

같은 색인데 형식에 따라 다르게 보이나요?

색 자체는 동일하지만, HSL로 하면 “명도를 5% 낮추기” 같은 조정이 직관적입니다. 인상만으로 결정하지 말고 대비 비율이라는 수치로 가독성을 담보하는 것이 핵심입니다.