Quel format de couleur choisir en Web Design ?
En CSS, il existe plusieurs façons de déclarer une couleur. Le choix du format dépend souvent de ce que vous essayez d'accomplir (animations, transparence, thème global). Voici un guide pour bien choisir :
1. Le code HEX (Hexadécimal)
Exemple : #FF5252
C'est le format historique et le plus utilisé sur le web. Il est très court et facile à copier-coller depuis des logiciels de design comme Figma, Photoshop ou Illustrator. Il est composé de 3 paires de caractères représentant les valeurs Rouge, Vert et Bleu (RGB) en base 16.
Inconvénient : Il est difficile à manipuler mentalement (comment assombrir #FF5252 de 10% sans utiliser d'outil ?).
2. Le format RGB et RGBA (Red, Green, Blue, Alpha)
Exemple : rgba(255, 82, 82, 0.5)
Ce format indique la quantité de lumière rouge, verte et bleue sur une échelle de 0 à 255. Il est indispensable si vous avez besoin de transparence. Le A (Alpha) permet d'ajouter un canal d'opacité allant de 0 (invisible) à 1 (totalement opaque).
3. Le format HSL (Hue, Saturation, Lightness)
Exemple : hsl(0, 100%, 66%)
C'est le format favori des développeurs frontend modernes. Il correspond à la façon dont le cerveau humain perçoit la couleur :
- Hue (Teinte) : Un degré sur le cercle chromatique de 0 à 360 (0 = rouge, 120 = vert, 240 = bleu).
- Saturation : De 0% (Gris) à 100% (Couleur pure).
- Lightness (Luminosité) : De 0% (Noir absolu) à 100% (Blanc absolu).
Avantage : Pour créer le "Hover" (survol) d'un bouton, il suffit de baisser la luminosité de 10% en CSS. C'est également le format parfait pour générer des Dark Modes dynamiques avec des variables CSS (Custom Properties).