ZenovayTools

Générateur de Palette de Couleurs

Générez des palettes de couleurs harmonieuses à partir d'une couleur de base. Créez des schémas complémentaires, analogues, triadiques, tétradiques et monochromatiques avec codes hex/RGB/HSL.

Color harmony

Generated Palette

Base

hsl(217, 91%, 60%)

#3C83F6

Complement

hsl(37, 91%, 60%)

#F6AF3C

CSS Variables

:root {
  --color-1: #3C83F6;
  --color-2: #F6AF3C;
}

Comment utiliser Générateur de Palette de Couleurs

  1. 1Entrez une couleur de base à l'aide du sélecteur de couleurs ou de l'entrée hex.
  2. 2Choisissez un type d'harmonie : complémentaire, analogue, triadique, etc.
  3. 3Consultez la palette générée avec tous les codes de couleurs.
  4. 4Copiez les couleurs individuelles ou les variables de palette complète.
ZenovayAnalytics

Transformez votre trafic en clients.

  • Suivi des visiteurs en temps réel
  • Vie privée d'abord, sans bandeau cookies
  • Installé en deux minutes
Découvrir Zenovay

Outils connexes

Générateur de gradient CSS
Créez de beaux gradients CSS avec un éditeur visuel. Gradients linéaires, radiaux et coniques.
Générateur d'Ombre de Boîte CSS
Concevez des ombres de boîte CSS avec des contrôles visuels. Ajustez le décalage, le flou, l'étalement et la couleur.
Générateur de Rayon de Bordure CSS
Créez des valeurs de rayon de bordure personnalisées avec des contrôles visuels. Liez ou dissociez les coins pour un ajustement rapide.
Zone de jeu CSS Flexbox
Apprenez et générez des mises en page CSS Flexbox visuellement. Ajustez la direction, l'alignement, l'enveloppe et l'écart en temps réel.

Questions fréquemment posées

Qu'est-ce que l'harmonie des couleurs ?▾
L'harmonie des couleurs est la combinaison esthétiquement agréable de couleurs basée sur leurs positions sur la roue chromatique. Les principaux types d'harmonie : Complémentaire (couleurs opposées, fort contraste — ex. bleu + orange), Analogue (couleurs adjacentes, harmonieuses — ex. bleu, bleu-vert, vert), Triadique (3 couleurs également espacées à 120° — ex. rouge, jaune, bleu), Tétradique/Carré (4 couleurs à 90° d'intervalle), Complémentaire divisée (base + deux couleurs adjacentes à son complément). Monochromatique utilise des teintes et des nuances d'une seule teinte.
Comment fonctionnent les couleurs complémentaires ?▾
Les couleurs complémentaires sont directement opposées sur la roue chromatique (à 180°). Exemples : rouge + vert, bleu + orange, jaune + violet. Placées côte à côte, elles créent un contraste et une vibration maximaux — chacune fait paraître l'autre plus vive. Trop de paires complémentaires est accablant ; utilisez l'une comme dominante (70%) et l'autre comme accent (30%). Les couleurs analogues (à 15-30°) sont plus faciles à combiner mais moins dynamiques.
Quelle est la règle des couleurs 60-30-10 ?▾
La règle 60-30-10 est un principe de design pour une utilisation équilibrée des couleurs : 60% couleur dominante (généralement neutre ou couleur de marque), 30% couleur secondaire (complément de la dominante), 10% couleur d'accent (pour l'emphase, les appels à l'action, les surlignages). Cela crée une hiérarchie visuelle et empêche qu'une seule couleur submerge le design. Exemple : 60% blanc, 30% bleu marine, 10% orange vif. Le rapport garantit que l'œil se déplace naturellement dans la composition.
Que sont les teintes, nuances et tons ?▾
Teinte : une couleur mélangée avec du blanc — augmente la luminosité. Nuance : une couleur mélangée avec du noir — diminue la luminosité. Ton : une couleur mélangée avec du gris — réduit la saturation. En HSL : les teintes augmentent L vers 100%, les nuances diminuent L vers 0%, les tons diminuent S vers 0%. Les systèmes de design (Tailwind, Material, Radix) utilisent une échelle de 10 teintes/nuances (50-950) pour chaque couleur de base. Cela crée un poids visuel cohérent dans les éléments d'interface.
Comment choisir des couleurs pour l'accessibilité ?▾
WCAG 2.1 exige un ratio de contraste d'au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte (18pt/14pt gras) sur son arrière-plan. Ratio de contraste = (L1 + 0,05) / (L2 + 0,05) où L est la luminance relative. Outils : vérifiez chaque paire de couleurs. Considération du mode sombre : une couleur lisible sur blanc peut ne pas l'être sur noir — testez toujours les deux. Évitez de vous fier uniquement à la couleur pour la signification (rouge=erreur, vert=succès) — utilisez également des icônes ou des étiquettes textuelles.