Générateur de nuances et de palettes

Comment ça marche

Écrivez une seule couleur dans le panneau de gauche — #2F6FED, rgb(47, 111, 237) ou hsl(220, 84%, 56%) sont tous reconnus ; avec plusieurs couleurs, chaque ligne produit sa propre palette. Choisissez ensuite ce que vous voulez. L'option tons clairs et foncés garde la teinte et la saturation fixes et ne fait varier que la clarté, de 90 % à 10 % ; avec 7 couleurs, #2F6FED devient une échelle à sept barreaux allant de #D0DFFB côté clair à #04132F côté foncé. L'option complémentaire traverse le cercle chromatique de 180 degrés et donne la couleur d'accent ; l'option analogue étale les voisines sur ±30 degrés, et la triadique ramène trois couleurs espacées de 120 degrés. Chaque ligne affiche côte à côte les équivalents HEX, RGB et HSL, et les carrés sous le résultat montrent chaque couleur en direct avec la même étiquette HEX. Si le ton clair doit servir de fond et le ton foncé de texte, ne décidez pas sans mesurer leur lisibilité avec le vérificateur de contraste.

Cet outil est aussi connu sous le nom de nuances de couleur, palette de couleurs harmonieuse, nuances hex.

Qu'est-ce que Ton clair (tint) ?

Un tint est la version éclaircie d'une couleur. En peinture, on l'obtient en ajoutant du blanc ; à l'écran, en montant la valeur de clarté du modèle HSL. Les deux méthodes ne donnent pas le même résultat : ajouter du blanc fait baisser la saturation et délave la couleur, tandis que monter la seule clarté préserve son identité. Dans une interface, les tons clairs servent surtout aux surfaces qui doivent rester en retrait — fonds, ligne sélectionnée, bouton désactivé.

Qu'est-ce que Ton foncé (shade) ?

Un shade est la version assombrie d'une couleur et fonctionne à l'inverse du tint : ajouter du noir en peinture, baisser la clarté à l'écran. Dans une interface, les tons foncés servent là où il faut ressortir — l'état d'un bouton qui s'assombrit au survol, une couleur de texte lisible sur fond clair, les bordures. Le seul point de vigilance côté foncé : sous 10 % de clarté, les différents tons deviennent indiscernables les uns des autres.

Qu'est-ce que Clarté (lightness) ?

La clarté est la troisième composante du modèle HSL ; elle situe la couleur entre le noir et le blanc en pourcentage : 0 % est le noir pur, 100 % le blanc pur, et 50 % le point médian où la couleur paraît la plus saturée. Toute la production de tons clairs et foncés de cet outil se fait en déplaçant ce seul nombre. Quand la clarté touche 0 % ou 100 %, la teinte et la saturation perdent leur sens — c'est pourquoi l'échelle est tenue entre 90 % et 10 %.

Qu'est-ce que Couleur complémentaire ?

La couleur complémentaire est celle qui se trouve exactement en face sur le cercle chromatique, à 180 degrés : l'orange pour le bleu, le vert pour le rouge. Placées côte à côte, deux complémentaires se renforcent mutuellement autant qu'il est possible ; c'est pourquoi la complémentaire est la candidate naturelle au rôle de couleur d'accent. Pour la même raison, elle fatigue l'œil et crée une impression de vibration sur de grandes surfaces — mieux vaut en faire la couleur d'un seul bouton que le fond de la page.

Quelle différence entre l'harmonie analogue et la triadique ?

Les deux construisent une palette en tournant sur le cercle chromatique ; seule change l'ampleur de la rotation. L'harmonie analogue reste dans un arc étroit de ±30 degrés : ses couleurs semblent de la même famille et donnent une surface calme et cohérente — idéale pour les fonds et les remplissages. La triadique découpe le cercle en trois parts égales de 120 degrés : les couleurs se détachent nettement les unes des autres, ce qui la fait préférer quand trois séries doivent rester distinctes dans un même graphique. En résumé : l'analogue construit l'unité, la triadique construit la distinction.

Pourquoi l'échelle de tons se construit-elle sur la clarté ?

Il existe deux façons courantes d'éclaircir une couleur : la mélanger avec du blanc, ou monter la valeur de clarté en HSL. Le mélange au blanc fait aussi baisser la saturation : la couleur pâlit en s'éclaircissant et une couleur de marque vire au gris en une ou deux étapes.

Cet outil garde la teinte et la saturation fixes et ne touche qu'à la clarté. Le résultat est une échelle régulière qui reste dans la même famille du clair au foncé — exactement ce qu'attend un thème d'interface.

Un avertissement : aux extrémités très claires et très foncées, l'œil distingue moins les écarts. Sur une échelle de 10 barreaux, deux couleurs voisines en bout d'échelle peuvent sembler collées — ce n'est pas un défaut, c'est le comportement naturel de l'œil.

Quelle harmonie pour quel usage ?

Les quatre options ne servent pas le même but ; le bon choix dépend du rôle que la couleur jouera dans l'interface.

• Tons clairs et foncés → thème monochrome, états de bouton, bordures et couches de fond
• Complémentaire → un seul accent qui doit attirer l'œil (badge d'alerte, bouton d'appel à l'action)
• Analogue → fonds et remplissages calmes qui semblent de la même famille
• Triadique → trois séries qui doivent se distinguer dans un même graphique

Questions fréquentes

Que veulent dire tint et shade ?

Le tint est la version éclaircie d'une couleur ; le shade, sa version assombrie. Cet outil produit les deux sur une même échelle : les lignes du haut sont les tons clairs, celles du bas les tons foncés.

Si je colle la valeur HSL générée dans mon CSS, aurai-je la même couleur ?

Presque. Les valeurs HSL sont arrondies à l'entier pour rester lisibles, tandis que le HEX est produit à partir du calcul non arrondi ; l'écart entre les deux est d'une unité au plus et invisible à l'œil. S'il vous faut une correspondance exacte, utilisez la valeur HEX.

Combien de barreaux faut-il à une échelle ?

Pour une petite interface, 5 suffisent. Si vous colorez séparément les états normal, survol, appuyé et désactivé d'un bouton, 7 sont plus confortables ; pour un design system complet, 10 laissent la marge nécessaire.

Mes couleurs sont-elles envoyées à un serveur ?

Non. La génération se fait entièrement dans votre navigateur ; les codes couleur que vous écrivez ne sont transmis à aucun serveur ni à aucun tiers.