Générateur de palette de couleurs
Générez des palettes à partir d'une couleur de base avec harmonies complémentaire, analogue, triadique, tétradique, carrée ou monochrome. Verrouillage, export CSS/Tailwind.
Réglages de la palette
Teinte de base + la teinte opposée (180°).
Verrouillez les couleurs qui vous plaisent ; Régénérer choisit une nouvelle couleur de base aléatoire et garde les couleurs verrouillées.
Exporter
Palette
:root {
--palette-1: #3b82f6;
--palette-2: #b07d00;
}Outils Connexes
Voir ToutQu'est-ce que Générateur de palette de couleurs ?
Construit une palette à partir d'une couleur de base grâce aux harmonies classiques de la roue chromatique. La rotation de teinte peut se faire en OKLCH perceptuel (qui garde une luminosité perçue égale) ou en HSL classique. Les couleurs peuvent être verrouillées avant de régénérer, et la palette s'exporte en variables CSS, SCSS, configuration Tailwind v3, @theme Tailwind v4 ou JSON.
Comment utiliser Générateur de palette de couleurs
- Saisissez une Couleur de base (hex, rgb(), hsl() ou oklch()) ou cliquez sur Régénérer pour en obtenir une aléatoire.
- Choisissez une Harmonie des couleurs et si la teinte est tournée en OKLCH ou en HSL.
- Verrouillez les couleurs que vous voulez garder ; Régénérer ne remplace alors que celles qui sont déverrouillées.
- Cliquez sur un échantillon pour copier sa valeur hexadécimale.
- Choisissez un Format d'export et un Nom du token, puis copiez le code.
Exemple
Base #ff0000, Triadic, HSL
:root {
--palette-1: #ff0000;
--palette-2: #00ff00;
--palette-3: #0000ff;
} Quand utiliser Générateur de palette de couleurs
Utilisez-le pour explorer des schémas de couleurs pour une marque, un thème d'interface ou une illustration. Une harmonie est un point de départ, pas un contrôle d'accessibilité : vérifiez séparément le contraste texte/fond. Pour étendre une seule couleur en une échelle 50–950, utilisez le générateur de nuances de couleurs.
Comment fonctionne Générateur de palette de couleurs
Les harmonies font tourner la teinte de base d'angles fixes en conservant la saturation/chroma et la luminosité : complémentaire 0°/180°, analogue 0°/±30°/±60°, triadique 0°/120°/240°, complémentaire divisée 0°/150°/210°, tétradique 0°/60°/180°/240°, carré 0°/90°/180°/270°. Monochrome garde la teinte et change la luminosité de −30, −15, 0, +15, +30 (% HSL) ou ±0,15/±0,3 (L OKLCH). Les couleurs OKLCH hors sRGB sont ramenées dans la gamme en réduisant la chroma. Régénérer choisit une base aléatoire avec une teinte de 0 à 360°, une saturation de 55 à 85 % et une luminosité de 45 à 60 %.
Cas d'utilisation courants
- Exploration des couleurs d'une marque à partir de la couleur d'un logo
- Couleurs d'accent pour un thème d'interface
- Couleurs de catégories pour la visualisation de données
- Export d'une palette en propriétés personnalisées CSS
- Mise en place d'un thème Tailwind
Questions Fréquentes
Faut-il tourner la teinte en OKLCH ou en HSL ?
OKLCH garde égale la luminosité perçue de toutes les couleurs, ce qui donne des palettes plus équilibrées. HSL correspond à la roue chromatique classique de nombreux outils de design, mais ses couleurs peuvent différer beaucoup en luminosité.
À quoi sert le verrouillage ?
Un échantillon verrouillé garde sa couleur quand vous changez la couleur de base, l'harmonie ou cliquez sur Régénérer.
Les palettes sont-elles accessibles ?
Les harmonies ne disent rien du contraste. Vérifiez les combinaisons texte/fond avec les ratios de contraste WCAG avant de les utiliser.