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