Convertisseur de couleurs

À propos des formats de couleur

Une même couleur peut s'écrire en HEX (#ff6600), en RGB (rgb(255, 102, 0)) ou en HSL (hsl(24, 100%, 50%)) — trois façons différentes de décrire la même couleur, chacune adaptée à une situation différente.

HEX dispose d'un raccourci compact : un code à 3 chiffres comme #f60 équivaut exactement au code à 6 chiffres #ff6600 — chaque chiffre est simplement doublé —, et une forme à 8 chiffres comme #ff6600cc ajoute un canal alpha de la même façon que rgba() et hsla(). Cet outil accepte et normalise le raccourci en entrée, et produit toujours la forme complète à 6 ou 8 chiffres pour que le résultat soit sans ambiguïté à coller ailleurs. Une chose qu'il ne fait pas : vérifier le contraste d'accessibilité des couleurs ou simuler le daltonisme — c'est une question de conception distincte, tout aussi importante, indépendante de la conversion de format.

Où vous le rencontrerez

• Traduire une teinte HEX fournie par un designer dans le RGB ou le HSL déjà utilisé par le code
• Ajuster la luminosité ou la saturation, ce qui est bien plus simple à raisonner en HSL qu'en RGB
• Lire une couleur dans les styles calculés d'un navigateur et la convertir pour correspondre à une spécification de design
• Vérifier ce que rend réellement une valeur de couleur CSS avant de s'y engager

Questions fréquentes

Pourquoi le HSL existe-t-il si le RGB fonctionne déjà ?
Le RGB décrit une couleur comme des intensités de lumière rouge/verte/bleue, ce qui correspond mal à la façon dont les gens pensent la couleur. Le HSL sépare la teinte, la saturation et la luminosité, donc « rendre plus sombre » ou « rendre plus vif » revient à changer un seul nombre plutôt que d'en recalculer trois.

Que signifie la valeur alpha dans rgba()/hsla() ?
C'est l'opacité, de 0 (totalement transparent) à 1 (totalement opaque). Cet outil la préserve d'un format à l'autre — y compris sous forme de HEX à 8 chiffres — lorsque votre entrée en comporte une.

Cela prend-il en charge les couleurs CSS nommées comme « tomato » ?
Pas encore — uniquement les entrées HEX, RGB(A) et HSL(A). Recherchez d'abord la valeur HEX de la couleur nommée si c'est votre point de départ.

#f60 est-il la même couleur que #ff6600 ?
Oui, exactement. Le raccourci HEX à 3 chiffres double chaque chiffre pour obtenir la forme complète : f devient ff, 6 devient 66, 0 devient 00. C'est purement une écriture plus courte pour certaines couleurs — seulement celles où chaque canal se trouve être un chiffre répété —, pas un espace colorimétrique différent ou moins précis. Cet outil accepte les deux longueurs et produit toujours la forme complète à 6 ou 8 chiffres.