Convertisseur de couleurs — HEX, RGB, HSL
Collez une couleur dans l’une des trois notations et obtenez les autres, alpha compris, avec un échantillon pour voir ce que vous convertissez.
Couleur
Notations
À propos de cet outil
L’hexadécimal est ce que vous donne un outil de design, rgb() est ce que veut un canvas ou une bibliothèque d’images, et hsl() est ce vers quoi on se tourne pour éclaircir légèrement une couleur ou faire tourner une teinte. Convertir entre eux à la main est un calcul qui n’amuse personne. Collez l’une des trois — avec ou sans alpha — et les autres apparaissent, accompagnées d’un échantillon, car une valeur seule se saisit vite de travers et se vérifie mal à l’œil.
Comment l’utiliser
- 1Coller une couleur : #3fb984, rgb(63 185 132) ou hsl(157, 49%, 49%).
- 2Lire les autres notations à droite et vérifier l’échantillon au-dessus.
- 3Copier la ligne voulue, ou la propriété personnalisée CSS déjà prête.
Questions fréquentes
›Quelles notations puis-je coller ?
De l’hexadécimal à 3, 4, 6 ou 8 chiffres (#3fb, #3fb9, #3fb984, #3fb984cc), rgb() et rgba(), ainsi que hsl() et hsla(). La syntaxe à virgules comme la syntaxe moderne à espaces avec une barre oblique avant l’alpha sont acceptées.
›Pourquoi le HSL revient-il avec des décimales ?
Parce que teinte, saturation et luminosité sont continues alors que l’hexadécimal tient sur 8 bits par canal. Convertir de l’hexadécimal en HSL tombe rarement sur des nombres entiers, et les arrondir décalerait légèrement la couleur au retour.
›À quoi sert la quatrième paire hexadécimale ?
À l’alpha. #3fb984cc est la même couleur à 80 % d’opacité. C’est pris en charge partout où cela compte désormais, et c’est plus court que de passer à rgba().
›Les couleurs nommées comme « tomato » sont-elles gérées ?
Non. Résoudre les 148 mots-clés CSS demande la table complète pour très peu de bénéfice — collez plutôt la valeur hexadécimale. N’importe quel panneau d’outils de développement vous la donnera.
›Pourquoi les designers parlent-ils sans cesse d’OKLCH ?
Parce que la luminosité HSL ne correspond pas à la luminosité perçue : deux couleurs de même L peuvent sembler très différentes. OKLCH corrige cela, ce qui le rend bien meilleur pour construire des palettes. Cette page s’en tient aux trois notations que l’on colle au quotidien.