Générateur de palette de couleurs

Comment utiliser le générateur de palette

1. Choisissez une Couleur de base avec la pastille, ou saisissez un code dans Code de la couleur de base (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), un nom CSS…).
2. Sélectionnez une Harmonie : Complémentaire, Analogue, Triadique, Complémentaires adjacentes, Tétradique (rectangle), Carré ou Monochrome.
3. Choisissez le Cercle chromatique : TSL (classique) ou OKLCH (perceptuel). La palette se met à jour dès qu’une option change ; le bouton Générer la palette la rafraîchit aussi.
4. Copiez une couleur avec le bouton Copier sous sa pastille, ou choisissez un format dans Exporter en (Liste HEX, Variables CSS, Variables SCSS, Tableau JSON ou Couleurs Tailwind), puis Copier ou Télécharger la palette entière.

Chaque pastille affiche son code HEX en noir ou en blanc, selon le meilleur contraste, et sa position par rapport à la couleur de base (par exemple +120°).

Les harmonies de couleurs

Une harmonie repose sur des angles fixes du cercle chromatique. À partir de votre teinte de base, l’outil fait tourner la teinte en conservant la saturation et la luminosité de départ.

• Complémentaire (0°, 180°) : la couleur opposée. Contraste maximal, idéal pour un bouton d’action face à la couleur principale d’une marque.
• Analogue (−60°, −30°, 0°, +30°, +60°) : les voisines sur le cercle. Des accords doux et naturels, parfaits pour les fonds et les illustrations.
• Triadique (0°, 120°, 240°) : trois teintes régulièrement espacées. Vivant et équilibré ; en général, une couleur domine et les deux autres servent d’accents.
• Complémentaires adjacentes (0°, 150°, 210°) : les deux voisines de la complémentaire. Un contraste fort, mais moins tendu qu’une paire complémentaire pure.
• Tétradique (rectangle) (0°, 60°, 180°, 240°) : deux paires complémentaires. Des palettes riches, qui demandent une couleur dominante pour rester cohérentes.
• Carré (0°, 90°, 180°, 270°) : quatre teintes à intervalles égaux.
• Monochrome : une seule teinte déclinée en cinq niveaux de luminosité, du foncé au clair. Idéal pour les états d’interface, les graphiques et les designs sobres.

Cercle TSL ou OKLCH ?

Le cercle TSL (classique) est celui de la plupart des logiciels et des tutoriels. Son défaut : des angles égaux ne donnent pas des couleurs d’égale clarté. À luminosité TSL identique, le jaune (60°) paraît bien plus clair que le bleu (240°).

Le cercle OKLCH (perceptuel) fait tourner la teinte dans le modèle Oklab, conçu pour que la luminosité perçue reste constante. Les palettes obtenues ont un poids visuel homogène, ce qui aide à garder de bons contrastes. Certaines couleurs obtenues peuvent sortir de ce qu’un écran sait afficher : l’outil réduit alors légèrement leur chroma pour qu’elles restent affichables.

Utiliser la palette exportée

Les Variables CSS produisent un bloc :root avec --color-1, --color-2… à coller dans une feuille de style. Les Variables SCSS donnent des lignes $color-1: …;, le Tableau JSON une liste de codes HEX pour vos scripts, et les Couleurs Tailwind un objet colors avec des clés 100, 200, 300… pour votre configuration Tailwind.

Avant de publier, vérifiez le contraste du texte : une harmonie garantit des teintes agréables, pas un texte lisible. Réservez les couleurs saturées aux accents, boutons et graphiques, et utilisez des neutres foncés ou clairs pour le texte courant.