Busyyy

색상 변환기

HEX, RGB, HSL 형식 간 색상 변환과 조화/대비 도구

색상 조화

보색
유사색
삼원색
분할 보색

대비 검사기

#000000
#ffffff

Sample Text / 샘플 텍스트

The quick brown fox jumps over the lazy dog.

비율: 21.00:1AA 통과AAA 통과

이 툴 소개

컬러 컨버터는 HEX·RGB·HSL 간 색상 값을 실시간으로 변환하고, WCAG 대비 체크와 간단한 배색 조합 기능을 제공합니다. 디자이너·개발자·접근성 리뷰어가 색상 선택을 빠르게 검증할 때 유용합니다.

사용 방법

  1. HEX·RGB·HSL 중 한 형식으로 색상을 입력합니다.
  2. 나머지 형식으로 자동 변환되는 값을 확인합니다.
  3. 대비 체커에서 글자/배경 색을 비교해 WCAG AA·AAA 통과 여부를 확인합니다.
  4. 보완·유사·삼각 배색 같은 팔레트를 베이스 색에서 생성합니다.
  5. 원하는 값을 클릭 한 번에 복사해 CSS나 디자인 툴에 붙여 넣으세요.

활용 예시

  • 브랜드 색이 본문 텍스트로 WCAG AA를 통과하는지 확인.
  • 브랜드 허 기반 팔레트 빠르게 생성.
  • 디자인 파일의 HEX를 HSL로 옮겨 밝기만 조정.
  • 라이트/다크 모드에서 사용할 링크 색 결정.
  • 디자인 리뷰에서 버튼 대비 검증.

자주 묻는 질문

WCAG AA와 AAA는 무슨 뜻인가요?

접근성 대비 기준입니다. 본문 기준 AA는 4.5:1, AAA는 7:1을 요구합니다. 큰 글씨에는 더 완화된 기준이 적용됩니다.

HEX와 HSL 변환 시 값이 살짝 다르게 나오는 이유는?

HEX는 24비트고 HSL은 퍼센트 표기라서 왕복 변환 시 약간의 반올림 오차가 생길 수 있습니다.

"tomato" 같은 CSS 이름도 입력할 수 있나요?

네. 이름 색상을 입력하면 자동으로 다른 형식으로 변환됩니다.

팔레트가 서버에 저장되나요?

아니요. 모든 계산은 로컬이며 업로드되지 않습니다. 필요하면 직접 노트에 복사해 두세요.