Convertisseur couleur pour le travail d'interface

Convertissez des valeurs couleur, vérifiez le contraste et explorez des palettes liées avant qu'un token de design arrive en production.

Cliquez pour choisir une couleur
4.70vs Black
4.46vs White
Vérification du contraste WCAG
Un ratio 4,5:1 est la base WCAG habituelle pour le texte courant. Les grands textes ont un seuil inférieur, mais un contraste faible gêne toujours de vrais utilisateurs.
HEX
RGB
HSL
CMYK

Relations de couleurs suggérées

Complémentaire
#6366f1
#f1ef63
Analogue
#63acf1
#6365f1
#a863f1
Nuances
#6467f2
#2529ec
#1013bd
#0b0d7e
#05063f

Guide des formats couleur

HEX

Format compact très utilisé en conception web, généralement écrit comme une valeur hexadécimale à six chiffres.

RGB

Modèle orienté écran basé sur les valeurs de lumière rouge, verte et bleue.

HSL

Modèle plus lisible pour les humains autour de teinte, saturation et luminosité. Utile pour créer des états plus clairs, plus sombres ou liés.

CMYK

Modèle orienté impression basé sur cyan, magenta, jaune et noir. Attendez-vous à des écarts en traduisant des couleurs écran vives vers l'impression.

Contraste

Le contraste affecte formulaires, tableaux de bord, tableaux de prix, états d'erreur et tous les endroits où l'utilisateur doit lire vite.

Questions fréquentes

Pourquoi les conversions RGB et CMYK dérivent-elles légèrement ?

La couleur écran et la couleur imprimée fonctionnent dans des espaces différents. Certaines couleurs RGB ne peuvent tout simplement pas être reproduites exactement en CMYK.

Que signifie le score de contraste WCAG ?

Il mesure la lisibilité d'une couleur de premier plan avec son arrière-plan. Des valeurs plus hautes indiquent généralement une meilleure lisibilité du texte.

Faut-il utiliser les couleurs de marque pour le texte courant ?

Non. Une couleur de marque efficace pour un logo ou un accent peut échouer comme texte courant. Utilisez des neutres plus forts ou des nuances ajustées quand la lisibilité compte.

Pourquoi les couleurs diffèrent-elles entre les outils ?

Écrans, profils couleur, navigateurs et flux d'impression peuvent rendre différemment la même valeur numérique. Utilisez la conversion comme guide pratique, puis testez sur le support cible.