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.
Inizia con i valori del tuo brand e il tuo pubblico di riferimento. Usa la psicologia dei colori come guida: il blu trasmette fiducia e professionalità, il verde suggerisce crescita e natura, il rosso segnala urgenza o passione, il viola implica lusso o creatività. Limita la tua palette principale a 3-5 colori. Assicura sufficiente contrasto (rapporto 4,5:1) per l'accessibilità.
La regola 60-30-10 è un principio di design per un utilizzo equilibrato dei colori: 60% colore dominante (sfondi, aree grandi), 30% colore secondario (schede, barre laterali, elementi UI), 10% colore di accento (pulsanti, evidenziazioni, call-to-action). Questo crea una gerarchia visiva mantenendo l'armonia. I colori neutri formano spesso la base del 60% nel moderno design UI.
WCAG 2.1 richiede un rapporto di contrasto minimo di 4,5:1 per il testo normale e 3:1 per il testo grande. Usa strumenti come WebAIM Contrast Checker o i DevTools del browser per verificare. Non affidarti solo al colore per trasmettere informazioni (usa anche icone/testo), testa con simulatori di daltonismo e assicurati che gli elementi interattivi abbiano stati di focus visibili.
Per lo sviluppo web: codici hex (#RRGGBB) per CSS, valori RGB/HSL per la manipolazione dinamica e proprietà CSS personalizzate per il theming. Per gli strumenti di design: la maggior parte accetta codici hex; Figma e Sketch supportano le librerie di colori. Per Tailwind CSS: definisci i colori in tailwind.config.js sotto theme.extend.colors. Per il branding: includi i valori Pantone (stampa), CMYK (stampa) e RGB (schermo).