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.
Comece pelos valores da sua marca e pelo público-alvo. Use a psicologia das cores como guia: azul transmite confiança e profissionalismo, verde sugere crescimento e natureza, vermelho sinaliza urgência ou paixão, roxo implica luxo ou criatividade. Limite sua paleta principal a 3-5 cores. Garanta contraste suficiente (proporção 4,5:1) para acessibilidade.
A regra 60-30-10 é um princípio de design para uso equilibrado de cores: 60% cor dominante (fundos, áreas grandes), 30% cor secundária (cartões, barras laterais, elementos de UI), 10% cor de destaque (botões, realces, call-to-actions). Isso cria hierarquia visual mantendo a harmonia. Cores neutras geralmente formam a base dos 60% no design de UI moderno.
WCAG 2.1 exige uma proporção de contraste mínima de 4,5:1 para texto normal e 3:1 para texto grande. Use ferramentas como WebAIM Contrast Checker ou DevTools do navegador para verificar. Não dependa apenas da cor para transmitir informações (use também ícones/texto), teste com simuladores de daltonismo e garanta que os elementos interativos tenham estados de foco visíveis.
Para desenvolvimento web: códigos hex (#RRGGBB) para CSS, valores RGB/HSL para manipulação dinâmica e propriedades CSS personalizadas para temas. Para ferramentas de design: a maioria aceita códigos hex; Figma e Sketch suportam bibliotecas de cores. Para Tailwind CSS: defina cores em tailwind.config.js sob theme.extend.colors. Para branding: inclua valores Pantone (impressão), CMYK (impressão) e RGB (tela).