Aller au contenu
Toolars
Explorer
Signaler un bug

Design · utilitaire Local

Générateur d'harmonies de couleurs

Color Harmony Builder

Générez cinq couleurs autour d'une base selon six règles d'harmonie, contraste WCAG mesuré par échantillon, exports CSS et JSON — moteur déterministe, sans IA.

Parcours de la tâche / de l'entrée au résultat

Définissez la couleur de base

S'exécute en local · Rien n'est téléversé

Fonctionnement de Générateur d'harmonies de couleurs, confidentialité et outils associés

Parcours de la tâche / de l'entrée au résultat

Comment construire une harmonie de cinq couleurs

  1. 01

    Définissez la couleur de base

    Saisissez une valeur hexadécimale à six chiffres dans HEX de base — le préfixe # est optionnel — ou choisissez la couleur visuellement avec le Sélecteur de base. Les deux champs restent synchronisés, et l'espace de travail s'ouvre avec la base #5D4DF1.

  2. 02

    Choisissez la règle d'harmonie

    Choisissez Analogue, Complémentaire, Complémentaire divisée, Triadique, Tétradique ou Monochrome. Le moteur applique des décalages de teinte fixes puis fixe l'échantillon central sur la couleur de départ exacte ; les autres n'atteignent pas forcément les angles théoriques. Monochrome conserve la teinte, mais fait varier saturation et luminosité.

  3. 03

    Définissez l'objectif de contraste

    Choisissez un Objectif de contraste du texte : 3:1 pour le grand texte, 4.5:1 pour le corps de texte AA, ou 7:1 pour le corps de texte AAA — la valeur par défaut est 4.5:1. Chaque échantillon est mesuré contre le noir ou le blanc, selon ce qui s'y lit le mieux.

  4. 04

    Générez la palette

    Cliquez sur Générer la palette. Cinq échantillons apparaissent, et celui du milieu est toujours votre couleur de base exacte — les quatre autres décalent teinte, saturation et luminosité autour d'elle dans des plages bornées, donc la gamme reste utilisable au lieu de dériver vers le fluo ou la boue.

  5. 05

    Lisez les badges de contraste

    Chaque échantillon affiche sa valeur hexadécimale, son ratio de contraste et un badge Réussi ou Sous l'objectif, avec le texte de l'échantillon rendu en noir ou en blanc — la couleur qui a gagné la comparaison de contraste. Un badge Sous l'objectif signifie de choisir un voisin plus foncé ou plus clair pour le texte, pas que la couleur est cassée.

  6. 06

    Copiez le CSS ou téléchargez le JSON

    Copier le CSS copie un bloc :root commenté avec les propriétés personnalisées --palette-1 à --palette-5. Télécharger le JSON enregistre toolars-palette.json, qui consigne la base, l'harmonie, l'objectif de contraste et les données de contraste de chaque couleur aux côtés de champs aiModel et api explicitement définis sur null.

Fiche de l'outil

Traitement
Dans votre navigateur
L'entrée quitte cet appareil
Jamais
Conservation
Rien n'est stocké
Prix
Gratuit

Vos données restent dans le navigateur.

Générateur d'harmonies de couleurs utilise son chemin d'exécution local vérifié et ne crée aucun historique caché des entrées ou sorties.

Exécution locale

S'exécute dans l'onglet actuel du navigateur.

Aucun traitement caché

Les données actives de l'outil ne deviennent jamais un enregistrement de document Toolars.

Aucun compte requis

Utilisez le workflow principal sans créer de profil. Les favoris se synchronisent avec votre compte après connexion.

Réinitialisation immédiate

Effacez l'onglet et les données de travail actives disparaissent.

Ce que Générateur d'harmonies de couleurs fait vraiment

Un projet parallèle a besoin d'une palette qui semble délibérée plutôt qu'aléatoire : une couleur primaire, ses tons de soutien, et la preuve que le texte reste lisible sur chacun. Choisir des harmonies à l'œil dérive à chaque révision, donc Constructeur d'harmonies de couleurs applique une règle fixe à votre base et affiche le calcul de contraste à côté de chaque échantillon. Le moteur est déterministe — la même base et la même règle renvoient toujours les mêmes cinq couleurs — donc un coéquipier peut reproduire la palette à l'identique. Toute l'exécution fonctionne sans réseau, et les exports entrent directement dans une feuille de style ou un fichier de jetons de design.

Questions fréquentes

La palette est-elle générée par IA ?
Non, et l'espace de travail l'indique au-dessus des contrôles : c'est un moteur d'harmonie local déterministe, sans modèle d'IA ni API. La même base et la même règle produisent toujours les mêmes cinq couleurs, donc le résultat est reproductible dans une revue de design.
Quelles valeurs de base sont acceptées ?
Une couleur hexadécimale à six chiffres comme #5D4DF1, avec ou sans le # initial. Le raccourci à trois chiffres et les autres notations sont rejetés avec un message qui nomme le format attendu, et le sélecteur de couleur produit toujours une base valide.
Pourquoi l'échantillon du milieu correspond-il exactement à ma base ?
Par conception : la troisième position de la gamme est épinglée à la valeur de base pour que la palette reste ancrée à la couleur que vous avez choisie. Les deux échantillons de chaque côté en dérivent — la règle d'harmonie déplace la teinte, tandis que la luminosité progresse vers l'extérieur et que la saturation s'atténue vers les bords.
Comment le badge de contraste est-il calculé ?
Le ratio de contraste de chaque échantillon est calculé à partir de la luminance relative contre le noir et contre le blanc, et le meilleur des deux est affiché à côté de la valeur hexadécimale. L'échantillon réussit quand ce ratio atteint votre objectif choisi de 3:1, 4.5:1 ou 7:1.
Que contiennent exactement les deux exports ?
Copier le CSS donne un bloc :root avec --palette-1 à --palette-5 sous un commentaire nommant l'harmonie et la base. Le téléchargement JSON consigne le nom du moteur, les champs aiModel et api définis sur null, votre base, l'harmonie et l'objectif de contraste, ainsi que chaque couleur avec son hexadécimal, sa couleur de texte gagnante, son ratio de contraste et son indicateur de réussite. Le CSS exporte aussi --palette-N-text pour chaque échantillon ; le JSON conserve le ratio de contraste non arrondi.
Quelque chose quitte-t-il mon navigateur ?
Non. Le panneau est explicitement marqué Sans réseau : la base, les couleurs générées et les exports restent dans cet onglet, et aucun compte n'est requis.

Poursuivre la lecture

Continuer dans Design

Des tâches associées, pas une impasse.

Passez à un autre espace de travail ciblé sans revenir à l'index complet.

Générateur d'animations de chargement CSS

CSS Loader Generator

Réglez un anneau orbital ou trois points rebondissants — cadre, trait, vitesse et couleurs — et copiez le CSS animé avec bloc prefers-reduced-motion inclus.

Créer

Générateur de cases à cocher CSS

CSS Checkbox Generator

Stylez une case à cocher native : taille, bordure et couleurs d'état réglables, avec états :focus-visible et :disabled dans le CSS exporté, sans JavaScript.

Créer

Générateur d'interrupteurs CSS

CSS Switch Generator

Concevez un interrupteur en pur CSS — piste, curseur et course calculés — avec focus clavier et mouvement réduit gérés dans le code copié, sans JavaScript.

Créer

Générateur de clip-path CSS

CSS Clip Path Generator

Modifiez les sommets par glissement, au clavier ou par coordonnées. Quatre formes de départ, copie locale de clip-path ou du CSS complet.

Créer