Aller au contenu
Toolars
Explorer
Signaler un bug

Design · utilitaire Local

Générateur de nuances de couleur

Color Shades Generator

Créez une échelle de 3 à 20 nuances autour d'une couleur de base épinglée au centre, sans atteindre le noir ou le blanc pur, et exportez les variables CSS.

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 de nuances de couleur, confidentialité et outils associés

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

Comment générer une échelle de nuances de couleur

  1. 01

    Définissez la couleur de base

    Entrez une valeur hexadécimale sous Couleur de base — #RGB, #RGBA, #RRGGBB et #RRGGBBAA fonctionnent tous, et le champ s'ouvre avec #6D5EF8. La couleur de base se trouve toujours au milieu de l'échelle terminée.

  2. 02

    Choisissez le nombre de nuances

    Réglez Nombre de nuances sur un entier de 3 à 20 — la valeur par défaut est 9. Un nombre impair équilibre les côtés plus foncés et plus clairs de façon égale autour de la base ; un nombre pair centre quand même la base et donne un échantillon supplémentaire au côté clair.

  3. 03

    Générez la gamme

    Cliquez sur Générer les nuances. La palette va des nuances profondes à travers votre couleur de base jusqu'aux teintes claires, et chaque échantillon est numéroté et étiqueté avec sa valeur hexadécimale, donc la position 1 est toujours l'étape la plus foncée.

  4. 04

    Vérifiez le comportement du mélange

    Les nuances sous la base sont mélangées vers le noir et les teintes au-dessus vers le blanc, mais le mélange ne va jamais à plus de 78 % du chemin vers l'un ou l'autre extrême. Les étapes finales restent chromatiques et utilisables au lieu de s'effondrer en quasi-noir ou quasi-blanc.

  5. 05

    Chargez l'échelle d'exemple

    Cliquez sur Charger un exemple pour générer sept nuances autour de #0EA5E9 — une exécution de référence complète que vous pouvez inspecter avant d'entrer votre propre couleur de marque. Réinitialiser restaure la base #6D5EF8 et le nombre de 9.

  6. 06

    Copiez ou téléchargez les jetons

    Cliquez sur Copier la sortie pour copier un bloc :root de propriétés personnalisées --toolars-shade-1 …, ou sur Télécharger pour l'enregistrer sous toolars-color-shades.css, prêt à coller dans une feuille de style. Chaque carte d'échantillon affiche aussi sa valeur hexadécimale pour une copie ponctuelle.

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 de nuances de couleur 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 de nuances de couleur fait vraiment

Une couleur de marque arrive comme une seule valeur hexadécimale, mais une vraie interface a besoin de toute une échelle : un état de survol plus foncé, une teinte de fond subtile, une bordure à un pas de la base. Choisir ces étapes à l'œil dérive d'un écran à l'autre et d'un membre d'équipe à l'autre. Générateur de nuances de couleur interpole la gamme de façon déterministe autour de votre couleur de base, en gardant la base épinglée au milieu et les extrêmes à distance du noir et du blanc purs. Il exporte le résultat en propriétés personnalisées CSS aux noms numérotés stables, prêtes pour un fichier de jetons de design — calculé localement, jamais téléversé.

Questions fréquentes

Combien de nuances une échelle peut-elle comporter ?
Entre 3 et 20, réglé avec le champ Nombre de nuances ; l'espace de travail utilise 9 par défaut. Un nombre hors de cette plage est rejeté avec un message qui nomme la limite.
Comment l'échelle est-elle calculée ?
De façon déterministe : les nuances sous la base sont mélangées vers le noir, les teintes au-dessus vers le blanc, et la couleur de base elle-même occupe toujours la position centrale. Le mélange est plafonné à 78 % vers l'un ou l'autre extrême, donc aucune étape n'atteint le noir ou le blanc pur et chaque arrêt reste utilisable.
Qu'est-ce qui change avec un nombre pair de nuances ?
La couleur de base occupe toujours la position centrale, mais les deux côtés ne peuvent pas se refléter exactement : un nombre pair donne au côté clair un échantillon de plus qu'au côté foncé. Choisissez un nombre impair comme 9 ou 11 pour une gamme parfaitement symétrique.
L'échelle préserve-t-elle la transparence ?
Oui. Si la couleur de base porte un octet alpha — par exemple #6D5EF8CC — le même alpha est conservé sur toute la gamme, et les valeurs hexadécimales exportées gagnent l'octet alpha dès que l'alpha de base est inférieur à 1.
Quel format l'export utilise-t-il ?
Un bloc :root de propriétés personnalisées CSS nommées --toolars-shade-1 à --toolars-shade-N contenant les valeurs hexadécimales, téléchargeable en fichier .css ou copiable dans le presse-papiers. Chaque carte d'échantillon affiche aussi sa valeur hexadécimale pour une copie directe.
La couleur est-elle envoyée quelque part ?
Non. Toute la gamme est calculée dans cet onglet du navigateur, les entrées et les résultats ne le quittent jamais, 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