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 Chromaforge.
- 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 deliberes plutôt que des choix intuitifs.
Les concepts fondamentaux a maitriser pour le design UI :
- Teinte (Hue) : la couleur pure, exprimee en degres 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.
- Luminosite (Lightness) : la clarte de la couleur, de 0% (noir) a 100% (blanc). Governe la lisibilité du texte pose dessus.
- Contraste de luminance : la difference de luminance percue entre deux couleurs. C'est ce que mesure WCAG et ce qui determine la lisibilité du texte.
- Temperature de couleur : les couleurs chaudes (rouge, orange, jaune) evoquent l'energie et la proximite ; les froides (bleu, vert, violet) la confiance et la distance.
Dans l'espace HSL, les harmonies chromatiques se definissent par des angles fixes entre les teintes : complementaire (180°), analogue (±30°), triadique (120°/240°).
Appliquer la théorie en design UI
La théorie des couleurs n'est pas academique : elle guide des decisions concretes dans chaque projet :
- Choisir la couleur primaire : le bleu est associé à la confiance (finance, tech), le vert a la sante et la durabilite, l'orange a l'energie et l'accessibilite. La teinte doit correspondre aux valeurs de la marque.
- Limiter la palette : la regle "60-30-10" — 60% couleur dominante (fonds), 30% secondaire (éléments), 10% accent (CTA) — produit des interfaces equilibrees.
- Gerer la hierarchy visuelle : augmentez la saturation et le contraste des éléments importants ; reduisez-les pour les éléments secondaires.
- Mode sombre coherent : en mode sombre, ne pas simplement inverser les couleurs. Reduisez 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 percues lineairement) 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 eviter que mon interface "vibre" avec des couleurs complementaires ?
Les paires complementaires pures (rouge/vert, bleu/orange) a saturation élevée cree un effet vibratoire desagreable. La solution : desaturez 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 complementaire" pour adoucir la tension.
Existe-t-il des regles 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 tres sombre comme #1a1a1a reduit la fatigue oculaire.
La signification des couleurs est-elle universelle ?
Non. Le rouge signifie danger en Occident mais chance en Chine. Le blanc est associé à la purete en Europe et au deuil dans plusieurs cultures asiatiques. Le vert peut signifier permission, nature ou jalousie selon le contexte. Pour des produits internationaux, privilegiez les conventions UI universelles (rouge pour erreur, vert pour succès) tout en testant auprès de votre audience cible.