Pick 1-2 brand colors, then build a complementary palette around them. Use a bold primary with neutral supporting colors.
60% dominant color (backgrounds), 30% secondary color (cards, sections), 10% accent color (buttons, links).
Ensure text-to-background contrast ratios meet WCAG AA (4.5:1 for normal text). Test with colorblindness simulators.
3-5 colors is optimal for most projects. Too many colors create visual noise. Use shades and tints of the same hue for variety.
브랜드 가치와 목표 대상으로 시작하세요. 색채 심리학을 가이드로 활용하세요: 파란색은 신뢰와 전문성, 초록색은 성장과 자연, 빨간색은 긴박감이나 열정, 보라색은 럭셔리나 창의성을 전달합니다. 기본 팔레트를 3-5가지 색상으로 제한하세요. 접근성을 위해 충분한 대비(4.5:1 비율)를 확보하세요.
60-30-10 규칙은 균형 잡힌 색상 사용을 위한 디자인 원칙입니다: 60% 주요 색상(배경, 큰 영역), 30% 보조 색상(카드, 사이드바, UI 요소), 10% 강조 색상(버튼, 하이라이트, CTA). 이는 조화를 유지하면서 시각적 위계를 만듭니다. 중성 색상은 현대 UI 디자인에서 60% 기본을 형성하는 경우가 많습니다.
WCAG 2.1은 일반 텍스트에 최소 4.5:1, 큰 텍스트에 3:1의 대비 비율을 요구합니다. WebAIM Contrast Checker나 브라우저 DevTools 같은 도구로 확인하세요. 정보 전달에 색상만 의존하지 말고(아이콘/텍스트도 사용), 색맹 시뮬레이터로 테스트하고, 대화형 요소에 가시적인 포커스 상태가 있는지 확인하세요.
웹 개발용: CSS용 hex 코드(#RRGGBB), 동적 조작용 RGB/HSL 값, 테마용 CSS 사용자 정의 속성. 디자인 도구용: 대부분 hex 코드를 허용하며 Figma와 Sketch는 색상 라이브러리를 지원합니다. Tailwind CSS용: tailwind.config.js의 theme.extend.colors에서 색상을 정의하세요. 브랜딩용: Pantone(인쇄), CMYK(인쇄), RGB(화면) 값을 포함하세요.