Tokens lisibles
Chaque étape possède un rôle stable et un nom de variable CSS. Lumière, base et ombre passent de l’exploration au composant sans transcription manuelle.
Outil couleur gratuit
Générateur de nuances pour teintes et ombres cartoon
Créez une palette de cinq, sept ou neuf étapes depuis une seule couleur. Comparez une gamme classique à une courbe cartoon expressive, puis copiez les valeurs sans envoyer de fichier.
Mis à jour le 23 juillet 2026
générateur de nuances de couleur
Que produit ce générateur de nuances ?
Le générateur transforme un HEX valide de trois ou six chiffres en gamme centrée tout en conservant exactement la couleur d’origine. Le mode Classique mélange vers le blanc pour les teintes et vers le noir pour les ombres. Le mode Cartoon modifie ensemble teinte, saturation et luminosité afin de créer des lumières plus chaudes et des ombres plus froides. Chaque résultat affiche HEX, RGB, HSB, contraste avec blanc et noir, copie, propriétés CSS et PNG créé localement.
Une couleur de base, trois résultats utiles
Utilisez la gamme comme système de rôles, pas comme simple rangée décorative.
Contraste visible
Les ratios avec texte blanc et noir sont indiqués pour chaque nuance. Les labels AA normal, AA grand ou insuffisant aident à sélectionner un premier plan avant le test complet.
Ombres adaptées au cartoon
Le mode Cartoon décale légèrement la teinte avec la luminosité. Il fournit un départ vivant pour personnages, interfaces de jeu, badges et illustration à aplats.
HEX · RGB · HSB · WCAG
Générer une gamme de la lumière à l’ombre
Choisissez la base, la méthode et le nombre d’étapes. La gamme se met à jour immédiatement dans le navigateur.
Teinte 3#D1EFF6
RGB 209, 239, 246
HSB 191°, 15%, 96%
- Texte blanc
- 1.21:1Sous AA
- Texte noir
- 17.39:1AA normal
--toon-shade-01Teinte 2#9FDEED
RGB 159, 222, 237
HSB 192°, 33%, 93%
- Texte blanc
- 1.48:1Sous AA
- Texte noir
- 14.15:1AA normal
--toon-shade-02Teinte 1#6ACCE3
RGB 106, 204, 227
HSB 191°, 53%, 89%
- Texte blanc
- 1.85:1Sous AA
- Texte noir
- 11.36:1AA normal
--toon-shade-03Base#2FB8D8
RGB 47, 184, 216
HSB 191°, 78%, 85%
- Texte blanc
- 2.34:1Sous AA
- Texte noir
- 8.97:1AA normal
--toon-shade-04Ombre 1#22869E
RGB 34, 134, 158
HSB 192°, 78%, 62%
- Texte blanc
- 4.22:1AA grand
- Texte noir
- 4.97:1AA normal
--toon-shade-05Ombre 2#175A6A
RGB 23, 90, 106
HSB 192°, 78%, 42%
- Texte blanc
- 7.76:1AA normal
- Texte noir
- 2.71:1Sous AA
--toon-shade-06Ombre 3#0C3038
RGB 12, 48, 56
HSB 191°, 79%, 22%
- Texte blanc
- 14.04:1AA normal
- Texte noir
- 1.50:1Sous AA
--toon-shade-07:root {
--toon-shade-01: #D1EFF6;
--toon-shade-02: #9FDEED;
--toon-shade-03: #6ACCE3;
--toon-shade-04: #2FB8D8;
--toon-shade-05: #22869E;
--toon-shade-06: #175A6A;
--toon-shade-07: #0C3038;
--toon-shade-base: var(--toon-shade-04);
}Comment générer des nuances vraiment utiles
Une gamme devient réutilisable quand la source, l’intervalle et la fonction sont explicites. Répétez ce flux court à chaque révision.
1. Partir d’un HEX fiable
Utilisez le fichier de design, le token de marque ou une source échantillonnée, plutôt qu’une capture compressée. Le générateur conserve exactement ce HEX au centre et rend chaque étape voisine traçable.
2. Choisir selon le travail
Classique convient aux fonds, bordures, graphiques et états prévisibles. Cartoon est une heuristique artistique pour lumière et ombre. Comparez les deux et gardez la méthode simple si le décalage de teinte n’améliore pas la hiérarchie.
3. Vérifier dans le contexte réel
Les ratios sont un filtre rapide. Avant publication, testez taille et graisse du texte, couleur voisine, focus et état interactif. Une nuance conforme ne rend pas automatiquement tout le composant accessible.
Nuances classiques ou nuances cartoon
Les deux méthodes gardent la base au centre, mais répondent à des besoins différents.
| Méthode | Transformation | Usage | Attention |
|---|---|---|---|
| Classique | Mélange RGB linéaire vers blanc ou noir | Surfaces UI, bordures, graphiques, tokens réguliers | Les milieux peuvent paraître gris ou mécaniques |
| Cartoon | Courbe HSB et petits décalages de teinte et saturation | Personnages, jeux, stickers, illustration à aplats | Point de départ créatif, pas spécification de marque |
| Contraste | Luminance relative WCAG avec blanc ou noir pur | Premier tri du texte sur chaque nuance | Retester police, taille, état et composant réels |
Comment la gamme est calculée
Un nombre impair crée un vrai centre. Cinq étapes donnent deux couleurs claires, la base originale et deux couleurs sombres ; sept et neuf ajoutent des intervalles plus fins de chaque côté. Les teintes classiques rapprochent les canaux RGB de 255, tandis que les ombres les rapprochent de zéro. Les extrêmes s’arrêtent avant le blanc et le noir purs afin de conserver l’identité colorée. La base n’étant pas recalculée, ses valeurs HEX, RGB et HSB restent exactes.
Le mode Cartoon suit une autre courbe. Les lumières gagnent en luminosité, perdent un peu de saturation et se déplacent de quelques degrés vers une direction plus chaude. Les ombres perdent en luminosité, gagnent légèrement en saturation et se déplacent en sens inverse. Le changement augmente avec la distance au centre. C’est une heuristique transparente, non une simulation physique : matériau, lumière ambiante, reflets et composition peuvent exiger une autre direction.
Teinte, ton et ombre ne sont pas synonymes
Dans la terminologie traditionnelle, une teinte claire résulte de l’ajout de blanc, une ombre de l’ajout de noir, et un ton de l’ajout de gris qui réduit l’intensité. Les outils numériques utilisent souvent « nuance » pour toutes les variations, ce qui brouille les définitions. Ce générateur nomme le côté clair teinte et le côté sombre ombre. La méthode Classique ne crée pas une rangée grise séparée ; la base demeure la référence.
La distinction facilite la transmission. « Utiliser l’ombre 2 » est reproductible si la méthode, la base et l’échelle sont enregistrées ; « rendre un peu plus sombre » ne l’est pas. Copiez tout le bloc CSS pour garder une nomenclature stable. Si un état survolé ou désactivé doit être désaturé, créez-le intentionnellement avec le sélecteur HSB plutôt que de considérer chaque milieu de rampe comme un ton approprié.
Créer des ombres cartoon sans ternir la palette
Une erreur fréquente consiste à réduire tous les canaux RGB de la même manière jusqu’à noircir l’ombre. L’objet reste techniquement dans la même famille mais perd l’énergie du dessin. De petits changements de teinte et de saturation gardent de la couleur dans les zones sombres. Le mode Cartoon illustre cette option avec une courbe mesurée, donnant une personnalité différente aux extrêmes tout en gardant les étapes proches comparables.
Utilisez peu d’étapes pour les aplats. Cinq couleurs couvrent souvent éclat, lumière, base, ombre et ombre profonde ; neuf conviennent aux tokens UI ou à un rendu progressif. N’employez pas chaque couleur simplement parce qu’elle existe. Gardez les rôles réellement visibles, nommez-les par fonction et inspectez-les à leur taille finale. Les différences évidentes sur un grand échantillon peuvent disparaître dans une petite icône.
Normes, mesures et notes de méthode
Le générateur sépare calcul reproductible et jugement créatif. Ces sources expliquent les formats, termes et seuils.
- CSS Color Module Level 4 définit le HEX à six chiffres comme trois canaux sRGB de 8 bits. Chaque canal offre 256 valeurs, soit 16 777 216 combinaisons RGB avant alpha. W3C CSS Color Module Level 4
- WCAG 2.2 fixe 4.5:1 pour le texte normal et 3:1 pour le grand texte au niveau AA ; le critère renforcé utilise 7:1 pour le texte normal. Règles WCAG 2.2 du W3C
- La gamme classique est une interpolation RGB reproductible. La gamme Cartoon est une heuristique Toon Tone, ni modèle d’éclairage, ni palette officielle, ni preuve complète d’accessibilité. Référence W3C sur la théorie des couleurs
WCAG 2.2 indique :
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
Continuer avec cette palette
FAQ du générateur de nuances
Quelle différence entre teinte et ombre ?
Une teinte mélange vers le blanc, une ombre vers le noir. Un ton ajoute généralement du gris. L’outil place les teintes avant la base exacte et les ombres après.
Le HEX original est-il conservé ?
Oui. Un HEX court est développé en six chiffres et cette valeur normalisée reste exactement au centre des gammes de cinq, sept ou neuf étapes.
Quel mode choisir pour une interface ?
Commencez par Classique pour surfaces, bordures et états prévisibles. Essayez Cartoon si un jeu ou une illustration gagne avec des lumières chaudes et des ombres froides.
Les labels WCAG garantissent-ils l’accessibilité ?
Non. Ils calculent seulement le ratio avec blanc ou noir pur. Testez premier plan, fond, taille, graisse, états et composant final.
Mes couleurs sont-elles envoyées ou stockées ?
Aucun compte ni envoi. Génération, copie, contraste et PNG fonctionnent dans le navigateur, et le fichier est créé localement sur votre appareil.