Le cercle chromatique et l'harmonie
L'harmonie des couleurs repose sur leurs positions relatives sur le cercle chromatique (color wheel). Six schémas classiques donnent presque toujours des résultats agréables et professionnels :
- Monochrome : 5 nuances de la même teinte (variation de luminosité). Subtil, élégant, sans risque.
- Analogue : 3 à 5 teintes voisines (±30 à 60°). Doux, harmonieux, naturel.
- Complémentaire : 2 teintes opposées (180°). Fort contraste, dynamique.
- Split complémentaire : base + 2 voisines de l'opposée. Contraste sans tension excessive.
- Triade : 3 teintes équidistantes (120°). Équilibré, vibrant.
- Tétrade : 4 teintes (90°). Riche, complexe à équilibrer.
HEX, RGB, HSL : quelle notation ?
HEX (#0284c7) : notation hexadécimale, standard CSS, compacte. La plus utilisée pour spécifier une couleur dans un fichier de design ou de code.
RGB (rgb(2, 132, 199)) : valeurs décimales de rouge, vert et bleu de 0 à 255. Utile en JavaScript, ou avec alpha (rgba(2, 132, 199, 0.5)) pour la transparence.
HSL (hsl(199, 98%, 39%)) : teinte (0-360°), saturation (0-100%), luminosité (0-100%). La plus intuitive : on ajuste facilement la luminosité ou la saturation sans changer la teinte. Parfait pour générer des variantes d'une couleur.
Règles d'or pour un design
- 60-30-10 : 60 % couleur dominante, 30 % secondaire, 10 % accent. Recette classique.
- Contraste WCAG : ratio min 4,5:1 entre texte et fond pour la lisibilité (AAA = 7:1).
- Limitez le nombre de couleurs : 3-5 couleurs principales suffisent. Plus = chaos visuel.
- Testez en niveaux de gris : si votre design fonctionne en N&B, il fonctionnera en couleur.
- Pensez aux daltoniens : ne reposez pas l'information uniquement sur la couleur (rouge/vert).
Tendances et inspirations
Pantone publie chaque année une « couleur de l'année » qui influence le design global. En 2026 par exemple, on observe un retour des tons terreux (terracotta, vert sauge, bleu pétrole) en réaction à l'ère digitale plate des années 2010-2020.
Sources d'inspiration : Coolors.co, Adobe Color, Color Hunt, Dribbble, Behance. Pour la psychologie des couleurs en marketing : le bleu inspire la confiance (banques, tech), le rouge l'urgence (soldes, alimentation), le vert la nature et la santé, le noir le luxe.
Outils complémentaires
- WebAIM Contrast Checker : vérifier le contraste WCAG entre 2 couleurs.
- Adobe Color Wheel : explorer des palettes existantes.
- Coolors.co : générateur communautaire avec des milliers de palettes.
- Color Hunt : palettes triées par tendances.
Questions fréquentes
Différence HEX, RGB, HSL ?
HEX (#0284c7) = standard CSS compact. RGB = décimal 0-255. HSL = teinte/saturation/luminosité, le plus intuitif.
Qu'est-ce qu'une palette analogue ?
Teintes voisines sur le cercle chromatique (±30-60°). Doux et harmonieux.
Quand une palette complémentaire ?
2 teintes opposées (180°). Fort contraste, dynamique. À ne pas surcharger.
Triade ou tétrade ?
Triade (3 × 120°) = équilibré vibrant. Tétrade (4 × 90°) = riche, complexe à équilibrer.
Mes couleurs sont-elles transmises ?
Non. Génération 100 % locale dans le navigateur.
Sources
- WCAG 2.1 — Contrast ratio guidelines (w3.org)
- Itten's Color Wheel — Théorie classique
- Adobe Color — Théorie pratique des palettes (color.adobe.com)
Outil indicatif. Pour des palettes professionnelles testées, vérifiez toujours le contraste WCAG en situation réelle.