Convertisseur de couleurs

Convertissez entre HEX, RGB, HSL, HSV et CMYK. Aperçu en direct. Vérificateur de contraste WCAG pour l'accessibilité. Rien ne quitte votre navigateur.

Comment fonctionne Convertisseur de couleurs

Convertisseur de couleurs traduit instantanément n'importe quelle couleur entre les formats HEX, RGB, HSL, HSV et CMYK au fil de la saisie. Il effectue aussi un contrôle de contraste WCAG entre deux couleurs que vous choisissez, affichant le ratio de contraste et le résultat de conformité AA/AAA pour le texte normal, le texte grand et les composants d'interface. Tous les calculs s'effectuent dans le navigateur sans aucun envoi de données ; rien de ce que vous tapez ne quitte votre appareil.

Comprendre comment la même couleur s'exprime dans différents modèles est utile lors des passations entre design et développement. Un designer peut spécifier une couleur de marque en HEX #1A4F8C ; un développeur CSS a besoin de l'équivalent HSL pour le thème ; une équipe d'impression a besoin de la décomposition CMYK. Cet outil fait la conversion dans toutes les directions à la fois.

Rédigé par Bastien Sulyan

Comment utiliser Convertisseur de couleurs, étape par étape

Tapez une valeur HEX, cliquez sur un échantillon de couleur, ou entrez des valeurs RGB, HSL, HSV ou CMYK dans les champs correspondants.
Toutes les autres représentations de format se mettent à jour immédiatement pour afficher la couleur équivalente.
Pour lancer un contrôle de contraste, sélectionnez une couleur de premier plan et une couleur d'arrière-plan avec les deux sélecteurs de couleur.
Lisez le ratio de contraste WCAG et les badges de conformité AA et AAA.
Copiez n'importe quelle valeur de couleur en utilisant l'icône de copie à côté de chaque champ.

Cas d'utilisation courants

Un designer UI convertit un code HEX de marque en HSL pour écrire une propriété CSS personnalisée pour un système de thème.
Un développeur web vérifie le ratio de contraste entre sa couleur de texte et son arrière-plan avant de livrer un composant pour confirmer la conformité WCAG AA.
Un designer print reçoit une couleur web en HEX et a besoin de l'équivalent CMYK pour la reproduire dans une brochure imprimée.
Un développeur a besoin de la décomposition RGB d'un token de design pour passer les valeurs individuelles de canal à une fonction de dessin canvas.

Questions fréquentes

L'outil prend-il en charge les valeurs alpha (transparence) ?

Le convertisseur actuel fonctionne avec des couleurs entièrement opaques (alpha = 1). HEXA (hex à 8 chiffres) et RGBA ne sont pas encore dans le périmètre. Pour l'opacité, définissez le canal alpha dans votre CSS séparément en utilisant la notation rgba() ou oklch().

Les couleurs que je saisis sont-elles stockées ou envoyées quelque part ?

Non. La conversion de couleurs est de l'arithmétique pure (remappage de canaux et mise à l'échelle de plages) qui s'exécute entièrement dans le moteur JavaScript du navigateur. Rien de ce que vous tapez ici n'atteint un serveur ou un service externe.

Quels niveaux de contraste WCAG le vérificateur prend-il en charge ?

L'outil rend compte par rapport aux critères de succès WCAG 2.1 : AA exige un ratio de contraste minimum de 4,5:1 pour le texte normal (moins de 18pt ou 14pt gras) et 3:1 pour le texte grand et les composants d'interface. AAA exige 7:1 pour le texte normal et 4,5:1 pour le texte grand.

Pourquoi les valeurs CMYK diffèrent-elles entre cet outil et les logiciels de design professionnels ?

La conversion RGB vers CMYK que cet outil effectue est une formule mathématique sans profil colorimétrique. Les applications de design professionnelles appliquent des profils colorimétriques ICC qui tiennent compte du grossissement des points d'encre et des propriétés du support. Les valeurs CMYK ici sont utiles pour une approximation ; pour l'impression de production, appliquez toujours votre profil de presse dans un logiciel dédié.

Puis-je convertir un nom de couleur CSS comme 'cornflowerblue' ici ?

Les couleurs CSS nommées ne sont pas directement saisies dans les champs du convertisseur. Pour convertir une couleur nommée, trouvez d'abord sa valeur HEX dans une référence CSS (cornflowerblue est #6495ED), puis collez ce HEX dans le champ HEX pour voir tous les autres formats.

L'outil fonctionne-t-il hors ligne après le chargement de la page ?

Oui. La conversion de couleurs est arithmétique sans dépendance externe. Une fois la page dans votre cache navigateur, vous pouvez l'ouvrir sans connexion réseau et toutes les conversions fonctionneront normalement.

Outils liés

Tout reste local, explorez des outils complémentaires.

Tous les outils développeur