MyDevTools
FR

Convertisseur de Couleurs

Convertissez des couleurs entre HEX, RGB, HSL et CMYK, obtenez une palette de 9 nuances et vérifiez le contraste WCAG de deux couleurs.

Vos saisies et fichiers restent dans le navigateur

Couleur

Exemples : #3b82f6, rgb(59, 130, 246), hsl(217, 91%, 60%), cmyk(76%, 47%, 0%, 4%)

Formats convertis

Vérificateur de contraste

Exemple de texte16 px

Exemple de texte24 px

Un grand texte fait au moins 24 px en graisse normale ou environ 18,67 px en gras.

Ratio de contraste—

    Teintes claires et foncées

    Mélange avec le noir (foncées) et le blanc (claires) en sRGB linéaire. Cliquez sur une pastille pour copier son HEX.

    Sur cette page

    Collez une couleur CSS dans n'importe quelle notation courante et obtenez la même couleur en HEX, RGB, HSL et CMYK, prête à copier. La page génère aussi une palette de nuances plus claires et plus foncées et vérifie le contraste WCAG entre un texte et son fond.

    Fonctionnalité détaillée

    Le format est détecté automatiquement : #3b82f6, la forme courte #38f (le dièse est facultatif), rgb(59, 130, 246) ou rgba(…) avec des canaux de 0 à 255 ou en pourcentage, hsl(217, 91%, 60%) avec deg facultatif, et cmyk(76%, 47%, 0%, 4%). La syntaxe CSS séparée par des espaces, comme rgb(59 130 246 / 50%), fonctionne aussi ; l'alpha est accepté mais ignoré, car les résultats n'ont pas de transparence. Les valeurs invalides ou hors plage sont signalées par une erreur au lieu d'être devinées. Vous pouvez aussi choisir la couleur avec le sélecteur natif.

    La palette mélange la couleur courante avec du noir (teintes foncées) et du blanc (teintes claires) à 20, 40, 60 et 80 % en sRGB linéaire : neuf pastilles avec l'originale au centre ; un clic sur une pastille copie son code HEX. Le vérificateur de contraste prend une couleur de texte et une couleur de fond et affiche le rapport avec les quatre seuils WCAG 2.x : AA 4.5:1 et AAA 7:1 pour le texte normal, AA 3:1 et AAA 4.5:1 pour le grand texte.

    Toutes les conversions sont de simples formules JavaScript exécutées dans la page : rien n'est envoyé. Le CMYK utilise la formule simple sans profil ICC ; il donne un ordre d'idée, pas une épreuve de prépresse. HSL et CMYK sont arrondis à l'entier, une conversion inverse peut donc différer d'une unité.

    Exemples pratiques

    HEX vers tout : #3b82f6 donne rgb(59, 130, 246), hsl(217, 91%, 60%) et cmyk(76%, 47%, 0%, 4%).

    HSL vers HEX : hsl(0, 100%, 50%) devient #FF0000, tout comme cmyk(0%, 100%, 100%, 0%).

    Contraste : un texte gris #777777 sur fond blanc #ffffff a un rapport de 4.48:1 — il réussit AA pour le grand texte (3:1) mais échoue AA pour le texte normal (4.5:1).

    Paire par défaut : la paire prédéfinie #1e3a8a sur #ffffff atteint 10.36:1 et réussit les quatre niveaux WCAG.

    Comment utiliser cet outil

    1. Saisir une couleur

      Tapez ou collez une valeur dans Saisie manuelle (HEX, rgb(), hsl() ou cmyk()) puis cliquez sur Convertir ou appuyez sur Entrée — ou choisissez une couleur avec le Sélecteur de couleur.

    2. Copier le format voulu

      Dans Formats convertis, cliquez sur le bouton de copie à côté de HEX, RGB, HSL ou CMYK.

    3. Copier une teinte claire ou foncée

      Dans Teintes claires et foncées, cliquez sur une pastille pour copier son code HEX.

    4. Vérifier le contraste

      Dans le Vérificateur de contraste, réglez la Couleur de premier plan et la Couleur d'arrière-plan, puis lisez le rapport et les résultats AA/AAA.

    Conseils et bonnes pratiques

    • Le # est facultatif et la forme à trois chiffres fonctionne : 38f est lu comme #3388FF.
    • La teinte peut s'écrire avec ou sans deg ; saturation et luminosité vont de 0 à 100.
    • Les valeurs hors plage (par exemple rgb(300, 0, 0)) sont refusées au lieu d'être tronquées en silence.
    • Pour le texte courant, visez au moins 4.5:1 ; 3:1 ne suffit que pour le grand texte (24 px, ou 18,66 px en gras).
    • N'utilisez pas ce CMYK pour l'impression : demandez à l'imprimeur des valeurs adaptées à son profil ICC.