Convertisseur de couleurs
Saisissez un nom ou un code de couleur CSS pour afficher ses valeurs RGB, HEX, HSL, HWB, CMYK et NCol, ainsi qu’un aperçu de la couleur.
Convertisseur de couleurs HEX ⇄ RGB ⇄ HSL
Formule du convertisseur de couleurs
Où :
- \(h_1,\ldots,h_6\) — les six chiffres d’une couleur HEX, lus comme des valeurs de 0 à 15 ; les lettres A à F représentent les valeurs de 10 à 15.
- \(R\), \(G\) et \(B\) — les valeurs des composantes rouge, verte et bleue, chacune comprise entre 0 et 255.
Cette formule convertit une couleur HEX à six chiffres en RGB. Le convertisseur accepte également d’autres formats de couleur pris en charge et permet de passer de l’un à l’autre.
Convertisseur de couleurs – exemple de calcul
Exemple : la valeur saisie par défaut est skyblue. Cette couleur nommée correspond à #87CEEB : on peut donc convertir ses paires de chiffres HEX en RGB.
\[R=8(16)+7=135,\qquad G=12(16)+14=206,\qquad B=14(16)+11=235\]
Résultat : skyblue a pour valeur HEX #87CEEB et pour valeur RGB rgb(135, 206, 235). Ses valeurs HSL sont d’environ 197° pour la teinte, 71 % pour la saturation et 73 % pour la luminosité.
Comment utiliser le convertisseur de couleurs
- Saisissez une couleur dans le champ Couleur. Vous pouvez partir de la valeur par défaut
skyblue, saisir un nom de couleur CSS commeredou entrer un code comme#f00ourgb(255, 0, 0). - Consultez le résultat Couleur pour voir un aperçu de la couleur correspondant à votre saisie.
- Copiez le format dont vous avez besoin parmi Nom, RGB, HEX, HSL, HWB, CMYK et NCol.
Si le champ Nom indique « aucun nom », la couleur ne correspond à aucun nom de la liste du convertisseur. Les résultats numériques peuvent néanmoins représenter une couleur valide.
Que signifient les formats de couleur ?
Une couleur numérique peut être décrite de plusieurs façons sans changer son apparence. Le format HEX représente le rouge, le vert et le bleu par des paires de chiffres hexadécimaux : #87CEEB signifie 87 pour le rouge, CE pour le vert et EB pour le bleu, en base 16. Le format RGB exprime ces mêmes composantes sous forme de nombres décimaux de 0 à 255. Si vous souhaitez effectuer séparément les calculs en base 16, utilisez le convertisseur hexadécimal ; il convertit des nombres, et non des valeurs de couleur CSS complètes.
Le format HSL décrit la teinte, la saturation et la luminosité. La teinte correspond à une position sur le cercle chromatique, généralement exprimée en degrés ; la saturation décrit l’intensité de la couleur, tandis que la luminosité va du noir au blanc. Le format HWB utilise plutôt la teinte, la blancheur et la noirceur. Ces formats peuvent être plus faciles à lire lorsque vous comparez des nuances ou ajustez une couleur à l’œil. RGB et HEX sont souvent plus pratiques lorsqu’une spécification exige des valeurs exactes pour chaque composante.
Le format CMYK fournit des valeurs de cyan, de magenta, de jaune et de noir dérivées de la couleur affichée à l’écran. NCol est une notation fondée sur la teinte proposée par le convertisseur ; elle est moins couramment utilisée en CSS que HEX, RGB ou HSL. Le format de sortie change la façon d’écrire une couleur, pas la couleur choisie. De petites différences dans les pourcentages affichés peuvent être dues aux arrondis.
Limites et conseils pratiques
Le convertisseur nécessite une valeur que son analyseur de couleurs reconnaît. Les noms de couleurs CSS standard et les codes de couleur CSS courants sont de bons points de départ. Un code HEX à trois chiffres est une forme abrégée : par exemple, #f00 équivaut à #ff0000. Les lettres d’un code HEX ne sont pas sensibles à la casse : #87ceeb et #87CEEB représentent donc la même couleur.
Certaines valeurs comportent une composante alpha, qui contrôle la transparence. Pour les valeurs reconnues comportant une composante alpha, les résultats RGB, HSL, HWB et NCol utilisent des formes qui incluent cette composante. Vérifiez chaque résultat avant de le copier dans une autre application : tous les formats indiqués ne décrivent pas la transparence de la même manière. Si une couleur est partiellement transparente, son aperçu peut également paraître différent sur un autre fond.
La conversion CMYK proposée ici est un calcul mathématique à partir d’une couleur numérique, et non une conversion fondée sur un profil d’impression. Le rendu imprimé dépend de l’imprimante, des encres, du papier et des paramètres de gestion des couleurs : utilisez donc un processus d’impression adapté lorsqu’une couleur de production exacte est importante. De même, l’apparence d’une couleur à l’écran dépend de l’affichage et de ses réglages ; des valeurs numériques identiques ne garantissent pas à elles seules un rendu identique sur tous les appareils.
Si vous placez une couleur HEX dans un paramètre de requête d’URL, n’oubliez pas que # a une signification particulière dans les URL. Utilisez l’encodeur d’URL pour encoder la valeur si nécessaire.
Questions fréquentes
Comment convertir manuellement une couleur RGB en HEX ?
Convertissez chaque composante RGB, exprimée en décimal, en deux chiffres hexadécimaux, puis assemblez les trois paires après un #. Divisez la valeur d’une composante par 16 : le quotient entier donne le premier chiffre et le reste donne le second. Par exemple, 206 donne un quotient de 12 (C) et un reste de 14 (E), soit CE. Une valeur inférieure à 16 nécessite un zéro initial : 9 devient ainsi 09.
Comment calculer les valeurs HSL à partir des valeurs RGB ?
Commencez par diviser chaque composante RGB par 255, puis déterminez la valeur maximale \(M\) et la valeur minimale \(m\). La luminosité est \(L=(M+m)/2\). Si \(M=m\), la saturation est nulle et la teinte n’a pas de valeur significative. Sinon, la saturation est \((M-m)/(1-|2L-1|)\) ; la teinte dépend de la composante ayant la valeur la plus élevée. Par exemple, le rouge pur, rgb(255, 0, 0), correspond à hsl(0, 100%, 50%).
Quel rapport de contraste viser entre le texte et le fond ?
Pour les objectifs courants du niveau AA des WCAG 2.2, visez au moins 4,5:1 pour le texte normal et 3:1 pour le texte de grande taille. Les objectifs du niveau AAA sont respectivement de 7:1 et de 4,5:1. Un convertisseur de couleurs ne peut pas, à lui seul, déterminer si une combinaison atteint ces seuils : le contraste dépend des deux couleurs. Vérifiez ensemble les couleurs réelles du texte et du fond, y compris le fond visible derrière les couleurs transparentes.
Pourquoi une couleur grise a-t-elle une valeur de teinte ?
La teinte est mathématiquement indéfinie lorsqu’une couleur n’a aucune saturation, comme c’est le cas lorsque ses trois composantes RGB sont égales. Un convertisseur peut afficher une teinte de remplacement, souvent 0°, pour que la notation HSL ou HWB reste complète. Ce nombre ne signifie pas que le gris tire vers le rouge. Lorsque la saturation approche de zéro, de faibles variations des composantes peuvent aussi entraîner de fortes variations de la teinte indiquée, sans changement visible notable.
Une valeur alpha modifie-t-elle les composantes RGB d’une couleur ?
La composante alpha contrôle la part d’une couleur visible sur son fond ; elle ne modifie pas, à elle seule, les composantes RGB enregistrées de cette couleur. Une valeur alpha de 0 correspond à une transparence totale, tandis que 1 correspond à une opacité totale. Le résultat visible dépend du fond : pour chaque composante, la valeur affichée est approximativement \(\alpha\times\text{premier plan}+(1-\alpha)\times\text{arrière-plan}\). Un rouge transparent peut donc paraître rose sur un fond blanc.
Pourquoi une couleur peut-elle changer légèrement après plusieurs conversions d’un format à l’autre ?
Les conversions peuvent introduire des arrondis. Les composantes RGB sont généralement stockées sous forme de nombres entiers de 0 à 255, tandis que les formats HSL et autres peuvent afficher des degrés ou des pourcentages arrondis. Si vous saisissez à nouveau ces résultats arrondis, vous pouvez obtenir des valeurs RGB légèrement différentes. Pour conserver une couleur RGB exacte lors de modifications ou de copies, gardez sa valeur RGB d’origine ou son code HEX à six chiffres plutôt que de vous fier à des résultats intermédiaires arrondis.