컬러 팔레트 생성기
기준 색에서 보색·삼각·유사·모노크롬 4가지 조화 자동 생성. 디자이너·개발자 필수 도구.
📖 컬러 팔레트 가이드
컬러 팔레트는 디자인의 통일감과 분위기를 결정하는 핵심 요소로, 색채학의 "보색·유사색·삼각·사각" 조화 원리에 따라 생성됩니다. 본 도구는 기준 색상에서 HSL 색상환 기반으로 5가지 조화 패턴을 자동 생성하며, 디자인 시스템·웹사이트 테마·브랜딩 색상을 빠르게 잡는 데 유용합니다.
계산 공식
색상환 기반 조화: 보색 (Complementary) = 180° 반대 유사색 (Analogous) = ±30° 인접 삼각 (Triadic) = 120° 간격 3색 사각 (Tetradic) = 90° 간격 4색 단색 (Monochromatic) = 동일 H + 다른 S/L
언제 사용하나요
- •웹사이트·앱 테마 색상 결정
- •브랜딩 색상 팔레트 구성
- •디자인 시스템 토큰 정의
- •데이터 시각화 (차트·그래프) 색상
사용 팁
- ✓메인 색 1 + 보조 2~3 + 강조 1 = 5색 조합이 표준
- ✓60-30-10 규칙 — 메인 60% + 보조 30% + 강조 10% 비율
- ✓WCAG 명도 대비 4.5:1 이상 (텍스트 가독성)
- ✓Coolors·Adobe Color로 전문가 팔레트 참고 + 본 도구로 빠르게 조정
자주 묻는 질문
Q. 어느 조화가 가장 좋나요?▼
A. 유사색은 안정·차분 / 보색은 강한 대비 / 삼각은 활기. 브랜드 톤에 따라 선택.
Q. 다크모드는 어떻게?▼
A. 동일 H 유지 + L 값만 반전 (밝은 색 → 어두운 색). HSL 기반 조정이 가장 쉬움.
Q. 접근성(색맹 사용자)은?▼
A. 색만으로 정보 전달 X — 텍스트·아이콘 병행. WCAG 콘트라스트 4.5:1 + 색맹 시뮬레이터 검증.
Q. Tailwind 색상과 어떻게 매핑?▼
A. 생성된 HEX → Tailwind v4 oklch 색상 토큰 정의 (또는 v3 hex 그대로 사용).