Chaque système de conception que j'ai jamais expédié a commencé avec une couleur de marque unique et puis a immédiatement EU besoin d'une douzaine d'autres Un bleu n'est jamais assez Vous avez besoin d'un bleu plus clair pour un état de vol stationnaire, d'un bleu beaucoup plus clair pour un fond de rangée sélectionnée, d'un bleu plus foncé pour un texte qui se trouve sur une surface pâle, et d'un bleu sourd pour un bouton désactivé qui ne devrait pas crier Quand je construisais l'interface pour [Toolz.dev] (/, j'ai continué à ouvrir un sélecteur de couleur, à pousser le curseur de légèreté, à regarder si le résultat ressemblait toujours à la même famille et à répéter les codes hexagonaux incohérents.
Alors j'ai construit le Générateur de nuances de couleur. Vous lui donnez une couleur et cela vous donne trois échelles complètes, calculées dans l'espace colorimétrique Module de couleur CSS niveau 4 définit plutôt qu'en poussant des chiffres hexagonaux : des teintes se dirigeant vers le blanc, des nuances se dirigeant vers le noir et des tons se dirigeant vers le gris. Ce guide explique ce que signifient réellement ces trois mots, comment fonctionnent les mathématiques et comment transformer une couleur d'une seule marque en une palette cohérente que vous pouvez déposer directement dans CSS.
tl;dr : Une teinte est votre couleur mélangée avec du blanc, une teinte est votre couleur mélangée avec du noir, et un ton est votre couleur mélangée avec du gris Chacun garde la teinte originale et ne change que la lumière, l'obscurité ou la sourdine de la couleur Collez une valeur HEX, RVB ou HSL, choisissez le nombre de pas que vous voulez, et le générateur construit les trois échelles à la fois, chaque échantillon pouvant être copié comme HEX, RVB ou HSL. Tout fonctionne dans votre navigateur.
Quelle est la différence entre une teinte, une teinte et un ton ?
Ces trois mots proviennent de la théorie traditionnelle des couleurs, et ils décrivent trois façons différentes de changer une couleur sans changer de quelle couleur il s'agit fondamentalement La distinction vaut la peine de se rétablir parce que les concepteurs, et de plus en plus de jetons de conception, utilisent les mots avec précision.
Une teinte est une couleur mélangée au blanc L'ajout de blanc augmente la légèreté et adoucit la couleur Le rose est une teinte de rouge, et le bleu bébé est une teinte d'un bleu plus fort Les teintes sont ce que vous recherchez lorsque vous avez besoin de fonds pâles, de remplissages subtils et des surfaces les plus claires dans une interface.
Une teinte est une couleur mélangée au noir L'ajout de noir abaisse la légèreté et approfondit la couleur Le marron est une nuance de rouge, et le bleu marine est une nuance de bleu Les teintes vous donnent l'extrémité la plus foncée d'une gamme : couleurs de texte, états de boutons pressés et bordures qui nécessitent plus de poids que la base.
Un ton est une couleur mélangée avec du gris L'ajout de gris réduit la couleur' ; s l'intensité sans la rendre dramatiquement plus claire ou plus foncée Les tons sont les plus sous-utilisés des trois, et ils sont le secret derrière des palettes qui semblent sophistiquées plutôt que criardes Une couleur atténuée se lit comme plus calme et plus professionnelle, c'est pourquoi les palettes assourdies dominent la conception sérieuse de produits.
L'important que tous les trois partagent est qu'ils préservent la teinte Une teinte de bleu est toujours bleue, une nuance de bleu est toujours bleue, et un ton de bleu est toujours bleu C'est ce qui fait qu'un ensemble de teintes, de nuances et de tons ressemble à une seule famille plutôt qu'à un assortiment aléatoire.
Comment chaque échelle est-elle réellement calculée ?
Sous le capot, chaque swatch est un mélange en ligne droite entre deux couleurs dans l'espace RVB Le générateur prend votre couleur de base comme un triple rouge, vert et bleu, et il prend une couleur cible, puis il marche de l'une à l'autre par pas pairs Pour les teintes la cible est blanche, qui est (255, 255, 255). Pour les nuances, la cible est noire, (0, 0, 0). Pour les tons, la cible est gris moyen, (128, 128, 128).
Le mixage pour n’importe quel canal est une arithmétique simple. Pour obtenir un swatch qui représente trente pour cent du chemin entre la base et la cible, vous calculez base + (target - base) * 0.30 pour le canal rouge, puis le canal vert, puis le canal bleu, et rond à des nombres entiers Une échelle de teinte en dix étapes exécute ce calcul à dix pour cent, vingt pour cent, et ainsi de suite jusqu'à cent pour cent, où la couleur est devenue blanc pur La couleur de base elle-même est incluse comme l'échange zéro pour cent au sommet de chaque échelle, de sorte que vous pouvez toujours voir où vous avez commencé.
Parce que le mélange se produit par canal en RVB, la teinte reste essentiellement fixe pour les teintes et les nuances Le mélange vers le blanc pur ou le noir pur change la quantité de lumière que la couleur reflète mais pas son caractère sous-jacent, donc une teinte et une nuance de la même base lues comme la même couleur à une luminosité différente Les tons peuvent déplacer la teinte perçue d'un cheveu, car le gris se trouve au centre neutre et tirer vers lui désature légèrement chaque canal, mais en pratique, toute l'échelle se lit toujours comme une seule couleur Si vous voulez inspecter exactement comment un échantillon donné atterrit à travers les formats, le Convertisseur de couleurs vous montrera côte à côte ses valeurs HEX, RVB, HSL et HWB.
Pourquoi ne pas simplement changer la légèreté en HSL ?
Une question raisonnable est de savoir pourquoi l'outil se mélange en RVB plutôt que de simplement augmenter ou abaisser le L valeur en HSL. Les deux approches produisent une échelle monochromatique, et les deux sont valides Le mélange vers le blanc et le noir en RVB est le modèle classique de teintes et de nuances painter' ; s, et il correspond proprement aux mots que les concepteurs utilisent déjà Il garde également les points finaux honnêtes : une teinte à cent pour cent est exactement blanche et une teinte à cent pour cent est exactement noire, ce qui n'est pas toujours vrai quand vous ne manipulez que la légèreté HSL à cause de la façon dont la saturation interagit avec elle Le générateur vous donne des tons comme une troisième échelle spécifiquement pour couvrir le " ; intense " ; axe qu'un changement de pure légèreté ne s'adresse pas.
Combien d'étapes dois-je générer ?
Le générateur vous permet de choisir entre deux et vingt pas par échelle, et le bon numéro dépend de ce que vous construisez. Pour un système de conception où vous souhaitez une rampe nommée comme blue-50 par blue-900[traduction], un nombre de pas plus important vous donne un gradient fin que vous pouvez échantillonner Pour une paire rapide d'états de vol stationnaire et d'états actifs, trois ou quatre pas sont nombreux Ma valeur par défaut est dix, car dix teintes, dix nuances et dix tons d'une base me donne une palette de travail complète sans un mur écrasant d'écouvillons.
Plus de pas signifient des sauts plus petits entre les couleurs adjacentes, ce que vous voulez quand les nuances voisines doivent être visuellement distinctes mais proches, comme les bandes alternées d'une table de données Moins de pas signifient des sauts plus audacieux, ce qui convient à une palette compacte où chaque couleur a un travail clairement différent Il n'y a pas de mauvaise réponse, et parce que l'outil recalcule instantanément vous pouvez faire glisser le nombre de pas de haut en bas jusqu'à ce que l'espacement semble correct.
En quoi les teintes diffèrent-elles de l’abaissement de l’opacité ?
Un piège dans lequel je suis tombé tôt était d'utiliser l'opacité pour simuler une teinte Cela semble équivalent : laisser tomber un bouton bleu à cinquante pour cent d'opacité sur une page blanche et cela ressemble à un bleu plus clair Le problème est que l'opacité n'est pas une couleur, c'est une instruction de composition, et cela dépend entièrement de tout ce qui se trouve derrière l'élément Ce même bleu à cinquante pour cent sur une surface sombre devient un bleu foncé boueux, et sur une photo, cela devient imprévisible Votre " ; bleu clair" ; change d'identité en fonction de son arrière-plan, ce qui est le contraire de ce dont un système de conception a besoin.
Une teinte résout cela en faisant cuire la légèreté dans une couleur réelle et opaque L'échantillon que le générateur vous donne est une valeur hexagonale fixe qui ressemble peu importe ce qu'elle est derrière, car elle est entièrement opaque Lorsque vous avez besoin d'une version plus claire cohérente d'une couleur qui se comporte de manière prévisible sur chaque surface de votre produit, utilisez une teinte plutôt qu'une transparence Réservez l'opacité pour les effets de transparence authentiques, comme les superpositions et les canevas, où vous voulez en fait que l'arrière-plan se manifeste. Garder ces deux idées séparées est l'une des habitudes silencieuses qui font qu'une palette semble solide plutôt qu'accidentelle.
Comment transformer ces échelles en une palette utilisable ?
Une palette n'est pas qu'un tas de couleurs, c'est un ensemble d'affectations Voici le workflow que j'utilise lorsque je pars d'une couleur de marque unique Prenez la base comme couleur d'action principale, celle de vos boutons et liens principaux Atteignez les teintes pour les arrière-plans : une teinte très légère pour les surfaces de pages ou de cartes, une teinte légèrement plus forte pour l'état de vol stationnaire d'un élément lumineux Atteignez les nuances pour le texte et l'accentuation : une teinte profonde pour la copie corporelle qui a besoin de contraste contre une teinte pâle, une teinte moyenne pour l'état enfoncé de votre bouton principal Utilisez un ton lorsque vous avez besoin de la couleur présente mais calme, comme un contrôle handicapé ou un badge secondaire.
La seule règle que vous ne pouvez pas sauter est le contraste Une teinte qui semble belle comme un fond de bouton est inutile si le texte de l'étiquette sur elle ne répond pas aux exigences de contraste d'accessibilité Une fois que vous avez choisi les paires de couleurs qui vont se placer les uns sur les autres, les faire passer à travers le Vérificateur de contraste de couleurs pour confirmer qu'ils effacent les seuils WCAG. cueillir de belles nuances est la partie facile S'assurer que le texte dessus est lisible est la partie qui sépare une vraie palette d'un mood board.
Le tableau ci-dessous montre comment je mappe généralement une échelle en dix étapes sur les rôles d'interface.
| Source d'échange | Rôle typique | Exemple d'utilisation |
|---|---|---|
| Teintes les plus légères | Surfaces et arrière-plans | Fond de la page, remplissage de la carte, ligne sélectionnée |
| Teintes claires | États de survol sur les éléments lumineux | Survol de bouton, survol d'élément de liste |
| Couleur de base | Action primaire | Bouton principal, lien actif, accent de marque |
| Nuances moyennes | États pressés et actifs | Bouton actif, frontière focalisée |
| Nuances sombres | Texte et haute emphase | Texte du corps sur les surfaces claires, titres |
| Tons | Éléments secondaires atténués | Contrôles handicapés, badges secondaires |
Comment cela s'adapte-t-il aux autres outils couleur ?
Le générateur de nuances est un instrument dans un petit orchestre Il répond à la question " ; donnez-moi plus de cette seule couleur," ; mais le vrai travail de palette touche aussi quelques questions adjacentes Quand vous avez besoin de couleurs harmonieuses qui ne sont pas de la même teinte, comme un ensemble complémentaire ou analogue, le Générateur de palettes de couleurs construit ces relations Lorsque vous échantillonnez une couleur de départ à partir d'une image ou d'un design et que vous devez lire sa valeur exacte, le cueillette de couleurs vous obtient le code hexadécimal Et lorsque vos nuances sont destinées à un fond CSS qui s'efface de l'une à l'autre, le Générateur de gradient transforme deux d'entre eux en prêt-à-pâter linear-gradient.
Le pipeline naturel ressemble à ceci : choisissez ou collez une couleur de base, générez ses teintes, nuances et tonalités, vérifiez les paires que vous prévoyez d'empiler par rapport au vérificateur de contraste et copiez les gagnants dans votre feuille de style ou vos jetons de conception. Chacun de ces outils fonctionne entièrement dans le navigateur, donc une couleur de marque que vous n'avez pas annoncée ne se déplace jamais vers qui que ce soit. Le serveur n°39 ; Si l'outillage local est une valeur que vous partagez, la pièce est activée Protection des données et outils en ligne explique pourquoi je construis tout de cette façon, et le Boîte à outils pour les développeurs Web collecte le reste des utilitaires qui vivent dans mon flux de travail quotidien.
Un exemple qui a fonctionné rapidement
Commencez par la marque bleu #4466EE. Réglez le nombre de pas à dix et laissez le format de copie sur HEX. Le générateur renvoie trois colonnes.
La colonne des teintes commence à #4466EE et monte vers le blanc, en passant par des bleus de plus en plus pâles jusqu'à ce que l'échantillon final soit #FFFFFF. Quelque part au milieu, vous obtenez une pervenche douce qui constitue un excellent fond de rangée sélectionnée. La colonne des nuances commence de la même manière #4466EE et descend vers le noir, vous donnant des indigos profonds adaptés au texte et aux états enfoncés, se terminant par #000000. La colonne des tons commence à #4466EE et se dirige vers le gris, produisant des bleus d'ardoise sourds qui se lisent comme calmes et discrets, se terminant par #808080.
À partir de cette entrée, vous avez maintenant un arrière-plan (une teinte claire), un remplissage en vol stationnaire (une teinte légèrement plus foncée), une couleur primaire (la base), une couleur de texte (une teinte foncée) et une couleur désactivée (une tonalité). Cliquez sur n'importe quel échantillon pour le copier, passez le format de copie en RVB ou HSL si votre projet préfère ceux-ci, et collez. Ce qui était autrefois vingt voyages vers un sélecteur de couleurs est maintenant une pâte et une poignée de clics, et comme le calcul est déterministe, la palette est cohérente à chaque fois.
Questions fréquentes
Quelle est la différence entre une teinte, une teinte et un ton ?
Une teinte est une couleur mélangée au blanc, ce qui la rend plus claire Une teinte est une couleur mélangée au noir, ce qui la rend plus foncée Un ton est une couleur mélangée au gris, qui la coupe sans changer si elle est claire ou foncée Tous les trois gardent la teinte originale et ne changent que la façon dont la couleur apparaît claire, sombre ou saturée.
Comment générer des nuances d'une couleur ?
Entrez votre couleur de base, puis lisez la colonne des nuances, qui mélange la couleur avec des quantités croissantes de noir Chaque ligne est une version plus sombre de l'original à un pas pair, et vous pouvez copier n'importe lequel d'entre eux comme HEX, RVB ou HSL. Augmentez le nombre de pas pour une plage plus lisse de valeurs sombres.
Comment sont calculées les couleurs plus claires et plus foncées ?
Chaque gamme est un mélange linéaire de la couleur de base vers une cible Les teintes se mélangent vers le blanc (255, 255, 255), les nuances se mélangent vers le noir (0, 0, 0) et les tons se mélangent vers le gris moyen (128, 128, 128).Une teinte de 30 %, par exemple, déplace chaque canal rouge, vert et bleu de 30 % du chemin de la base vers le blanc.
Quels formats de couleurs puis-je coller ?
Vous pouvez saisir un code HEX (3 ou 6 chiffres, avec ou sans hachage principal), une valeur rgb (), une valeur hsl () ou un nom de couleur CSS commun tel que cramoisi ou bleu acier L'outil convertit votre entrée en RVB en interne et signale chaque swatch en HEX, RVB et HSL.
Combien de nuances puis-je générer ?
Vous pouvez définir entre 2 et 20 pas par échelle Chaque échelle inclut également la couleur de base d'origine, donc un paramètre de 10 pas vous donne la base plus dix teintes, dix nuances et dix tons Moins de pas donnent des sauts audacieux entre les valeurs, tandis que plus de pas donnent un gradient fin.
Puis-je construire une palette monochromatique avec cet outil ?
Oui. Une palette monochromatique utilise une teinte à différents niveaux de légèreté et de saturation, ce qui est exactement ce que produisent les teintes, les nuances et les tons Choisissez une couleur de marque de base et utilisez ses teintes pour les arrière-plans, la base pour les éléments primaires et ses nuances pour le texte ou les états de vol stationnaire.
Les couleurs générées gardent-elles la même teinte ?
Les teintes et les nuances gardent la teinte presque exactement, car le mélange avec du blanc pur ou du noir change la légèreté plutôt que la teinte. Les tons peuvent changer très légèrement car le gris se trouve au centre de l'espace colorimétrique, mais pour les travaux de conception pratiques, toute la gamme se lit comme une seule famille de la même couleur.
Le générateur de nuances de couleurs est-il gratuit et privé ?
Oui. Il est entièrement gratuit sans inscription ni limite. Toutes les analyses et mathématiques des couleurs s'exécutent dans votre navigateur à l'aide de JavaScript côté client, de sorte que les couleurs que vous saisissez ne quittent jamais votre appareil et que l'outil continue de fonctionner hors ligne une fois la page chargée.
