Guide de théorie des couleurs
Apprenez harmonie, contraste et choix de palette pour l'UI.
Ce que couvre cette page
Cette page explique le flux de travail et renvoie directement vers la section correspondante de l’outil principal Chromoforge.
- Générez des palettes depuis une couleur de base.
- Vérifiez le contraste avant de publier du texte UI.
- Exportez CSS, Tailwind, SCSS, JSON, SVG et PNG.
- Fonctionne localement dans le navigateur.
Comment ca fonctionne
La théorie des couleurs repose sur des principes scientifiques et perceptuels qui expliquent pourquoi certaines combinaisons chromatiques semblent harmonieuses et d'autres non. La comprendre vous permet de faire des choix délibérés plutôt que des choix intuitifs.
Les concepts fondamentaux a maîtriser pour le design UI :
- Teinte (Hue) : la couleur pure, exprimée en degrés sur la roue chromatique (0 = rouge, 120 = vert, 240 = bleu). C'est le "nom" de la couleur.
- Saturation : l'intensité ou la vivacité de la couleur, de 0% (gris) a 100% (couleur pure). Une saturation élevée attire l'attention ; basse, elle se fond dans l'arrière-plan.
- Luminosité (Lightness) : la clarté de la couleur, de 0% (noir) a 100% (blanc). Governe la lisibilité du texte pose dessus.
- Contraste de luminance : la différence de luminance perçue entre deux couleurs. C'est ce que mesure WCAG et ce qui determine la lisibilité du texte.
- Température de couleur : les couleurs chaudes (rouge, orange, jaune) évoquent l'énergie et la proximité ; les froides (bleu, vert, violet) la confiance et la distance.
Dans l'espace HSL, les harmonies chromatiques se définissent par des angles fixes entre les teintes : complémentaire (180°), analogue (±30°), triadique (120°/240°).
Appliquer la théorie en design UI
La théorie des couleurs n'est pas académique : elle guide des décisions concrètes dans chaque projet :
- Choisir la couleur primaire : le bleu est associé à la confiance (finance, tech), le vert a la santé et la durabilité, l'orange a l'énergie et l'accessibilité. La teinte doit correspondre aux valeurs de la marque.
- Limiter la palette : la règle "60-30-10" — 60% couleur dominante (fonds), 30% secondaire (éléments), 10% accent (CTA) — produit des interfaces équilibrées.
- Gérer la hierarchy visuelle : augmentez la saturation et le contraste des éléments importants ; réduisez-les pour les éléments secondaires.
- Mode sombre cohérent : en mode sombre, ne pas simplement inverser les couleurs. Réduisez la saturation des couleurs vives (elles paraissent agressives sur fond sombre) et augmentez la luminosité des surfaces de fond progressivement.
FAQ — Théorie des couleurs
Faut-il apprendre HSL ou plutôt oklch pour le design web moderne ?
HSL est plus intuitif pour débuter car ses valeurs correspondent directement a la roue chromatique. Oklch est supérieur pour les interpolations et les dégradés (pas de bandes grises, transitions perçues linéairement) et est le format natif de Tailwind 4. Maîtrisez HSL pour concevoir, adoptez oklch pour exporter vers le CSS moderne.
Combien de couleurs doit contenir une palette UI idéale ?
Une palette bien structurée comprend : 1 couleur primaire + ses nuances (échelle 50-950), 1 neutre (gris) + ses nuances, 1-2 couleurs sémantiques (succès vert, erreur rouge, avertissement orange, info bleu), et optionnellement 1 couleur accent pour les CTA. Soit 4-5 familles, mais potentiellement 40-60 tokens au total.
Comment éviter que mon interface "vibre" avec des couleurs complémentaires ?
Les paires complémentaires pures (rouge/vert, bleu/orange) a saturation élevée créent un effet vibratoire désagréable. La solution : désaturez l'une des deux couleurs, utilisez l'une comme dominante et l'autre sparement en accent, ou ajoutez un neutre entre elles. Les designers appelle cela "split complémentaire" pour adoucir la tension.
Existe-t-il des règles pour les couleurs en typographie ?
En typographie UI, le texte principal devrait avoir un ratio de contraste d'au moins 7:1 (AAA) pour un confort de lecture optimal sur de longs textes. Pour les textes secondaires et labels, 4.5:1 (AA) est le minimum. Évitez le noir pur (#000) sur blanc pur (#FFF) pour les corps de texte longs : un gris très sombre comme #1a1a1a réduit la fatigue oculaire.