Comment utiliser Palette de couleurs et contraste
- 1
Partez d’une couleur
Saisissez ou choisissez une couleur de base, puis sélectionnez une harmonie (analogues, triade, complémentaires divisées…) ou générez une palette aléatoire.
- 2
Verrouillez et affinez
Verrouillez les échantillons qui vous plaisent avant de mélanger à nouveau, modifiez directement n’importe quel échantillon, ou extrayez les cinq couleurs dominantes d’une photo.
- 3
Vérifiez la lisibilité
Ouvrez Contraste pour tester le texte sur l’arrière-plan selon les niveaux AA et AAA des WCAG 2.2, appliquez une correction suggérée et visualisez la palette en simulant le daltonisme.
- 4
Exportez
Copiez des variables CSS, un thème Tailwind v4 ou une configuration v3, du SCSS ou du JSON avec des nuances de 50 à 950, ou téléchargez des échantillons PNG.
Limites et Pro
Tout est gratuit : palettes de 5 couleurs, 6 harmonies, mélanges et exports illimités, images jusqu’à 50 Mo pour l’extraction des couleurs, échantillons PNG de 1 600 pixels de large.
À propos de Palette de couleurs et contraste
Ce générateur de palettes crée un schéma de cinq couleurs et tout ce dont un système de design a besoin autour. Les harmonies font tourner la teinte de base sur le cercle chromatique TSL : les analogues s’écartent de 30° de chaque côté, les complémentaires ajoutent la teinte opposée, les complémentaires divisées prennent les deux teintes voisines de l’opposée, la triade espace trois teintes de 120°, la tétrade forme un carré de 90°, et le monochrome garde une seule teinte à cinq niveaux de luminosité. Le mode aléatoire respecte les échantillons verrouillés, et l’option d’image regroupe les pixels d’une photo dans l’espace OKLab pour trouver ses cinq couleurs distinctes les plus fréquentes.
Pour chaque couleur, l’onglet Nuances produit une échelle de 11 niveaux, de 50 à 950, en OKLCH, où le niveau le plus proche de votre couleur reprend exactement sa valeur, ou bien les 13 tons du système HCT de Material 3 avec les cinq palettes clés qu’un thème Material en déduirait. Le vérificateur de contraste applique la formule de luminance des WCAG 2.2, n’arrondit jamais un rapport à la hausse et suggère la couleur conforme la plus proche en ne modifiant que la luminosité, sans toucher à la teinte. Une grille affiche le rapport de chaque paire de la palette avec le blanc et le noir.
Les simulations couvrent la protanopie, la deutéranopie, la tritanopie et l’achromatopsie avec les matrices de Machado, et signalent les échantillons qui se confondent. Les exports nomment les couleurs selon leur teinte et acceptent vos propres noms. L’outil ne juge pas si des couleurs conviennent à une marque, et les simulations ne sont qu’une approximation de la vision des personnes daltoniennes : elles ne remplacent pas un test avec elles.
Confidentialité
Tous les calculs de couleurs, les vérifications de contraste et l’analyse d’image s’exécutent dans cet onglet : une photo utilisée pour extraire des couleurs est lue depuis votre disque dans un petit canevas et n’est jamais envoyée. La palette peut être conservée dans l’adresse de la page pour qu’un lien copié la rouvre ; rien n’est enregistré sur un serveur.
Fonctionnalités
Six harmonies et couleurs d’image
Des analogues à la tétrade à partir d’une couleur de base, des mélanges aléatoires avec verrouillage, ou les couleurs dominantes d’une photo.
Contraste WCAG 2.2 avec corrections
AA et AAA pour le texte normal et le grand texte ainsi que pour les éléments d’interface, avec la couleur conforme la plus proche à un clic.
Exports prêts pour le code
Variables CSS, Tailwind v4 et v3, SCSS et JSON en HEX, RGB, HSL ou OKLCH, plus des échantillons PNG.