색상 팔레트 생성기
기준 색상에서 조화로운 색상 조합을 자동으로 생성합니다.
팔레트 내보내기
팔레트
#3B82F6
#F6AF3C
색상 팔레트 가이드
색상 조화
- •보색: 색상환에서 반대편 (대비 강조)
- •유사색: 인접한 색상들 (자연스러운 조화)
- •삼색: 120° 간격 3색 (균형 잡힌 대비)
- •단색: 같은 색상의 명도/채도 변형
디자인 팁
- •주 색상 60%, 보조 색상 30%, 강조 색상 10%
- •배경과 텍스트의 명도 대비 충분히
- •색약/색맹 사용자를 위해 색상만으로 정보 전달 지양
- •웹 접근성 가이드라인(WCAG) 대비율 확인
색상 팔레트 생성기란?
색상 팔레트 생성기는 기준 색상 하나를 입력하면 보색·유사색·삼각형·단색 등 색채 이론에 기반한 조화로운 색상 조합을 자동으로 생성하는 무료 도구입니다. 생성된 팔레트는 CSS 변수, JSON, Tailwind CSS 설정 파일로 내보낼 수 있어 웹 개발과 UI 디자인에 바로 적용할 수 있습니다. 브랜드 색상 개발, 웹사이트 테마 구성, 디자인 시스템 구축에 활용하세요.
색상 팔레트 생성기 활용 팁
- 60-30-10 법칙: 주색 60%, 보조색 30%, 강조색 10%로 배분하면 균형 잡힌 디자인이 됩니다.
- 보색 대비: 강렬한 인상을 줄 때는 보색 조합을, 부드러운 느낌에는 유사색 조합을 사용하세요.
- CSS 변수 활용: 생성된 CSS 변수 코드를 `:root`에 넣으면 다크모드 전환도 쉽게 구현됩니다.
- Tailwind 내보내기: `tailwind.config.js`의 `colors`에 붙여넣으면 커스텀 색상을 즉시 사용할 수 있습니다.
- 접근성 확인: 팔레트 완성 후 색상 변환기의 대비 비율 확인으로 WCAG 기준을 충족했는지 검증하세요.