🎨 색상 팔레트 생성기란?
색상 팔레트 생성기는 기본 색상을 기반으로 색상 이론에 따른 조화로운 팔레트를 자동으로 생성하는 도구입니다. 보색, 유사색, 삼원색, 사각 조화, 단색 조화 등 5가지 배색 방식을 지원하며, 각 방식은 색상환에서의 관계에 기반합니다. 생성된 팔레트는 HEX/RGB 코드로 제공되며, CSS 변수로 바로 내보내기가 가능합니다. 웹 디자인, 브랜드 컬러 시스템, UI 테마, 일러스트 작업 등에 유용하게 활용됩니다.
📊 색상 조화 이론
| 조화 유형 | 색상환 관계 | 특징 |
|---|---|---|
| 보색 | 180° 반대 | 강렬한 대비, 시선 집중 |
| 유사색 | 30° 인접 | 자연스럽고 조화로움 |
| 삼원색 | 120° 간격 | 균형 잡힌 다양성 |
| 사각 조화 | 90° 간격 | 풍부하고 대담함 |
| 단색 조화 | 동일 색조 | 통일감, 세련됨 |
💡 팔레트 활용 팁
- 60-30-10 규칙: 주색 60%, 보조색 30%, 강조색 10% 배분
- 브랜드 컬러: 보색이나 삼원색으로 기억에 남는 조합
- UI 디자인: 단색 조화로 일관된 테마 구성
- 대비 확인: 텍스트와 배경의 대비율 접근성 체크
- 컨텍스트 고려: 사용 환경(웹/인쇄/영상)에 따른 색상 조정
자주 묻는 질문
어떤 팔레트 유형을 선택해야 하나요?▼
목적에 따라 다릅니다. 강렬한 인상을 원하면 보색, 부드럽고 자연스러운 느낌은 유사색, 균형 있는 다양성은 삼원색, 세련된 통일감은 단색 조화가 적합합니다.
왜 생성된 색상이 원래 색상과 약간 다를 수 있나요?▼
HSL 색공간에서 계산 후 HEX로 변환하는 과정에서 반올림이 발생할 수 있습니다. 또한 모니터 색상 프로필에 따라 다르게 보일 수 있습니다.
CSS 변수는 어떻게 사용하나요?▼
:root에 변수를 선언하고 var(--color-1) 형태로 사용합니다. Tailwind에서는 extend colors에 추가하여 bg-color-1 등으로 활용할 수 있습니다.