Générez des teintes

Cet outil mélange la couleur hexadécimale fournie avec du blanc par paliers de pourcentage égaux et renvoie des valeurs HEX et RGB précises pour chaque teinte. Le calcul est déterministe : une même couleur et un même nombre d’étapes produisent toujours la même palette. Utilisez-la pour préparer des états d’interface, des arrière-plans, des graphiques, des illustrations ou des jetons de conception exigeant une progression nette de la couleur d’origine au blanc.

Choisissez une couleur de base et un nombre d’étapes adapté

Commencez par une couleur de base hexadécimale à trois ou six chiffres, comme #36c ou #3366cc. La forme courte est développée avant le calcul : ces deux exemples représentent donc exactement la même couleur et donnent des résultats identiques. Choisissez ensuite entre une et vingt étapes. Ce nombre correspond aux teintes générées, sans compter la couleur de base d’origine, mais en incluant le blanc pur comme dernier résultat. Quatre étapes mélangent ainsi la base avec 25%, 50%, 75% et 100% de blanc. Un petit nombre convient à une hiérarchie d’interface compacte, tandis qu’un nombre supérieur offre des choix plus fins pour la visualisation de données, l’illustration ou l’exploration de jetons. Le résultat présente séparément la base normalisée et chaque teinte calculée, afin de distinguer clairement la valeur fournie des valeurs produites. Puisque la progression se termine toujours au blanc, les échantillons adjacents ont des écarts de mélange égaux, même si leur différence visuelle dépend de la couleur de base et de l’écran.

Comprenez la formule de mélange déterministe

Chaque canal rouge, vert et bleu est mélangé séparément vers 255, la valeur de canal du blanc. Pour la teinte numéro k d’une palette de n étapes, l’outil calcule base + (255 − base) × k/n, puis arrondit le canal à l’entier le plus proche. La même proportion appliquée aux trois canaux préserve le lien avec la couleur d’origine tout en réduisant progressivement sa distance au blanc. La réponse contient un indice commençant à un, le pourcentage exact de blanc, le code HEX normalisé en minuscules, les valeurs de chaque canal et une chaîne RGB. Il s’agit d’une interpolation sRGB directe : elle ne modifie pas la luminosité HSL, n’effectue pas de mélange optique corrigé par gamma et ne recherche pas une égalisation perceptuelle. Cette distinction compte lorsque vous comparez le résultat à un logiciel graphique proposant plusieurs espaces de mélange. La formule est volontairement simple, documentée et stable, ce qui la rend adaptée aux scripts de build, instantanés, générations automatiques de jetons et systèmes où la reproductibilité prime sur le réglage visuel subjectif.

Utilisez la palette avec prudence dans un système de conception

Considérez les valeurs générées comme une échelle de départ cohérente, puis testez-les dans leur contexte réel. Les teintes claires conviennent aux lignes sélectionnées, fonds de notification, bordures discrètes, remplissages de graphiques, surfaces au survol et zones décoratives, mais une palette mathématiquement régulière ne garantit pas automatiquement un contraste accessible. Vérifiez le texte et les icônes placés sur chaque teinte selon les exigences de contraste applicables à votre produit. Conservez la couleur de base dans un jeton distinct et nommez les valeurs générées selon leur rôle ou leur pourcentage de mélange, par exemple brand-tint-25 ou info-background, plutôt que de dépendre uniquement de leur position. Les noms en pourcentage restent compréhensibles si une future palette utilise un autre nombre d’étapes. Dans un flux automatisé, stockez directement les valeurs HEX renvoyées ainsi que la couleur d’entrée et le nombre d’étapes pour pouvoir reproduire la palette. Les couleurs invalides, formats hexadécimaux alpha, nombres fractionnaires et valeurs hors limites sont refusés afin que les modifications accidentelles de jetons ne passent pas inaperçues.