Générateur de palettes

Donnez-lui une couleur de base : il fait tourner la teinte sur le cercle chromatique pour bâtir six palettes. Touchez un échantillon pour copier son HEX, ou copiez l'accord en variables CSS.

Comment l'utiliser

  1. Fixez la couleur de base en HEX, rgb(), hsl() ou avec le sélecteur.
  2. Parcourez les six palettes : complémentaire, analogue, triadique et les autres.
  3. Touchez un échantillon pour copier le HEX, ou copiez l'accord en variables CSS.

Les palettes ne font tourner que la teinte en HSL et conservent la saturation et la clarté de votre couleur : une entrée pastel donne des palettes pastel, une entrée saturée des palettes saturées.

Le nombre sur chaque échantillon est le rapport de contraste WCAG avec le texte affiché. Le texte courant demande 4,5:1, les grands titres 3:1.

Questions fréquentes

Comment la complémentaire est-elle choisie ?

Elle se trouve à 180° sur le cercle chromatique. C'est le contraste le plus fort : parfait pour les accents, fatigant sur de grandes surfaces — environ 10 à 20 % de la surface convient.

Quelle palette choisir ?

Analogue ou monochrome pour les fonds et les cartes. Complémentaire ou complémentaire divisé pour ce qui doit ressortir : boutons, badges, alertes.

Que copie le bouton CSS ?

Une liste de propriétés personnalisées nommées d'après l'accord, comme `--triadic-1: #3366CC;`, prête à coller dans `:root`.

Ma couleur est-elle envoyée quelque part ?

Non. Toutes les conversions et palettes sont calculées dans le navigateur.

Outils similaires