Gratuit · Prive · Sans inscription

Generateur de palette de couleurs

Generez des palettes accessibles depuis une couleur HEX et exportez les variables CSS, couleurs Tailwind ou JSON. Tous les calculs restent sur votre appareil.

Harmonie de couleurs
Apercu en direct

Visualisez la palette dans une interface

SYSTEME COULEURConcevez avec confiance

Un apercu pratique des boutons, surfaces et accents.

Activite hebdomadaire84%

CSS variables

:root {
  --color-1: #12C18A;
  --color-2: #2FC0E1;
  --color-3: #2563EB;
  --color-4: #451DF3;
  --color-5: #C25DF0;
}

Tailwind config

colors: {
  'brand-100': '#12C18A',
  'brand-200': '#2FC0E1',
  'brand-300': '#2563EB',
  'brand-400': '#451DF3',
  'brand-500': '#C25DF0',
}

JSON

{
  "base": "#2563EB",
  "harmony": "analogous",
  "colors": [
    "#12C18A",
    "#2FC0E1",
    "#2563EB",
    "#451DF3",
    "#C25DF0"
  ]
}

Construire une palette utilisable, pas seulement cinq belles couleurs

Commencez par la couleur qui represente deja votre marque ou interface. Les palettes analogues sont coherentes, les complementaires creent un accent fort et les palettes monochromes sont utiles pour les etats UI et design tokens.

Verifier le contraste avant publication

Le ratio de chaque nuance compare la couleur avec le texte noir ou blanc le plus lisible. Pour une paire texte-fond precise, verifiez-la dans le testeur de contraste WCAG.

Ouvrir le testeur de contraste WCAG

Questions sur les palettes de couleurs

Comment fonctionne le generateur de palette ?

Choisissez une couleur HEX et une harmonie. L outil calcule cinq couleurs liees avec leur teinte, saturation et luminosite, directement dans votre navigateur.

Puis-je exporter la palette pour un projet web ?

Oui. Copiez la palette comme variables CSS, objet de couleurs Tailwind ou JSON.

Les couleurs generees sont-elles accessibles ?

Chaque nuance affiche son meilleur ratio de contraste avec le noir ou le blanc et indique la compatibilite WCAG AA ou AAA.