1
#FCFCFCFond de l’application
gray-1
Radix Gray 1- RGB
rgb(252 252 252)- Texte noir
- 20,47:1
- Texte blanc
- 1,03:1
← Retour au catalogue de couleurs
Étalonnage des neutres d’interface
Une échelle grise. Douze rôles précis.
Lisez Radix Gray comme un système d’interface continu : des fonds discrets aux états de composants, bordures, aplats et textes. Copiez les valeurs exactes sans confondre leur rôle.
- Niveaux de l’échelle
- 1 → 12
- Groupes de rôles
- 5
- Version
- 3.0.0
Source et périmètre
L’export Gray clair opaque exact, figé en version 3.0.0.
Cette référence contient uniquement Gray 1–12 de l’export sRGB clair opaque de @radix-ui/colors 3.0.0. Les neutres teintés, le mode sombre, l’alpha et le P3 sont volontairement exclus.
Hexees est une référence indépendante, sans affiliation ni approbation de WorkOS ou Radix.
- Version
- @radix-ui/colors 3.0.0
- Licence
- MIT
Instrument tonal
Choisissez selon le rôle, pas selon le gris qui paraît le plus joli.
Chaque niveau conserve l’ordre officiel et sa catégorie d’usage documentée. Les contrastes avec un texte noir ou blanc ne décrivent que cette paire exacte et ne constituent pas une garantie globale d’accessibilité.
2
#F9F9F9Fond discret
gray-2
Radix Gray 2- RGB
rgb(249 249 249)- Texte noir
- 19,95:1
- Texte blanc
- 1,05:1
3
#F0F0F0Fond de composant
gray-3
Radix Gray 3- RGB
rgb(240 240 240)- Texte noir
- 18,43:1
- Texte blanc
- 1,14:1
4
#E8E8E8Composant au survol
gray-4
Radix Gray 4- RGB
rgb(232 232 232)- Texte noir
- 17,14:1
- Texte blanc
- 1,23:1
5
#E0E0E0Composant actif
gray-5
Gris Material 300- RGB
rgb(224 224 224)- Texte noir
- 15,91:1
- Texte blanc
- 1,32:1
6
#D9D9D9Bordure discrète
gray-6
Radix Gray 6- RGB
rgb(217 217 217)- Texte noir
- 14,88:1
- Texte blanc
- 1,41:1
7
#CECECEBordure interactive
gray-7
Radix Gray 7- RGB
rgb(206 206 206)- Texte noir
- 13,34:1
- Texte blanc
- 1,57:1
8
#BBBBBBBordure forte ou repère de focus
gray-8
Radix Gray 8- RGB
rgb(187 187 187)- Texte noir
- 10,94:1
- Texte blanc
- 1,92:1
9
#8D8D8DAplat
gray-9
Radix Gray 9- RGB
rgb(141 141 141)- Texte noir
- 6,33:1
- Texte blanc
- 3,32:1
10
#838383Aplat au survol
gray-10
Radix Gray 10- RGB
rgb(131 131 131)- Texte noir
- 5,54:1
- Texte blanc
- 3,79:1
11
#646464Texte atténué
gray-11
Radix Gray 11- RGB
rgb(100 100 100)- Texte noir
- 3,55:1
- Texte blanc
- 5,92:1
12
#202020Texte fortement contrasté
gray-12
Radix Gray 12- RGB
rgb(32 32 32)- Texte noir
- 1,29:1
- Texte blanc
- 16,29:1
Réutilisation canonique
Gray 5 réutilise une couleur déjà vérifiée.
La valeur exacte #E0E0E0 appartient déjà à la fiche indexée Material Grey 300. Hexees relie gray-5 à cette page canonique et conserve en noindex les onze autres fiches Radix.
Testez la typographie, les bordures, les repères de navigation au clavier, les surfaces voisines et les états interactifs réels. Les rôles Radix et les contrastes calculés ne garantissent pas la conformité WCAG du composant final.
Ouvrir le vérificateur de contraste →Comparer les accents pleins Radix →