Une palette de couleurs est un ensemble fixe de couleurs choisies pour fonctionner ensemble dans un design. Lorsque vous sélectionnez une couleur de base pour une marque, un site web ou une illustration, vous avez besoin de couleurs complémentaires qui s'accordent bien avec elle. La génération de palettes automatise ce choix en appliquant les règles de la théorie des couleurs, et plus précisément les relations géométriques sur la roue chromatique HSL standard.
La roue chromatique HSL (Teinte, Saturation, Luminosité) dispose les teintes en cercle de 360 degrés. Le rouge se trouve à 0 degré, le vert à 120 degrés et le bleu à 240 degrés. Chaque schéma d'harmonie colorée fonctionne en sélectionnant des teintes à des distances angulaires précises par rapport à la couleur de base. Une paire complémentaire, par exemple, utilise deux couleurs espacées de 180 degrés. Un ensemble analogue sélectionne des couleurs dans un rayon de 30 degrés de chaque côté. Ces règles géométriques produisent des combinaisons équilibrées car les teintes choisies se répartissent autour de la roue plutôt que de se concentrer dans une seule zone.
Cet outil accepte n'importe quelle couleur hex en entrée, la convertit en HSL, fait pivoter la teinte selon les angles définis par le schéma sélectionné, puis reconvertit les résultats en hex. Il prend en charge six schémas : complémentaire, analogue, triadique, split-complémentaire, tétradique et monochromatique. Chaque schéma produit un nombre différent de couleurs en sortie, de 2 à 5.
Pourquoi utiliser ce générateur de palettes ?
Choisir des couleurs qui fonctionnent ensemble par tâtonnement est lent et peu fiable. Un générateur de palettes applique instantanément les règles de la théorie des couleurs, vous donnant des résultats mathématiquement équilibrés depuis n'importe quel point de départ.
⚡
Génération instantanée
Sélectionnez une couleur de base et un type de schéma : la palette apparaît immédiatement. Pas de soumission de formulaire, pas d'écran de chargement. Modifiez la couleur de base et la sortie se met à jour en temps réel.
🎨
Six schémas d'harmonie
Choisissez parmi complémentaire, analogue, triadique, split-complémentaire, tétradique ou monochromatique. Chaque schéma produit un effet visuel différent, des paires à fort contraste aux dégradés subtils en monochrome.
🔒
Traitement axé sur la confidentialité
Tous les calculs de couleurs s'exécutent dans votre navigateur. Aucune donnée de couleur n'est envoyée à un serveur. L'outil fonctionne hors ligne une fois la page chargée.
📋
Export en un clic
Copiez les codes hex individuels ou la palette entière en un clic. Collez directement dans CSS, Figma, une config Tailwind ou tout outil de design acceptant des valeurs hex.
Cas d'usage du générateur de palettes
Création de thèmes d'interface
Les développeurs frontend qui créent une nouvelle application peuvent partir d'une couleur de marque et générer une palette complète pour les tokens primaires, secondaires et d'accentuation. Les schémas triadiques ou tétradiques produisent suffisamment de variété pour les boutons, liens, alertes et arrière-plans.
Tokens de couleur pour les systèmes de design
Les ingénieurs de systèmes de design utilisent les palettes monochromatiques pour générer une échelle de luminosité à partir d'une seule teinte de marque, puis associent chaque niveau à un token nommé (par ex. blue-100 à blue-900).
Visualisation de données
Les ingénieurs et analystes de données ont besoin de couleurs distinctes pour les séries de graphiques qui ne se heurtent pas visuellement. Une palette analogue ou triadique offre suffisamment de séparation pour 3 à 6 séries tout en maintenant la cohérence visuelle du graphique.
Pages de destination marketing
Les designers qui créent des pages de campagne partent de la couleur principale de la marque et utilisent un schéma split-complémentaire pour trouver des couleurs d'accentuation pour les boutons CTA et les sections mises en évidence, sans entrer en conflit avec le logo.
Combinaisons accessibles
Les ingénieurs QA qui testent la conformité WCAG associent les couleurs de la palette générée et les font passer par un vérificateur de contraste. Partir d'un schéma complémentaire ou split-complémentaire produit souvent des paires avec un fort contraste de luminance.
Apprentissage de la théorie des couleurs
Les étudiants en design peuvent basculer entre les six schémas sur la même couleur de base et observer comment chaque géométrie répartit les teintes autour de la roue. Le résultat visuel rend les angles abstraits concrets.
Comparaison des schémas d'harmonie colorée
Chaque schéma d'harmonie sélectionne des couleurs en fonction des angles de rotation de la teinte par rapport à la couleur de base sur la roue HSL. Le tableau ci-dessous liste chaque schéma, le nombre de couleurs produites, les angles de rotation et le contexte de design où il convient le mieux.
Schéma
Couleurs
Angles de teinte
Idéal pour
Complementary
2
180
High contrast, call-to-action buttons
Analogous
3
-30, 0, +30
Harmonious, low-tension backgrounds
Triadic
3
0, 120, 240
Balanced variety, dashboards
Split-Complementary
3
0, 150, 210
Softer contrast than complementary
Tetradic (Rectangle)
4
0, 90, 180, 270
Rich palettes, complex UIs
Monochromatic
5
Same hue, varied lightness
Subtle, single-brand pages
Comment fonctionne la rotation sur la roue chromatique HSL
Toute la génération de palettes dans cet outil repose sur le modèle de couleur HSL. Comprendre ses trois axes vous aide à anticiper comment une couleur de base se transformera sous chaque schéma.
Teinte (0-360)
La position sur la roue chromatique en degrés. 0 est le rouge, 60 le jaune, 120 le vert, 180 le cyan, 240 le bleu, 300 le magenta. Les schémas de palette font pivoter cette valeur tout en maintenant la saturation et la luminosité constantes.
Saturation (0-100 %)
La vivacité de la couleur. 100 % est entièrement saturé ; 0 % est un niveau de gris. Les schémas de palette préservent la saturation de base afin que toutes les couleurs générées partagent la même intensité.
Luminosité (0-100 %)
La brillance de la couleur. 0 % est le noir, 50 % est la teinte pure, 100 % est le blanc. Les schémas monochromatiques font varier la luminosité pour créer une échelle tonale ; tous les autres schémas maintiennent la luminosité constante.
Exemples de code
Générez des palettes de couleurs par programmation en utilisant la conversion HSL et la rotation de teinte.
JavaScript
// Generate a complementary color by rotating hue 180 degrees
function hexToHsl(hex) {
let r = parseInt(hex.slice(1,3), 16) / 255;
let g = parseInt(hex.slice(3,5), 16) / 255;
let b = parseInt(hex.slice(5,7), 16) / 255;
const max = Math.max(r,g,b), min = Math.min(r,g,b);
let h = 0, s = 0, l = (max + min) / 2;
if (max !== min) {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
else if (max === g) h = ((b - r) / d + 2) / 6;
else h = ((r - g) / d + 4) / 6;
}
return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
}
function hslToHex(h, s, l) {
s /= 100; l /= 100;
const a = s * Math.min(l, 1 - l);
const f = n => {
const k = (n + h / 30) % 12;
return Math.round(255 * (l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1))));
};
return '#' + [f(0), f(8), f(4)].map(v => v.toString(16).padStart(2, '0')).join('');
}
const base = '#6366f1';
const [h, s, l] = hexToHsl(base);
const comp = hslToHex((h + 180) % 360, s, l);
console.log(comp); // → "#f1ee63"
package main
import (
"fmt"
"math"
)
func hexToHSL(hex string) (float64, float64, float64) {
var r, g, b uint8
fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
max := math.Max(rf, math.Max(gf, bf))
min := math.Min(rf, math.Min(gf, bf))
l := (max + min) / 2
if max == min {
return 0, 0, l * 100
}
d := max - min
s := d / (2 - max - min)
if l <= 0.5 {
s = d / (max + min)
}
var h float64
switch max {
case rf:
h = (gf - bf) / d
if gf < bf { h += 6 }
case gf:
h = (bf-rf)/d + 2
case bf:
h = (rf-gf)/d + 4
}
return h * 60, s * 100, l * 100
}
func hslToHex(h, s, l float64) string {
s /= 100; l /= 100
a := s * math.Min(l, 1-l)
f := func(n float64) uint8 {
k := math.Mod(n+h/30, 12)
return uint8(255 * (l - a*math.Max(-1, math.Min(math.Min(k-3, 9-k), 1))))
}
return fmt.Sprintf("#%02x%02x%02x", f(0), f(8), f(4))
}
func main() {
h, s, l := hexToHSL("#6366f1")
comp := hslToHex(math.Mod(h+180, 360), s, l)
fmt.Println(comp) // → #f1ee63
}
Questions fréquentes
Quelle est la différence entre complémentaire et split-complémentaire ?
Le schéma complémentaire utilise deux couleurs exactement à 180 degrés l'une de l'autre sur la roue chromatique, produisant un contraste de teinte maximal. Le split-complémentaire remplace l'opposé direct par deux couleurs à 150 et 210 degrés de la base, offrant un contraste fort avec moins de tension visuelle. Le split-complémentaire est plus facile à utiliser en design d'interface car aucune couleur d'accentuation ne s'oppose directement à la base.
Combien de couleurs doit contenir une palette d'interface ?
La plupart des systèmes de design utilisent 3 à 5 teintes principales : une primaire, une secondaire, une neutre et un ou deux accents. Chaque teinte principale dispose ensuite d'une échelle de luminosité (100 à 900). Commencez avec un schéma triadique ou tétradique pour les teintes principales, puis générez des échelles monochromatiques pour chacune.
Puis-je utiliser ces palettes avec Tailwind CSS ?
Oui. Copiez les valeurs hex et ajoutez-les à l'objet colors dans votre fichier tailwind.config.js ou tailwind.config.ts. Pour une échelle monochromatique, associez chaque nuance à une clé numérotée (50, 100, 200, etc.) pour respecter la convention de nommage de Tailwind.
Pourquoi certaines couleurs générées semblent-elles ternes ou boueuses ?
Si votre couleur de base a une faible saturation ou une luminosité extrême (très proche de 0 % ou 100 %), les teintes pivotées apparaîtront également ternes. Le générateur conserve les valeurs de saturation et de luminosité de la couleur de base. Pour des palettes vives, choisissez une base avec une saturation supérieure à 50 % et une luminosité comprise entre 30 % et 70 %.
Quelle est la différence entre HSL et HSV/HSB ?
HSL et HSV utilisent tous deux la teinte comme axe circulaire, mais ils définissent la brillance différemment. En HSL, une luminosité de 50 % correspond à la teinte pure et 100 % au blanc. En HSV (aussi appelé HSB), une valeur de 100 % correspond à la teinte pure et il n'est pas possible d'atteindre le blanc sans réduire la saturation. La plupart des générateurs de palettes utilisent HSL car son axe de luminosité correspond plus intuitivement à la façon dont nous percevons la brillance des couleurs.
Quel est le lien entre les schémas d'harmonie et l'accessibilité ?
L'harmonie colorée et le contraste WCAG sont deux préoccupations distinctes. Une paire complémentaire présente un contraste de teinte maximal, mais cela ne garantit pas un contraste de luminance suffisant pour la lisibilité du texte. Après avoir généré une palette, testez chaque paire premier plan/arrière-plan par rapport à WCAG AA (ratio de 4,5:1 pour le texte normal). Les couleurs avec une luminosité similaire échoueront, quelle que soit leur relation de teinte.
La fonction CSS hsl() est-elle identique au modèle HSL ?
Oui. La fonction CSS hsl() prend trois arguments : la teinte en degrés (0-360), la saturation en pourcentage et la luminosité en pourcentage. CSS Color Level 4 accepte également une valeur alpha séparée par une barre oblique : hsl(240 60% 50% / 0.8). Le modèle HSL utilisé par ce générateur correspond exactement à la spécification CSS, vous pouvez donc coller directement les valeurs de teinte, saturation et luminosité dans vos feuilles de style.