가이드
일관된 느낌의 컬러 팔레트를 만드는 방법
웹사이트 전반에서 톤을 안정적으로 유지하는 팔레트 구성 방법입니다.
일관성은 좋은 색 하나보다 역할 분리와 반복 사용에서 나옵니다.
Start with role-based color groups
Split your palette into primary, neutral, accent, and utility groups.
Role-based grouping is easier to maintain than random shade collections.
Build from one stable base color
Pick a base color that reflects your brand tone.
Generate lighter and darker variations for states and section backgrounds.
Limit your active palette
Too many active colors create inconsistency across components.
Keep the working set small and intentional.
- 1 primary brand color.
- 2-3 neutral shades for structure.
- 1 accent color for emphasis.
- Optional utility colors for status messages.
Test repeated UI patterns
Apply colors to buttons, cards, forms, and navigation.
If the same pattern looks different across pages, tighten your palette rules.
Document usage notes
Add short notes such as 'accent only for CTA and links'.
These notes reduce guesswork when multiple people edit the site.
Useful when
- Starting a new website design.
- Cleaning up mixed UI colors.
- Documenting design tokens for handoff.
Consistency is a process
Define roles, test in context, and keep your palette small enough to apply reliably.