Comment utiliser

1
Choisir l'harmonie
Choisissez une règle d'harmonie des couleurs comme Analogues ou Complémentaires pour définir la relation entre les couleurs.
2
Choisir l'ambiance
Définissez l'atmosphère avec le sélecteur d'ambiance. Choisissez Pastel, Vibrant ou Mode Sombre.
3
Générer
Cliquez sur Générer pour créer des palettes uniques. Verrouillez les couleurs aimées et régénérez le reste.
4
Exporter
Copiez les codes Hex ou cliquez sur Exporter pour obtenir la configuration Tailwind CSS complète.

Guide de Théorie des Couleurs

Comprendre l'Harmonie

Analogues
Couleurs adjacentes sur le cercle chromatique. Crée des designs sereins et confortables.
Complémentaires
Couleurs opposées sur le cercle chromatique. Crée un fort contraste et un fort impact.
Triadique
Trois couleurs équidistantes sur le cercle chromatique. Offre un fort contraste tout en maintenant l'harmonie.
Complément Divisé
Variation du schéma complémentaire. Utilise une couleur de base et les deux adjacentes à son complément.
Monochromatique
Variations de luminosité et de saturation d'une seule couleur. Propre, élégant et apaisant.
Chaos Aléatoire
Couleurs complètement aléatoires sans règles. Idéal pour l'inspiration inattendue.

Explorer les Ambiances

Standard
Saturation et luminosité équilibrées. Adapté au design web général.
Rêves Pastel
Haute luminosité et faible saturation. Doux et apaisant. Parfait pour les thèmes lifestyle.
Néon Vibrant
Haute saturation et luminosité moyenne. Énergique et accrocheur.
Mode Sombre
Faible luminosité et tons désaturés. Profond et moderne. Réduit la fatigue oculaire.
Rétro Vintage
Tons désaturés et légèrement chauds. Nostalgique et intemporel.

Choosing Colors That Work Together

Overview

Color choice can make or break a design. Random color combinations look chaotic; deliberate palettes built on color theory feel intentional and professional. This tool generates harmonious palettes from a single base color using established color theory relationships: complementary (opposite on the color wheel), analogous (adjacent), triadic (three evenly spaced), and tetradic (four). It also extracts palettes from uploaded images and shows hex/RGB/HSL values for direct use in CSS or design files.

How It Works

Color theory expressed mathematically: a color in HSL has hue (0–360°), saturation, and lightness. Complementary = base hue + 180°. Triadic = base + 120° and base + 240°. Analogous = base ± 30°. The tool computes these mathematically, then displays the resulting palette with copy-to-clipboard for each color. Image-based palettes use color quantization (k-means clustering) to find the most dominant colors in the uploaded image.

When to Use This

Designing UI for a website or app (primary, secondary, accent colors). Picking colors for a brand identity. Coordinating slide deck visuals. Choosing paint colors for a room (start from one wall, find complementary trim). Creating data visualization color schemes (categorical or sequential). Generating themes for graphics — Instagram posts, YouTube thumbnails, blog headers.

Frequently Asked Questions

What's the difference between complementary and analogous?

Complementary colors are opposite on the color wheel (blue + orange) — high contrast, visually striking. Analogous colors are next to each other (blue + blue-green + green) — calmer, more cohesive. Use complementary for accents, analogous for backgrounds.

How many colors should a design use?

60-30-10 rule: 60% dominant (background), 30% secondary, 10% accent. Most professional designs use 3–5 colors total. More than 5 starts to feel chaotic unless you're explicitly going for a vibrant playful look.

What's the WCAG contrast requirement?

For accessibility, text must have at least 4.5:1 contrast against its background (3:1 for large text). Black on white is 21:1. Dark gray on light gray often fails — check with a contrast tool before shipping.