Color Converter
HEX RGB HSL conversion
HEX RGB HSL conversion S'exécute localement dans votre navigateur
#2563eb
rgb(37, 99, 235)
hsl(221, 83%, 53%)
About the
Le convertisseur de couleurs traduit une seule couleur entre HEX, RVB, HSL et HSV et affiche le rapport de contraste WCAG par rapport au noir et blanc afin que vous puissiez voir immédiatement si le texte dans cette couleur est lisible. HEX et RVB sont les formats que vous copiez entre les outils, mais HSL est celui qui est réellement utile pour le travail de conception : il sépare la teinte de la luminosité, afin que vous puissiez produire une teinte ou une nuance qui conserve la même teinte au lieu de dériver vers le gris comme le font les mathématiques RVB naïves. Les valeurs hexadécimales et rgba à huit chiffres comportent un canal alpha, et le convertisseur les gère également.
Where people use the
- Transformer une valeur hexadécimale de marque en la syntaxe RVB attendue par un outil de conception.
- Produire un ensemble cohérent de nuances à partir d’une teinte de marque en utilisant HSL.
- Vérifier si une couleur de lien est lisible sur un fond sombre.
- Faire correspondre une couleur choisie sur une capture d'écran à la valeur hexadécimale la plus proche.
How to use the
- 1
Entrez la couleur dans n'importe quel format
Collez une valeur hexadécimale telle que 2f6fed, ou une fonction RVB ou HSL, ou utilisez le sélecteur. Les autres formats se mettent à jour au fur et à mesure que vous tapez.
- 2
Lire toutes les représentations en même temps
Hex, RVB, HSL et HSV sont affichés avec le canal alpha séparé.
- 3
Vérifiez les taux de contraste
Les ratios par rapport au noir et blanc vous indiquent si la couleur est utilisable comme couleur de texte ou comme arrière-plan. Le corps du texte a besoin de 4,5 pour 1, les grands textes et les bordures de l'interface ont besoin de 3 pour 1.
- 4
Copiez le formulaire dont votre code a besoin
Chaque champ possède son propre bouton de copie, vous obtenez donc exactement la syntaxe attendue par votre feuille de style plutôt que de reformater à la main.
Conseils et bonnes pratiques
- Ajustez la luminosité en HSL plutôt que d'ajouter du blanc ou du noir en RVB ; la teinte reste intacte.
- Testez le contraste à la plus petite taille à laquelle le texte sera réellement utilisé, et non à la taille du titre.
- Conservez une palette documentée de cinq ou six valeurs au lieu d’en inventer une nouvelle par composant.
Questions fréquemment posées
Comment une couleur hexadécimale est-elle convertie en RVB ?
Chaque paire de chiffres hexadécimaux correspond à un canal, lu en base 16. Dans 2f6fed, 2f vaut 47 rouge, 6f vaut 111 vert et ed vaut 237 bleu. Un raccourci à trois chiffres comme f0a double chaque chiffre, il devient donc ff00aa.
Pourquoi la légèreté HSL n'est-elle pas la même chose que la luminosité perçue ?
Parce que l’œil est bien plus sensible au vert qu’au bleu. Le bleu pur et le jaune pur peuvent partager une valeur de luminosité tandis que le jaune semble beaucoup plus brillant. C'est pourquoi le contraste doit être mesuré à l'aide d'une formule de luminance plutôt que d'être jugé à partir du nombre HSL.
Que signifie la quatrième paire de chiffres dans une couleur hexadécimale ?
Alpha, de 00 entièrement transparent à ff entièrement opaque. L'hexadécimal à huit chiffres est pris en charge dans tous les navigateurs actuels et constitue l'équivalent hexadécimal de rgba.
La conversion CMJN est-elle précise pour l'impression ?
Non, et aucun outil de navigation ne peut l'être. Le CMJN dépend de l'encre, du papier et du profil de l'imprimante. Utilisez cette valeur comme point de départ et effectuez la conversion via le profil ICC de votre fournisseur d'impression pour tout ce qui compte.
Comment choisir un texte lisible pour un fond coloré ?
Comparez le rapport de contraste entre la couleur du texte et l'arrière-plan. Si ni le noir ni le blanc n'atteignent 4,5 pour 1, l'arrière-plan est trop saturé pour le corps du texte et doit être assombri ou éclairci avant d'être utilisé derrière la copie.
Pourquoi le même hexagone apparaît-il différemment sur deux écrans ?
Parce que les écrans diffèrent par la gamme, le calibrage et la luminosité. Un écran à large gamme affiche des couleurs saturées qu’un panneau sRGB standard ne peut pas reproduire. Travaillez en sRGB, sauf si vous avez une raison spécifique de ne pas le faire.