Créez des harmonies de couleurs pour vos designs – Conversions hex, RGB, HSL
Le cercle chromatique est l'outil fondamental pour créer des harmonies de couleurs. Il organise les couleurs selon leur teinte (hue) en formant un cercle de 360°. Les couleurs primaires (rouge, jaune, bleu) sont espacées de 120°. Les couleurs secondaires (orange, vert, violet) sont obtenues en mélangeant deux primaires. Les harmonies utilisent des relations géométriques sur ce cercle.
Les systèmes de couleurs permettent de représenter les couleurs numériquement. RGB (Rouge, Vert, Bleu) utilise trois valeurs de 0 à 255 pour les écrans. HSL (Teinte, Saturation, Luminosité) est plus intuitif : la teinte (0-360°) indique la couleur, la saturation (0-100%) l'intensité, la luminosité (0-100%) la clarté. HEX est la notation RGB en hexadécimal (#RRGGBB), utilisée en CSS.
L'accessibilité WCAG définit des ratios de contraste minimum entre texte et fond pour garantir la lisibilité. Le niveau AA (standard) exige 4,5:1 pour texte normal, 3:1 pour texte large. Le niveau AAA (optimal) demande 7:1 et 4,5:1 respectivement. Un bon design respecte ces ratios pour être lisible par tous, y compris les personnes malvoyantes.
Les couleurs complémentaires sont situées à l'opposé sur le cercle chromatique, séparées de 180°. Exemples : rouge et cyan (vert-bleu), bleu et orange, jaune et violet. Elles créent un contraste maximal tout en restant harmonieuses. Utilisation : les complémentaires attirent fortement l'attention et sont parfaites pour mettre en valeur un élément (boutons call-to-action, titres). Attention : en quantités égales, elles peuvent être fatigantes pour l'œil. Privilégiez une couleur dominante (70%) et l'autre en accent (30%).
Le ratio de contraste WCAG mesure la différence de luminosité entre texte et fond. Normes : Niveau AA (minimum légal) : 4,5:1 pour texte normal (<18pt), 3:1 pour texte large (≥18pt gras ou ≥24pt). Niveau AAA (recommandé) : 7:1 pour texte normal, 4,5:1 pour texte large. Notre outil calcule automatiquement ces ratios. Exemple : texte noir (#000000) sur fond blanc (#FFFFFF) = ratio de 21:1 (excellent). Texte gris clair (#AAAAAA) sur blanc = 2,3:1 (échec, illisible). Pour les logos et éléments décoratifs, le contraste n'est pas obligatoire, mais recommandé.
RGB (Red Green Blue) définit une couleur par trois composantes : quantité de rouge, vert, bleu (0-255 chacune). Exemple : rgb(99, 102, 241) = violet indigo. C'est le système natif des écrans (pixels émettent de la lumière RGB). HSL (Hue Saturation Lightness) est plus intuitif : Teinte (0-360°) = position sur le cercle chromatique, Saturation (0-100%) = intensité de la couleur (0% = gris), Luminosité (0-100%) = clarté (0% = noir, 100% = blanc). Exemple : hsl(239°, 84%, 67%) = même violet. HSL est préférable pour créer des variations (éclaircir/assombrir une couleur en gardant la teinte).
Méthodologie professionnelle : (1) Couleur principale – choisissez une couleur qui représente votre marque (bleu = confiance/tech, vert = nature/santé, rouge = passion/urgence). (2) Harmonie – utilisez une harmonie complémentaire ou analogue. (3) Palette 60-30-10 – 60% couleur dominante (fond), 30% couleur secondaire (sections), 10% couleur d'accent (boutons, liens). (4) Neutres – ajoutez des gris/blancs pour le texte et les espaces. (5) Accessibilité – vérifiez les contrastes WCAG. Conseil : commencez avec 3-5 couleurs maximum. Trop de couleurs créent de la confusion. Exemples : Stripe (violet/blanc), Spotify (vert/noir), Airbnb (rouge-rose/blanc).
Une palette monochromatique utilise une seule teinte (hue) avec différentes saturations et luminosités. Par exemple, du bleu très foncé au bleu très clair. Avantages : cohérence visuelle maximale, élégance, simplicité. Parfait pour designs minimalistes, dashboards professionnels. Inconvénient : peut manquer de dynamisme. Solution : utilisez une couleur d'accent complémentaire pour les boutons importants. Exemple : palette monochromatique bleue (bleu marine pour header, bleu moyen pour sections, bleu clair pour fonds) + orange vif pour les CTA. Apple utilise souvent des palettes monochromatiques grises avec une couleur d'accent.