색상 팔레트·대비 생성기

색상 팔레트·대비 생성기는 HSL 색상환을 기준으로 조화 색을 계산하고 실제 UI 배치와 텍스트 대비를 함께 보여줍니다. 팔레트는 현재 브라우저에서 즉시 생성됩니다.

색상 조화 방식

조화 방식은 기준색과 다른 색의 색상환 각도를 결정합니다.

• 단색은 같은 색상에서 채도와 명도를 바꿉니다.
• 유사색은 가까운 색상, 보색은 180도 반대 색상을 사용합니다.
• 분할 보색은 반대색 양옆, 삼각·사각 조화는 3·4개 축을 균등하게 사용합니다.

채도·명도와 대비

변화 폭은 팔레트 내부의 시각적 계층과 분위기를 조절합니다.

• 채도 변화가 크면 강조 차이가 커지고, 작으면 차분한 조합이 됩니다.
• 명도 변화는 배경·카드·버튼 계층 구분에 직접 영향을 줍니다.
• 각 타일은 흰색과 검정 글자 중 대비비가 높은 쪽과 수치를 표시합니다.

UI 미리보기와 코드

팔레트가 실제 구성 요소에서 어떻게 보이는지 확인한 뒤 개발 코드로 옮길 수 있습니다.

• UI 미리보기는 첫 다섯 색을 배경, 강조, 버튼과 보조 영역에 적용합니다.
• CSS·SCSS는 번호 순 변수로, JSON은 color_1 형식 키로 출력합니다.
• 의미 기반 이름이 필요하면 primary, surface, accent 등 프로젝트 토큰으로 바꿔 사용하세요.

접근성 활용법

자동 선택된 글자색도 최종 제품의 모든 상태를 보장하지는 않습니다.

• 일반 본문은 WCAG 기준 4.5:1 이상, 큰 글자는 3:1 이상을 목표로 하세요.
• hover, focus, disabled 상태와 색각 다양성도 별도로 확인하세요.
• 색상만으로 오류·성공을 구분하지 말고 아이콘이나 텍스트를 함께 제공하세요.