Convertisseur de couleurs en ligne
Collez une couleur dans n’importe quel format CSS et obtenez tous les autres, avec son contraste.
Collez un code HEX, rgb(), hsl(), hwb() ou un nom de couleur CSS, ou choisissez-en une
Teintes claires et foncées
Valeurs
- HEX
- #3a5bd9
- RGB
- rgb(58, 91, 217)
- HSL
- hsl(227.5, 67.7%, 53.9%)
- HSV / HSB
- hsv(227.5, 73.3%, 85.1%)
- HWB
- hwb(227.5 22.7% 14.9%)
- CMYK
- cmyk(73%, 58%, 0%, 15%)
- Une approximation. La couleur imprimée dépend des encres et du papier : demandez les valeurs exactes à votre imprimeur.
- OKLCH
- oklch(52.35% 0.1965 267.75)
- Nom CSS le plus proche
- royalblue
Contraste (WCAG)
Texte de cette couleur sur chaque fond. Le texte normal demande 4,5:1 pour AA et 7:1 pour AAA ; le grand texte (18 pt, ou 14 pt en gras) demande 3:1 et 4,5:1.
Sur blanc
Grand texte
Portez ce vieux whisky au juge blond qui fume
5.71:1
- AA normal réussi
- AAA normal échoué
- AA grand réussi
- AAA grand réussi
Sur noir
Grand texte
Portez ce vieux whisky au juge blond qui fume
3.68:1
- AA normal échoué
- AAA normal échoué
- AA grand réussi
- AAA grand échoué
Sur #ffffff
Grand texte
Portez ce vieux whisky au juge blond qui fume
5.71:1
- AA normal réussi
- AAA normal échoué
- AA grand réussi
- AAA grand réussi
Suivant : Rendre le fond transparent · Créateur de graphique
Signaler un problème avec cet outil
Comment utiliser Convertisseur de couleurs
Saisissez une couleur
Collez un code HEX, rgb(), hsl(), hwb() ou un nom comme tomato, ou choisissez-en une avec le sélecteur de couleur.
Copiez le format voulu
Tous les formats se mettent à jour pendant la saisie. Copiez-en un avec son bouton, ou choisissez votre format habituel pour le grand bouton Copier.
Vérifiez le contraste
Voyez le rapport de contraste WCAG sur blanc, sur noir et sur le fond de votre choix, avec les résultats AA et AAA pour le texte normal et le grand texte.
Pourquoi utiliser Utils365
Lit toutes les couleurs CSS
HEX à 3, 4, 6 et 8 chiffres, rgb() et hsl() en ancienne syntaxe à virgules ou nouvelle à espaces, hwb(), pourcentages, unités de teinte et les 148 noms de couleur.
Les formats modernes aussi
Obtenez OKLCH pour les design systems et le CSS à large gamut, HWB et HSV pour les sélecteurs de couleur, et HEX avec alpha pour les couleurs transparentes.
Accessibilité intégrée
Les rapports de contraste suivent exactement WCAG 2 et ne sont jamais arrondis vers la réussite : 4,49:1 ne passe pas pour 4,5:1.
Teintes claires et foncées
Cinq nuances plus claires et cinq plus foncées s’affichent sous l’échantillon. Cliquez sur l’une d’elles pour en faire la couleur actuelle.
Foire aux questions
Quelle différence entre HEX et RGB ?
Aucune pour la couleur elle-même. Les deux donnent le rouge, le vert et le bleu de 0 à 255. HEX écrit chacun en deux chiffres hexadécimaux : rgb(58, 91, 217) correspond à #3a5bd9. HEX est plus court, rgb() plus facile à lire et à ajuster à la main.
Qu’est-ce que HSL ?
Teinte, saturation et luminosité. La teinte est la position sur le cercle chromatique en degrés (0 rouge, 120 vert, 240 bleu), la saturation l’intensité, et la luminosité va du noir à 0 % au blanc à 100 %. Il est ainsi facile d’écrire des versions plus claires, plus foncées ou plus ternes d’une couleur.
Pourquoi le CMYK ne correspond-il pas à ma couleur imprimée ?
Les écrans mélangent de la lumière, les imprimantes de l’encre, et le résultat dépend des encres, du papier et du profil de l’imprimante. Le CMYK affiché utilise la formule standard simple : prenez-le comme point de départ et demandez les valeurs exactes à votre imprimeur.
Qu’est-ce qu’un rapport de contraste WCAG ?
Une mesure de l’écart de luminosité entre deux couleurs, de 1:1 (identiques) à 21:1 (noir sur blanc). WCAG AA demande au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte ; AAA demande 7:1 et 4,5:1.
Qu’est-ce que OKLCH ?
Une façon plus récente d’écrire les couleurs en CSS par luminosité, chroma et teinte, fondée sur la perception humaine. Modifier la luminosité garde une teinte d’apparence identique, d’où son succès pour les design systems et les gammes de couleurs.
Comment fonctionne le nom de couleur ?
Si la couleur correspond exactement à l’un des 148 noms de couleur CSS, ce nom s’affiche. Sinon, vous obtenez le plus proche visuellement, pratique pour décrire une couleur avec des mots.