Choisir une couleur pour un bouton est une chose. Trouver le bon fond, un texte lisible et des nuances cohérentes pour tout un site en est une autre. Huetone aborde ce travail comme un système de couleurs, plutôt que comme une collection de coups de cœur.
Son auteur présente l’application comme un outil pour créer des systèmes de couleurs accessibles avec des rapports de contraste prévisibles. Elle propose des réglages de couleur et des exports utiles pour passer de la palette au projet web.
Une palette plutôt qu’une couleur isolée
Pour un site, une couleur principale ne suffit généralement pas. Vous avez aussi besoin de fonds discrets, de textes lisibles, de bordures et de boutons qui se distinguent. Une palette organisée permet de choisir ces variantes sans improviser une nouvelle couleur à chaque composant.
Huetone présente les couleurs sous forme de nuances et propose des graphiques pour les ajuster. Le code prévoit également des palettes prédéfinies. Pour un graphiste, cela peut servir à décliner une identité visuelle ; pour un développeur ou un créateur de sites, à préparer les couleurs réutilisables d’une interface.
Trois réglages pour comprendre ce que vous changez
L’interface repose notamment sur trois dimensions : la luminosité, le chroma et la teinte. La luminosité fait évoluer une couleur du sombre vers le clair. Le chroma décrit son intensité colorée. La teinte correspond à sa famille, par exemple un bleu, un vert ou un orange.
Les graphiques permettent de travailler sur les nuances d’une même famille, mais aussi de comparer un même niveau entre plusieurs familles. Vous pouvez ainsi examiner la progression de vos bleus, puis regarder comment ce niveau se situe parmi les autres couleurs.
Le code initialise la palette dans l’espace colorimétrique OKLCH. Retenez surtout que ces réglages séparent plusieurs aspects de la couleur, plutôt que de vous faire déplacer une valeur au hasard.
Un premier parcours avec un fond, un texte et un bouton
Commencez par un cas simple : une page avec un fond clair, un texte principal sombre et un bouton coloré. Choisissez une palette prédéfinie comme point de départ, puis repérez quelques nuances correspondant à ces trois usages. Pas besoin de préparer trente variantes avant d’avoir un premier écran.
Ajustez d’abord la luminosité pour différencier les surfaces et les éléments importants. Travaillez ensuite l’intensité et la teinte pour retrouver le caractère de votre projet. Modifier une dimension à la fois aide à comprendre ce qui améliore réellement votre palette.
Placez enfin ces couleurs dans votre maquette ou votre page. Examinez le texte sur le fond, puis le libellé du bouton sur sa couleur de remplissage. Vérifiez ces associations avec un contrôle de contraste adapté à vos exigences : un joli bleu ne reçoit pas automatiquement son diplôme de lisibilité.
Exporter les couleurs et garder une copie
Le code source atteste deux commandes de copie : l’une produit des variables CSS, l’autre des tokens au format JSON. Les tokens sont des valeurs de design structurées que vous pouvez reprendre dans votre projet. Leur utilisation dépend ensuite de votre organisation et de vos outils.
Un champ JSON représente également la palette avec des valeurs hexadécimales. Il permet de modifier ou de réintroduire une palette dans le format attendu par Huetone. Ce n’est pas une garantie de compatibilité avec tous les formats d’autres applications.
Les palettes personnelles sont conservées dans le stockage local du navigateur. Gardez donc un export avant de changer d’ordinateur ou d’effacer les données du site : ce stockage ne remplace pas une sauvegarde indépendante.
Le contraste aide, mais ne valide pas tout
Le contraste concerne une association de couleurs, pas une nuance prise seule. Un gris peut convenir sur un fond blanc et devenir difficile à lire sur une autre surface. Le passage à l’interface réelle reste donc une étape essentielle.
Le README cite l’APCA, un algorithme de contraste perceptuel, et le présente comme un travail encore en cours pour WCAG 3. Cette référence ne doit pas être interprétée comme une norme WCAG déjà en vigueur ni comme une validation automatique de votre site.
Huetone se concentre sur le système de couleurs. Il ne peut pas, à lui seul, garantir l’accessibilité complète d’une interface, qui dépend aussi de sa structure, de ses interactions et de la manière dont l’information est présentée.
Une application web et un projet open source
Le dépôt du projet renvoie vers une application web et publie le code sous licence MIT. Pour découvrir Huetone, la version en ligne est le point d’entrée indiqué par son auteur.
Un démarrage local est également documenté : installer Yarn, récupérer le dépôt, installer les dépendances, puis lancer le serveur de développement selon les étapes du README. Cette voie concerne surtout les développeurs qui souhaitent examiner ou adapter le projet. Elle n’est pas nécessaire pour comprendre la logique des palettes.
L’avis du Dindon
Le Dindon trouve Huetone pertinent pour les graphistes et développeurs qui doivent transformer une couleur de marque en palette utilisable. Ses réglages séparés et ses exports CSS ou JSON créent un lien concret entre les choix visuels et l’intégration. Pour débuter, je conseille de travailler sur un seul écran avec peu de couleurs, plutôt que de construire immédiatement un système immense. Deux précautions restent importantes : exporter vos palettes, puisqu’elles sont conservées dans le navigateur, et vérifier les associations dans leur contexte. L’outil prépare les couleurs ; il ne certifie pas l’accessibilité du site.
Sources consultées le 13/10/2026 : GitHub – ardov/huetone: A tool to create accessible color systems · GitHub · Huetone — exports et code source.
La discussion