La bonne couleur est dans la mauvaise notation
Traduisez entre HEX, RGB, HSL et les formats de sortie disponibles sans deviner la valeur des canaux. Ouvrir Convertisseur de couleurs
Atelier de design
Outils de couleur et CSS
Convertissez les couleurs, vérifiez le contraste et créez des effets CSS prêts à utiliser.
Choisissez une tâche
Que souhaitez-vous faire ?
Couleur
Convertisseur de couleurs
Convertissez des couleurs entre HEX, RGB(A), HSL(A), HSV et OKLCH.
Couleur
Vérificateur de contraste WCAG
Mesurez le rapport de contraste entre les couleurs du texte et du fond.
Couleur
Générateur de palette de couleurs
Créez des teintes coordonnées à partir d’une couleur de base avec des relations prévisibles.
Couleur
Sélecteur de couleur sur image
Prélevez un pixel d’une image et copiez ses valeurs HEX, RGB et HSL.
Couleur
Générateur de dégradés CSS
Créez un dégradé linéaire ou radial à deux couleurs avec aperçu.
Couleur
Générateur d’ombres CSS
Réglez décalage, flou, étalement, couleur, opacité et mode intérieur.
Couleur
Générateur de filtres CSS
Combinez luminosité, contraste, saturation, teinte, flou, sépia, gris et inversion.
Ce que couvre cette collection
Les tâches que ces outils traitent
Le design réclame des couleurs dans la notation attendue par l’outil suivant, et il faut qu’elles passent la revue d’accessibilité. Convertissez entre HEX, RGB et HSL avec alpha au besoin, vérifiez un couple texte/fond face aux seuils WCAG AA et AAA, prélevez des couleurs dans une image ou construisez une palette à partir d’une teinte de base, et générez le CSS de dégradé, d’ombre ou de filtre prêt à coller dans une feuille de styles.
Choisissez l’outil de couleur selon la décision de design
Convertir une notation, choisir une palette et vérifier l’accessibilité répondent à des questions différentes. Utilisez le vérificateur pour une décision objective plutôt que d’estimer le contraste à l’œil.
Votre texte et votre interface doivent rester lisibles
Testez un premier plan et un arrière-plan selon les seuils WCAG affichés avant la publication. Ouvrir Vérificateur de contraste WCAG
Vous cherchez des couleurs liées à une teinte de départ
Générez une palette coordonnée, puis validez les associations prévues pour le texte. Ouvrir Générateur de palette de couleurs
Transformez une image d’inspiration en palette accessible
Prélevez d’abord, organisez ensuite, puis testez les vrais couples premier plan et fond. Une palette agréable ne garantit pas automatiquement un texte lisible.
1. Prélevez dans la source
Sélectionnez des pixels représentatifs et conservez les valeurs exactes à explorer. Ouvrir Sélecteur de couleur sur image
2. Construisez des options liées
Utilisez une couleur prélevée comme base et comparez plusieurs stratégies de palette coordonnée. Ouvrir Générateur de palette de couleurs
3. Validez les vrais couples
Vérifiez chaque combinaison texte-fond prévue, y compris le petit texte et les états atténués. Ouvrir Vérificateur de contraste WCAG
Confidentialité intégrée
Votre travail reste avec vous
Les fichiers et textes sélectionnés restent privés pendant l’utilisation de ces outils.
Résultats fluides
Conseils pour les fichiers volumineux
Les très gros fichiers peuvent demander plus de mémoire, surtout sur mobile. Conservez les originaux et commencez par un petit lot.