Palettes de couleurs UI : ce que chaque couleur peut faire (et ne peut pas faire)
Douze palettes de couleurs UI avec codes hex exacts, testées rôle par rôle. Quels accents marchent à la fois comme bouton et comme lien, quel texte gris échoue sur une carte teintée, et pourquoi un accent pâle remplit mais n'écrit jamais.
Une palette de couleurs UI n'est pas un assortiment de jolies couleurs. C'est un ensemble de rôles, et chaque couleur sait faire certains boulots, pas d'autres. Voici douze palettes, chacune testée sur un rôle qui tourne souvent mal, avec chaque code hex.
Les trois rôles d'une palette UI
L'encre écrit. C'est la couleur de chaque ligne de texte, elle doit donc être assez sombre sur la surface, comme Ink Navy #141238 sur Indigo Mist #EEF0FB. Vous l'utilisez aussi pour les liens quand l'accent ne peut pas.
La surface porte. C'est la page ou la carte derrière tout le reste. Elle n'a pas à être blanche, et la teinte que vous choisissez change le comportement de toutes les autres couleurs.
L'accent touche. C'est la seule couleur qui dit « ceci fait quelque chose ». Ça ressemble à un seul boulot, et la section suivante montre qu'il y en a deux.
Un accent a deux boulots
Sur un bouton, le libellé doit se lire sur l'accent, et le bouton doit se détacher de la page. Dans une phrase, le même accent devient un lien, et un lien est du texte, donc il doit être lisible sur cette même page. Les deux boulots utilisent la même paire de couleurs, mais le second place la barre plus haut.
Cela signifie qu'un accent peut faire un bon bouton et un mauvais lien. Sky et Coral se trouvent exactement dans cet écart. Indigo et Berry passent les deux.
Indigo
Indigo #4338CA, libellé blanc : réussi
Indigo en lien sur Indigo Mist #EEF0FB : réussi
Ink Navy #141238 en lien : réussi
Indigo fonctionne comme bouton et comme lien. Une couleur, deux boulots, rien à corriger.
Berry
Berry #A61E4D, libellé blanc : réussi
Berry en lien sur Berry Milk #FBEAF0 : réussi
Deep Berry #2A0A18 en lien : réussi
Berry fait pareil : un libellé blanc sur le bouton, un lien lisible sur sa surface rose pâle.
Sky
Sky #248AE4, libellé Harbor Ink : réussi
Sky en lien sur Sky Wash #EAF4FC : échec
Harbor Ink #021828 en lien : réussi
Sky est un bon bouton et un lien difficile. Gardez-le pour les boutons et composez les liens en Harbor Ink, soulignés.
Coral
Coral #E85446, libellé Burnt Clay : réussi
Coral en lien sur Coral Milk #FDEEEB : échec
Burnt Clay #290E0A en lien : réussi
Coral a la même fracture. Un bouton que l'on voit, et un lien qui disparaît dans Coral Milk.
Gardez l'accent pour les boutons
La solution ne coûte rien. Gardez Sky et Coral pour les boutons et composez les liens dans l'encre, soulignés. Voici la même phrase dans les deux versions.
Mot de passe
Mot de passe oublié ?
✕ Sky en lien : difficile à lire
Mot de passe
Mot de passe oublié ?
✓ Harbor Ink en lien : facile à lire
Texte gris sur cartes teintées
Le texte secondaire est généralement votre encre à environ 65 %. Sur du blanc, il se lit facilement dans les quatre palettes, et sur une surface pâle il bouge à peine. Sur une vraie teinte, il peut passer sous la ligne.
Testez-le donc sur la surface où il se trouve, pas sur du blanc. Sur une teinte forte, poussez le gris à 70 % et il se rétablit.
Red Panda
Sombre Night
Red Panda
#636772 sur Sugar Milk #FAF7F0 : réussi
Même mélange à 65 % #656A77 sur blanc : réussi
Sugar Milk est presque blanc, le gris change donc à peine. Il passe sur la carte et sur le blanc.
Warm Purple
English Walnut
Warm Purple
#606146 sur Oh Pistachio #BCDBA4 : échec
À 70 %, #59573F : réussi
Oh Pistachio est une vraie teinte. Le même gris qui passe sur blanc glisse ici sous la ligne, et 70 % le ramène.
Mango
Jedi Night
Mango
#5E6C68 sur Heart of Ice #F2F5FA : réussi
Même mélange à 65 % #626F6A sur blanc : réussi
Heart of Ice est une teinte froide et pâle, le gris tient donc bon.
Viridian
Midnight Dreams
Viridian
#535D71 sur Digital Lavender #D3CAEE : échec
À 70 %, #495467 : réussi
Digital Lavender est une teinte assez forte pour faire échouer le même gris. Poussez-le à 70 % et la carte se relit.
Un accent pâle remplit, il n'écrit jamais
Un accent pâle fait un très beau fond et une couleur de texte désespérée. Sur sa propre page, aucun de ces quatre ne se lit comme texte. Faites de la même couleur un fond et ça marche, à condition de bien choisir les mots qui vont dessus.
Purple Estate
Blue Horizon #72AFCC en texte sur Sunwashed Paper #F5EDCE : échec
Purple Estate #58287F sur Blue Horizon : grands caractères seulement
Purple Estate sur Sunwashed Paper : réussi
Le bleu pâle échoue en texte sur le papier. En fond, il accepte Purple Estate, ce qui convient à une grande date et pas à du petit texte.
Blue Horizon
Blue Horizon #2FA4D7 en texte sur Desert Cream #F5E9D8 : échec
Cocoa Noir #3E2C23 sur Blue Horizon : réussi
Cocoa Noir sur Desert Cream : réussi
Le bleu plus vif échoue aussi en texte sur Desert Cream. En fond, il porte Cocoa Noir sans effort.
Herb Garden
Herb Garden #BCD9A2 en texte sur Sun Linen #FEFFD3 : échec
Red Monarch #A82323 sur Herb Garden : réussi
Red Monarch sur Sun Linen : réussi
Le plus pâle des quatre sur sa page. Mettez Red Monarch sur le vert et le chiffre se lit clairement.
Nordic Sky
Nordic Sky #7288AE en texte sur Manor Cream #EAE0CF : échec
Blanc #FFFFFF sur Nordic Sky : grands caractères seulement
Velvet Indigo #4B5694 sur Manor Cream : réussi
Nordic Sky n'accepte que le blanc, et seulement en grands caractères : les chiffres oui, les mentions en petit non. Le texte de la page se compose en Velvet Indigo.
Vérifiez donc le fond et les mots posés dessus, pas seulement la page. Si les mots sur le fond n'atteignent que le contraste des grands caractères, gardez-les grands.
Les douze palettes dans un seul tableau
| Palette | Couleurs | Le rôle testé |
|---|---|---|
| Indigo | Ink Navy #141238, Indigo #4338CA, Indigo Mist #EEF0FB | Bouton et lien réussissent |
| Berry | Deep Berry #2A0A18, Berry #A61E4D, Berry Milk #FBEAF0 | Bouton et lien réussissent |
| Sky | Harbor Ink #021828, Sky #248AE4, Sky Wash #EAF4FC | Bouton réussit, lien échoue |
| Coral | Burnt Clay #290E0A, Coral #E85446, Coral Milk #FDEEEB | Bouton réussit, lien échoue |
| Red Panda | Sombre Night #121A2E, Red Panda #B54302, Sugar Milk #FAF7F0 | Le gris réussit sur la carte |
| Warm Purple | English Walnut #2E1F14, Warm Purple #812E7D, Oh Pistachio #BCDBA4 | Le gris échoue sur la carte |
| Mango | Jedi Night #0E2219, Mango #FAA828, Heart of Ice #F2F5FA | Le gris réussit sur la carte |
| Viridian | Midnight Dreams #0E222D, Viridian #007F5B, Digital Lavender #D3CAEE | Le gris échoue sur la carte |
| Purple Estate | Sunwashed Paper #F5EDCE, Blue Horizon #72AFCC, Purple Estate #58287F | Fonds bleu pâle, grands caractères seulement |
| Blue Horizon | Blue Horizon #2FA4D7, Desert Cream #F5E9D8, Cocoa Noir #3E2C23 | Le fond réussit avec Cocoa Noir |
| Herb Garden | Red Monarch #A82323, Sun Linen #FEFFD3, Herb Garden #BCD9A2 | Le fond réussit avec Red Monarch |
| Nordic Sky | Velvet Indigo #4B5694, Nordic Sky #7288AE, Manor Cream #EAE0CF | Le fond accepte le blanc, grands caractères seulement |
Les chiffres, pour celui qui défend le choix
Chaque association a été mesurée avec la formule de contraste WCAG 2 contre la surface sur laquelle elle se trouve. C'est le seul tableau du papier avec des ratios.
| Palette | Test | Ratio | Résultat |
|---|---|---|---|
| Indigo | Libellé blanc / bouton sur la page / lien sur la page | 7.90:1 / 6.96:1 / 6.96:1 | Tout réussit |
| Berry | Libellé blanc / bouton sur la page / lien sur la page | 7.21:1 / 6.22:1 / 6.22:1 | Tout réussit |
| Sky | Libellé encre / bouton sur la page / lien sur la page | 5.01:1 / 3.23:1 / 3.23:1 | Réussit, réussit, échoue |
| Coral | Libellé encre / bouton sur la page / lien sur la page | 4.98:1 / 3.21:1 / 3.21:1 | Réussit, réussit, échoue |
| Red Panda | Gris à 65 % sur la carte / sur blanc | 5.2:1 / 5.4:1 | Les deux réussissent |
| Warm Purple | Gris à 65 % sur la carte / sur blanc / à 70 % | 4.1:1 / 5.0:1 / 4.8:1 | Échoue, réussit, réussit |
| Mango | Gris à 65 % sur la carte / sur blanc | 5.0:1 / 5.2:1 | Les deux réussissent |
| Viridian | Gris à 65 % sur la carte / sur blanc / à 70 % | 4.2:1 / 5.1:1 / 4.8:1 | Échoue, réussit, réussit |
| Purple Estate | Accent pâle en texte / meilleur texte dessus / encre sur la page | 2.05:1 / 4.31:1 / 8.83:1 | Échoue, grands caractères, réussit |
| Blue Horizon | Accent pâle en texte / meilleur texte dessus / encre sur la page | 2.36:1 / 4.66:1 / 11.03:1 | Échoue, réussit, réussit |
| Herb Garden | Accent pâle en texte / meilleur texte dessus / encre sur la page | 1.51:1 / 4.64:1 / 6.98:1 | Échoue, réussit, réussit |
| Nordic Sky | Accent pâle en texte / blanc dessus / encre sur la page | 2.75:1 / 3.59:1 / 5.25:1 | Échoue, grands caractères, réussit |
Comment construire votre propre palette UI
- Commencez par l'encre et la surface. Choisissez une encre sombre et une surface, teintée ou blanche, et vérifiez l'encre sur la surface. Harbor Ink #021828 sur Sky Wash #EAF4FC est le cas facile.
- Choisissez l'accent selon son libellé. Décidez si c'est du texte blanc ou sombre qui va dessus, et vérifiez le libellé sur l'accent.
- Testez l'accent comme lien. Posez-le sur votre surface en tant que texte. S'il échoue, gardez-le pour les boutons et composez les liens dans l'encre.
- Testez le texte secondaire sur chaque surface. Mélangez l'encre à 65 % sur chaque couleur de carte. Poussez à 70 % là où ça glisse.
- Gardez les couleurs pâles pour les fonds. Choisissez les mots qui iront dessus avant de vous engager. Nos papiers sur les erreurs de couleur en UI et le contraste de couleur accessible détaillent les seuils.
Récupérez les fichiers de chaque set
Chaque set est un jeu de couleurs gratuit sur Forge, avec codes à copier d'un tap, fichiers de nuancier pour Figma et Adobe (ASE), variables CSS et design tokens.
Jeu de couleurs gratuit
Un accent a deux boulots : Indigo, Berry, Sky, Coral
Chaque hex, plus nuanciers ASE, variables CSS et design tokens.
Jeu de couleurs gratuit
Texte gris sur cartes teintées : Red Panda, Warm Purple, Mango, Viridian
Chaque hex, plus nuanciers ASE, variables CSS et design tokens.
Jeu de couleurs gratuit
Un accent pâle remplit, il n'écrit jamais : Purple Estate, Blue Horizon, Herb Garden, Nordic Sky
Chaque hex, plus nuanciers ASE, variables CSS et design tokens.
FAQ
Quelles couleurs doit avoir une palette de couleurs UI ?
Au moins trois rôles : une encre pour le texte, un accent pour les boutons et les liens, et une surface pour la page. Indigo #4338CA avec Ink Navy #141238 et Indigo Mist #EEF0FB en est un exemple complet.
De quelle couleur doivent être les liens dans une UI ?
De l'accent seulement s'il réussit comme texte sur votre surface. Indigo réussit. Sky #248AE4 non, donc ses liens se composent en Harbor Ink #021828, soulignés.
De quelle couleur doit être le texte secondaire ?
Votre encre à environ 65 %, vérifiée sur la surface où il se trouve. Sur une teinte forte comme Oh Pistachio #BCDBA4, il peut échouer, et le pousser à 70 % règle le problème.
Pourquoi le texte gris est-il difficile à lire sur une carte colorée ?
Une carte teintée est plus sombre que le blanc, donc l'écart entre le gris et la carte se réduit. Le blanc cache le problème, c'est pourquoi on teste sur la vraie surface.
Puis-je utiliser un pastel comme couleur d'accent ?
En fond, oui. En texte, non. Herb Garden #BCD9A2 échoue en texte sur Sun Linen #FEFFD3 et fonctionne en fond avec Red Monarch #A82323 dessus.
La couleur d'un bouton doit-elle fonctionner comme couleur de lien ?
Elle le doit si vous l'utilisez pour les deux. Un bouton doit se détacher de la page et porter son libellé. Un lien est du texte, il demande donc une barre plus haute sur la même page.
Sources
- Noms de couleurs et codes hex issus des sets de couleurs UX Brainy sur Forge, vol 04, 08 et 12. Le contraste a été calculé avec la formule WCAG 2 contre la surface sur laquelle chaque couleur se trouve.
- Les seuils pour le texte et les formes suivent W3C WCAG 2.2 : Contrast (Minimum) et Non-text Contrast.
- Le gris de chaque tuile est l'encre de la palette mélangée à la surface à 65 %, ou 70 % là où c'est indiqué, ce hex est donc dérivé de la palette.
- Publié d'abord sous forme de trois carrousels sur UX Brainy : Une couleur d'accent a deux boulots, Le même gris peut passer sur blanc et échouer sur votre carte teintée et Votre accent pâle peut remplir une forme.
Want a UI palette built for your product, with every role tested on your real screens? Our team designs interfaces that hold up in every state.
Get Started
