색상 팔레트 생성기

조화 배색

• 보색: 기준 + 색상환 반대편(180°). 고대비, 강렬함. 브랜드 색 위의 행동 유도 버튼에 좋습니다.
• 유사색: 서로 30° 이내의 3-5색. 차분하고 조화로우며 보통 따뜻하거나 차가운 계열. 한 계열 테마의 배경과 일러스트에 좋습니다.
• 삼색: 균등 간격(120°)의 3색. 강렬하고 균형 잡힘. 아동 제품과 대담한 브랜드에 흔합니다.
• 분할 보색: 기준 + 보색을 둘러싼 두 색(150°와 210°). 보색보다 풍부하고 덜 긴장됩니다.
• 사색 / 정사각: 90°의 4색. 균형 잡기가 더 어려움 — 하나를 주조색으로 정하세요.
• 단색: 단일 색조, 다양한 채도와 명도. 우아하고 통일감 있음. 중성색과 짝짓지 않으면 강조가 부족합니다.

실무용 팔레트 구조

디자인 시스템은 보통 다음이 필요합니다:

• Primary(기준 브랜드)
• Secondary(보조 브랜드)
• Accent(CTA, 하이라이트)
• Neutral scale(배경, 텍스트, 테두리 — 회색 5-10개)
• Semantic(success, warning, error, info)
• Surface(패널 배경, 오버레이)

조화 팔레트는 primary + secondary + accent를 줍니다. 중성색과 시맨틱은 보통 별도 관례에서 나옵니다(채도 낮춘 준회색, 표준화된 시맨틱 색조).

내보내기 형식

CSS 커스텀 속성:

:root {
  --brand-primary: #2E86AB;
  --brand-secondary: #A23B72;
  --brand-accent: #F18F01;
  --brand-neutral: #C73E1D;
}

Tailwind config:

theme: {
  extend: {
    colors: {
      brand: {
        primary: '#2E86AB',
        secondary: '#A23B72',
        accent: '#F18F01',
      }
    }
  }
}

SCSS:

$brand-primary: #2E86AB;
$brand-secondary: #A23B72;

대비와 접근성

조화 배색이 접근성을 보장하지는 않습니다. 팔레트 조합을 WCAG 대비 요건과 대조해 확인하세요:

• 배경 대비 본문 텍스트: 최소 4.5:1 (AA).
• 큰 텍스트: 3:1.
• 비텍스트(버튼, 아이콘, 포커스 링): 3:1.

생성기를 대비 검사기와 짝지어 준수하는 조합을 찾으세요.

팁

• 무작위가 아닌 정의된 기준 색에서 시작하세요 — 기준에 의미(브랜드, 좋아하는 사진, 문화적 참조)가 있을 때 조화가 의도적으로 느껴집니다.
• 실제 사용에서 팔레트를 테스트하세요: 버튼 위, 텍스트 대비, 차트 안. 스와치에서 좋아 보인다고 UI에서 잘 작동하는 것은 아닙니다.
• 대형 표면용 팔레트는 채도를 약간 낮추세요 — 완전 채도의 배경은 눈을 피로하게 합니다.
• 강조색은 드물게 유지하세요: UI의 80%가 primary와 secondary라면 최대 효과를 위해 강조색은 접점의 10%(CTA)에만 쓰세요.