HedgieTools

Générateur de palette

Partez de votre couleur principale et obtenez une palette d’interface complète : secondaire, tertiaire, succès, avertissement, danger et neutres, avec leurs nuances et la vérification des contrastes.

Votre couleur principale

Saisissez une valeur ou choisissez une couleur : le reste de la palette se construit autour.

Secondaire et tertiaire
Format de la valeur

Saisissez une valeur HEX, par exemple #2563EB, ou cliquez sur le carré pour choisir la couleur.

Votre palette

Cliquez sur une valeur ou une nuance (50 à 950) pour la copier. Le crayon remplace une couleur suggérée par la vôtre : elle reste fixe quand vous changez la couleur principale.

  • —

    Primaire

    votre couleur
  • —

    Secondaire

    complémentaire
  • —

    Tertiaire

    presque complémentaire
  • —

    Info

    bleu
  • —

    Succès

    vert
  • —

    Attention

    orange
  • —

    Danger

    rouge
  • —

    Neutre

    gris teinté

Tokens clair et sombre

Les couleurs d’usage de votre interface, prêtes pour le thème clair et le thème sombre. Chacune renvoie à une nuance de la palette. Cliquez pour copier.

  • --backgroundFond de page
  • --surfaceCartes et panneaux
  • --surface-mutedZones secondaires
  • --borderBordures et séparateurs
  • --textTexte principal
  • --text-mutedTexte secondaire
  • --primaryBoutons et liens
  • --primary-hoverÉtat au survol
  • --on-primaryTexte sur primaire
  • --focus-ringContour de focus
  • --secondaryAccent secondaire
  • --tertiaryAccent tertiaire
  • --infoInformations
  • --info-softFond d’information
  • --successSuccès
  • --success-softFond de succès
  • --warningAttention
  • --warning-softFond d’avertissement
  • --dangerDanger, erreur
  • --danger-softFond d’erreur

Couleurs assorties

Les harmonies classiques autour de votre couleur principale, pour des illustrations, des graphiques ou des accents.

  • Complémentaire

    la couleur opposée

  • Complémentaire divisée

    plus douce que l’opposée

  • Analogue

    les couleurs voisines

  • Triade

    trois couleurs équilibrées

  • Tétrade

    quatre couleurs en carré

  • Monochrome

    une teinte, plusieurs intensités

Aperçu et contraste

La palette appliquée à quelques éléments d’interface, et la lisibilité de chaque association selon les règles WCAG.

Thème de l’aperçu
Titre de la pageTexte secondaire, moins important, sous le titre.
Une carte avec un lien et des boutons.
PrimaireSecondaireTertiaire
Info · Une mise à jour est disponible.
Succès · Vos modifications sont enregistrées.
Attention · Votre abonnement expire bientôt.
Erreur · Le paiement a échoué.
  • Texte sur le fond
    Ratio—Texte normal—Grand texte—AAA—
  • Texte secondaire sur le fond
    Ratio—Texte normal—Grand texte—AAA—
  • Lien sur le fond
    Ratio—Texte normal—Grand texte—AAA—
  • Bouton principal
    Ratio—Texte normal—Grand texte—AAA—
  • Bouton secondaire
    Ratio—Texte normal—Grand texte—AAA—
  • Texte tertiaire sur le fond
    Ratio—Texte normal—Grand texte—AAA—
  • Alerte d’information
    Ratio—Texte normal—Grand texte—AAA—
  • Alerte de succès
    Ratio—Texte normal—Grand texte—AAA—
  • Alerte d’avertissement
    Ratio—Texte normal—Grand texte—AAA—
  • Alerte de danger
    Ratio—Texte normal—Grand texte—AAA—

Exporter

Récupérez la palette dans le format choisi plus haut (HEX).

Saisissez une couleur principale pour générer le code.

Variables CSS de la palette (--color-primary-500…). Les tokens renvoient à ces variables ; activez le thème sombre avec data-theme="dark" sur l’élément html.

À propos du générateur de palettes

Choisissez la couleur principale de votre marque et obtenez tout ce dont une interface a besoin autour d’elle : couleurs d’accompagnement, couleurs d’état, tons neutres, nuances, tokens des thèmes clair et sombre, vérification des contrastes et code à coller, le tout sans quitter votre navigateur.

Une palette complète à partir d’une seule couleur

L’outil tire de votre couleur principale une couleur secondaire et une couleur tertiaire, des couleurs d’état (info, succès, avertissement, danger) assorties à son style, et des gris légèrement teintés pour les fonds et le texte.

Des nuances prêtes à l’emploi

Chaque couleur se décline en onze nuances, de la plus claire (50) à la plus foncée (950), pour les fonds, les bordures, les états de survol et le texte. Si une couleur proposée ne vous convient pas, remplacez-la par la vôtre : ses nuances s’ajustent en conséquence.

Tokens clair et sombre

Fond, surface, bordure, texte, survol, focus et fonds d’alerte : chaque couleur d’usage renvoie à une nuance de la palette, avec une valeur pour le thème clair et une pour le thème sombre.

Des contrastes vérifiés

Chaque association de texte et de fond est évaluée selon les règles WCAG : 4,5:1 pour le texte normal, 3:1 pour le grand texte et 7:1 pour le niveau AAA.

Export en CSS, Tailwind et JSON

Copiez chaque valeur en HEX, RGB, HSL ou OKLCH, ou téléchargez un fichier de variables CSS, un thème Tailwind v4, une configuration Tailwind v3, du JSON ou une simple liste. Tout se passe dans votre navigateur : rien n’est envoyé ni enregistré.

Outils liés