🎨 Color Palette Generator
Generate harmonious color palettes — complementary, triadic, analogous, and more. Export as CSS variables, HEX list, or JSON. Free online color palette generator for designers.
How to Use
1
Pick a base color
Click the base color swatch or enter a HEX value to set your starting color.
2
Choose a scheme
Select Complementary, Analogous, Triadic, Tetradic, or Monochromatic from the scheme selector.
3
Export the palette
Lock colors you want to keep, click Regenerate to vary others, then export as CSS variables, Tailwind, or JSON.
Frequently Asked Questions
What is a color palette in design?
A color palette is a set of colors chosen to work harmoniously together in a design. Color theory defines relationships between colors: complementary (opposite on the color wheel), analogous (adjacent), triadic (three equidistant), tetradic (four), and monochromatic (same hue, varying lightness).
What is a complementary color scheme?
Complementary colors are directly opposite each other on the color wheel (e.g., blue and orange, red and green). They create strong contrast and visual tension — ideal for call-to-action buttons and highlights that need to stand out.
What is an analogous color scheme?
Analogous colors are adjacent on the color wheel (e.g., blue, blue-green, green). They create harmonious, natural-looking combinations with low contrast — great for backgrounds, serene designs, and nature-inspired UIs.
How do I lock a color I like?
Click the lock icon on any color swatch to lock it. Locked colors are preserved when you click Regenerate or change the scheme type. This lets you keep a brand color while varying the supporting palette.
How do I export the palette?
Use the Export dropdown to copy as CSS custom properties (--color-1: #abc), Tailwind config colors object, or a raw JSON array. All formats are ready to paste directly into your project.
Guide : Générateur de Palette de Couleurs
Qu'est-ce que c'est ?
Le Générateur de Palette crée des combinaisons de couleurs harmonieuses : complémentaires, triadiques, analogues et monochromatiques, basées sur une couleur de base.
Idéal pour créer des identités visuelles cohérentes et des systèmes de design accessibles.
Comment utiliser
- Sélectionnez une couleur de base avec le sélecteur de couleur.
- Choisissez le type d'harmonie (complémentaire, triadique…).
- Parcourez la palette générée avec les codes HEX/RGB.
- Exportez la palette en CSS custom properties ou JSON.
Conseils professionnels
- Vérifiez les ratios de contraste de votre palette pour l'accessibilité WCAG.
- Utilisez des palettes monochromatiques pour les interfaces professionnelles et épurées.