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.
Commencez par les valeurs de votre marque et votre public cible. Utilisez la psychologie des couleurs comme guide : le bleu transmet confiance et professionnalisme, le vert suggère croissance et nature, le rouge signale urgence ou passion, le violet implique luxe ou créativité. Limitez votre palette principale à 3-5 couleurs. Assurez un contraste suffisant (ratio 4,5:1) pour l'accessibilité.
La règle 60-30-10 est un principe de design pour un usage équilibré des couleurs : 60% couleur dominante (arrière-plans, grandes zones), 30% couleur secondaire (cartes, barres latérales, éléments UI), 10% couleur d'accent (boutons, surlignages, appels à l'action). Cela crée une hiérarchie visuelle tout en maintenant l'harmonie. Les couleurs neutres forment souvent la base des 60% dans le design UI moderne.
WCAG 2.1 exige un ratio de contraste minimum de 4,5:1 pour le texte normal et 3:1 pour le texte large. Utilisez des outils comme WebAIM Contrast Checker ou les DevTools du navigateur pour vérifier. Ne vous fiez pas uniquement à la couleur pour transmettre des informations (utilisez aussi des icônes/texte), testez avec des simulateurs de daltonisme et assurez-vous que les éléments interactifs ont des états de focus visibles.
Pour le développement web : codes hex (#RRGGBB) pour CSS, valeurs RGB/HSL pour la manipulation dynamique, et propriétés CSS personnalisées pour le thème. Pour les outils de design : la plupart acceptent les codes hex ; Figma et Sketch supportent les bibliothèques de couleurs. Pour Tailwind CSS : définissez les couleurs dans tailwind.config.js sous theme.extend.colors. Pour le branding : incluez les valeurs Pantone (impression), CMYK (impression) et RGB (écran).