rgb(247, 55, 96)rgba(247, 55, 96, 1)hsl(348, 93%, 59%)Notre convertisseur de couleurs transforme instantanément n’importe quelle couleur entre les trois formats CSS les plus utilisés : hexadécimal (#F73760), RGB (rgb(247, 55, 96)) et HSL (hsl(348, 93%, 59%)). Vous pouvez saisir une valeur dans n’importe quel champ, les autres se mettent à jour automatiquement. Un sélecteur visuel, une prévisualisation en direct et des boutons de copie rapide complètent l’outil. Gratuit, sans inscription, 100 % local.
Les 3 formats CSS à connaître
Hexadécimal (hex)
Le format historique et le plus compact. Une couleur s’écrit avec un dièse suivi de 6 caractères hexadécimaux : deux pour le rouge, deux pour le vert, deux pour le bleu. Exemple : #F73760. Il existe aussi une version courte à 3 caractères (#F00 pour rouge pur, équivalent à #FF0000) et une version avec canal alpha à 8 caractères (#F7376099, où les deux derniers caractères représentent l’opacité).
RGB et RGBA
Le format RGB (Red Green Blue) exprime chaque canal de couleur avec une valeur entière entre 0 et 255. Exemple : rgb(247, 55, 96). La variante RGBA ajoute un canal alpha pour l’opacité, entre 0 (transparent) et 1 (opaque) : rgba(247, 55, 96, 0.5) donne une couleur à 50 % d’opacité. Plus lisible que l’hexadécimal et plus pratique pour ajuster dynamiquement une couleur en JavaScript.
HSL et HSLA
Le format HSL (Hue Saturation Lightness) est beaucoup plus intuitif pour les designers. La teinte (0-360°) indique la couleur sur le cercle chromatique, la saturation (0-100 %) indique son intensité, et la luminosité (0-100 %) son niveau de clair ou foncé. Pour créer une variante plus claire ou plus foncée de votre couleur, il suffit de modifier la luminosité sans toucher aux autres valeurs. HSL est le format idéal pour générer des palettes harmonieuses.
Quelle notation choisir ?
| Cas d’usage | Format recommandé | Pourquoi |
|---|---|---|
| Couleurs fixes dans un fichier CSS | Hex ou HSL | Hex pour la concision, HSL pour la clarté sémantique |
| Variables CSS (custom properties) | HSL | Facilite la génération de variantes (plus clair, plus foncé) |
| Couleur avec opacité | RGBA ou HSLA | Canal alpha explicite |
| Manipulation dynamique en JavaScript | RGB ou HSL | Plus simple à parser et à modifier qu’une chaîne hexadécimale |
| Design system avec thèmes clair/sombre | HSL | Inverser la luminosité suffit pour créer un thème sombre |
Formats avancés disponibles en CSS
Les navigateurs modernes supportent aussi des formats plus récents qui gèrent des gamuts étendus (couleurs qu’un écran standard ne peut pas afficher, comme le P3 ou le Rec2020). Ils restent utilisés principalement par les designers travaillant sur écrans calibrés professionnels.
hwb()— Hue, Whiteness, Blackness. Variante de HSL encore plus proche de la perception humaine.lch()— Lightness, Chroma, Hue. Espace de couleur perceptuellement uniforme.oklch()— Version optimisée de LCH pour le web. De plus en plus populaire dans les design systems modernes.color(display-p3 ...)— Gamut étendu pour écrans professionnels, disponible dans Safari et Chrome récents.
Pour la plupart des sites web, hex, RGB et HSL restent suffisants et parfaitement supportés par tous les navigateurs.
Exemples de conversions classiques
| Nom | Hex | RGB | HSL |
|---|---|---|---|
| Noir | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| Blanc | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Rouge pur | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Vert pur | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Bleu pur | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Cyan | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| Magenta | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| Jaune | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| Gris moyen | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| Orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
Foire aux questions
Pourquoi l’hexadécimal au lieu du décimal ?
L’hexadécimal permet d’exprimer chaque canal (0-255) en seulement 2 caractères au lieu de 3. Une couleur complète s’écrit avec 6 caractères (plus le dièse) au lieu de 9 à 11 caractères en décimal. Historique des premiers designers web qui manipulaient du binaire : 255 en décimal s’écrit 11111111 en binaire, ce qui tient tout juste sur deux chiffres hexadécimaux (FF).
Quelle est la différence entre HSL et HSB ?
HSB (Hue Saturation Brightness, parfois appelé HSV pour « Value ») est utilisé par Photoshop et la plupart des outils graphiques. HSL (Hue Saturation Lightness) est le standard CSS. Les deux partent de la même teinte mais calculent différemment la luminosité : en HSL, 50 % correspond à la couleur pure ; en HSB, 100 % correspond à la couleur pure. Attention quand vous copiez une couleur depuis Photoshop vers CSS : ce n’est pas la même valeur.
Peut-on utiliser un alpha en hexadécimal ?
Oui, avec la notation à 8 caractères. #F73760FF signifie opaque (alpha = 255), #F7376080 signifie 50 % d’opacité (alpha = 128). Cette notation est supportée par tous les navigateurs modernes depuis 2017.
Les valeurs se perdent-elles à la conversion ?
Il peut y avoir une très légère perte de précision sur les conversions multiples entre HSL et RGB à cause des arrondis à l’entier. Cette perte est imperceptible à l’œil. Si vous avez besoin d’une précision absolue (pour du design print par exemple), préférez le format hexadécimal ou RGB comme référence.
Les données saisies sont-elles envoyées à un serveur ?
Non. L’outil fonctionne entièrement dans votre navigateur. Aucune couleur ni saisie n’est transmise à nos serveurs.
