Selecteur de couleur HTML/CSS (HEX, RGB, HSL)

Les formats de couleurs en CSS

Le CSS supporte plusieurs façons d'exprimer une couleur. Chaque format a ses avantages selon le contexte d'utilisation.

• HEX — #RRGGBB — 6 caractères hexadécimaux. Compact, lisible. Ex: #ff5733
• RGB — rgb(R, G, B) — valeurs de 0 à 255. Intuitif pour les développeurs. Ex: rgb(255, 87, 51)
• RGBA — rgba(R, G, B, A) — comme RGB avec transparence (0–1). Ex: rgba(255, 87, 51, 0.5)
• HSL — hsl(H, S%, L%) — Teinte, Saturation, Luminosité. Plus naturel pour ajuster les couleurs. Ex: hsl(11, 100%, 60%)
• HSLA — hsla(H, S%, L%, A) — HSL avec transparence. Ex: hsla(11, 100%, 60%, 0.5)

Quand utiliser chaque format

• ✅ HEX — Variables CSS, tokens de design, valeurs statiques, compatibilité maximale
• ✅ RGB/RGBA — Quand vous avez besoin de transparence ou que vous calculez des valeurs dynamiquement en JS
• ✅ HSL — Idéal pour créer des palettes : il suffit de changer la luminosité pour avoir des variantes claires/sombres
• ✅ HSLA — Overlays, ombres colorées semi-transparentes

/* Exemple avec HSL pour un système de couleurs */
--color-primary:       hsl(204, 70%, 53%);
--color-primary-light: hsl(204, 70%, 70%);
--color-primary-dark:  hsl(204, 70%, 35%);

Accessibilité et contraste des couleurs

Les normes WCAG (Web Content Accessibility Guidelines) imposent un ratio de contraste minimum entre le texte et son fond :

• AA Normal — ratio ≥ 4.5:1 pour texte normal
• AA Large — ratio ≥ 3:1 pour grands textes (18px+)
• AAA — ratio ≥ 7:1 pour une accessibilité maximale

Outils de palettes de couleurs populaires

• Coolors.co — générateur de palettes harmonieuses, très populaire
• Adobe Color — roue chromatique avancée, règles d'harmonie (complémentaire, triadique...)
• Tailwind CSS Colors — palette standardisée prête à l'emploi
• Material Design Colors — système de couleurs de Google
• Open Color — palette open source optimisée pour les UI
• Paletton — outil de création de palettes complémentaires