Convertisseur de couleurs

Entrez une valeur de couleur au format HEX, RGB ou HSL et voyez-la convertie instantanément dans tous les autres formats. Tout le traitement se fait localement dans votre navigateur.

Entrez HEX (#rrggbb), RGB (rgb(r,g,b)) ou HSL (hsl(h,s%,l%)) — ou utilisez le sélecteur.
Copié !

Contraste sur fonds unis

Sur blanc
Sur noir

À propos des formats de couleur

  • HEX — #rrggbb, le format de couleur CSS le plus courant.
  • RGB — rgb(r, g, b), chaque canal de 0 à 255.
  • HSL — hsl(h, s%, l%), teinte 0-360°, saturation et luminosité 0-100%.

Tout ce que le navigateur comprend est accepté, y compris un nom comme rebeccapurple, un hexadécimal à huit chiffres avec alpha, et la forme séparée par des espaces avec une barre oblique avant l'alpha qu'emploie le CSS actuel. Les chiffres de contraste suivent la formule WCAG de luminance relative : un rapport de 4.5 est le seuil du texte courant au niveau AA et 7 celui du niveau AAA. Ils sont calculés sur la couleur opaque, car une couleur translucide n'a pas de contraste fixe tant qu'on ignore ce qui se trouve derrière.

Outils liés

Minifieur / Embellisseur CSS Image vers Base64 Générateur de QR Code

Le balisage vous résiste ?

Des entités échappées, des encodages abîmés et un contenu qui s'affiche d'une façon dans le CMS et d'une autre sur la page signifient en général que quelque chose devine dans la chaîne. Nous construisons les interfaces et le chemin de publication derrière elles, pour que le visiteur voie ce que vous avez écrit.

Parlons de votre site

Questions fréquentes

Quels formats de couleur puis-je coller ?
L'hexadécimal à trois, quatre, six ou huit chiffres, rgb et rgba, hsl et hsla, hwb, et tout nom de couleur CSS. La forme à virgules et la forme moderne séparée par des espaces avec une barre oblique avant l'alpha sont acceptées : vous pouvez coller directement depuis une feuille de style.
Comment la transparence est-elle gérée ?
Un canal alpha survit à la conversion : un hexadécimal à huit chiffres revient en rgba et l'aperçu affiche un damier derrière. L'alpha n'est écrit dans la sortie que s'il est réellement inférieur à l'opacité totale, sauf si vous le demandez toujours.
Que signifient les chiffres de contraste ?
C'est le rapport de contraste WCAG entre cette couleur et un fond blanc ou noir uni. Le texte courant demande 4.5 pour le niveau AA et 7 pour AAA ; le grand texte a une barre plus basse. En dessous de 3, c'est difficile à lire pour la plupart des gens, quelle que soit la taille.
Pourquoi le contraste est-il calculé sans l'alpha ?
Parce qu'une couleur translucide n'a pas de contraste fixe. Ce que voit réellement un lecteur dépend de ce qui se trouve derrière, les chiffres utilisent donc la couleur opaque. Si votre texte est vraiment translucide, calculez d'abord la couleur mélangée et vérifiez celle-là.
Quelle différence entre HSL et HWB ?
Les deux partent du même angle de teinte. HSL décrit une couleur par sa saturation et sa clarté, le couple que la plupart des outils exposent. HWB la décrit par la quantité de blanc et de noir mélangés, ce qui est plus proche de la façon dont on mélange la peinture et plus facile à manier pour construire une gamme de nuances.