Couleur
Créez une palette à partir d’une couleur de base : harmonies de la roue chromatique ou nuances de 50 à 950, puis exportez-la en CSS, Tailwind, JSON ou SCSS.
Cliquez sur une couleur pour copier son code HEX.
Exemple de nom : brand-base
Le générateur de palette construit des couleurs à partir d’une couleur de base. En mode Harmonie, il applique les schémas de la roue chromatique : complémentaire, analogue, triade, tétrade, complémentaire partagée et monochrome. En mode Nuances, il produit une échelle de 50 à 950 en 11 étapes calculée en OKLCH, avec votre couleur placée à son étape naturelle. Chaque couleur se copie en un clic et la palette s’exporte en variables CSS, en thème Tailwind v4, en JSON ou en SCSS. Tout est calculé dans votre navigateur.
C’est la couleur opposée à la couleur de base sur la roue chromatique, décalée de 180° en teinte. L’outil applique ce décalage dans l’espace HSL en gardant la saturation et la luminosité de la couleur de base.
La triade réunit trois couleurs espacées de 120°. La tétrade en réunit quatre, espacées de 90°. La complémentaire partagée garde la couleur de base et les deux couleurs voisines de sa complémentaire, à +150° et +210°. L’analogue, lui, prend les deux couleurs voisines à −30° et +30°.
Les 11 étapes suivent une courbe de luminosité fixe dans l’espace OKLCH, proche de celle de Tailwind. La teinte est conservée, la chroma est adaptée puis ramenée dans l’espace sRGB si besoin, et votre couleur est reprise telle quelle à l’étape dont la luminosité est la plus proche. La luminosité décroît strictement de 50 à 950.
Choisissez le format Tailwind v4, donnez un nom à la palette et copiez le bloc @theme dans votre fichier CSS. Les variables --color-brand-500 et suivantes donnent accès aux classes utilitaires comme bg-brand-500 ou text-brand-500.
Non. Les calculs se font dans votre navigateur et rien n’est transmis ni conservé.
Les ratios de contraste WCAG expliqués : 4,5:1, 3:1 et 7:1, grand texte, erreurs fréquentes (gris clair, texte sur image) et comment corriger une couleur.
Ce que représentent HEX, RGB et HSL, comment convertir une couleur de l’un à l’autre, pourquoi HSL aide pour les variantes et quel format choisir selon l’usage.
Comment extraire les couleurs d’une image : pixel exact, palette dominante par découpe médiane, limites du JPEG et de l’éclairage, puis contrôle du contraste.
Construire une palette pour un site : base, harmonies, règle 60-30-10, nuances de 50 à 950, couleurs d’état, contrastes et export en CSS ou en Tailwind v4.
Générez des QR codes. Sans paywall, sans pub, sans suivi.
Vérifiez le contraste WCAG AA et AAA entre deux couleurs.
Convertissez HEX, RGB, HSL, HSV et OKLCH, avec aperçu et contraste.
Relevez une couleur dans une image et obtenez sa palette dominante.