01
#FDFDFEArrière-plan d’application
indigo-1
Radix Indigo 1- RGB
rgb(253 253 254)- Texte noir
- 20,66:1
- Texte blanc
- 1,02:1
← Retour au catalogue de couleurs
Carte du parcours interactif
Radix Indigo, un parcours dans l’interface.
Une échelle indigo en douze étapes vérifiée à la source et tracée comme un parcours continu : des surfaces discrètes aux actions pleines et au texte lisible, en passant par les bordures et le repère de navigation au clavier.
- Étapes de l’échelle
- 01—12
- Rôles documentés
- 12
- Version
- 3.0.0
- 01
#FDFDFE - 02
#F7F9FF - 03
#EDF2FE - 04
#E1E9FF - 05
#D2DEFF - 06
#C1D0FF - 07
#ABBDF9 - 08
#8DA4EF - 09
#3E63DD - 10
#3358D4 - 11
#3A5BC7 - 12
#1F2D5C
L’étape 9 est l’accent plein de référence. Les étapes 11 et 12 sont prévues pour le texte ; chaque combinaison réelle doit néanmoins être testée.
Provenance figée
L’export Indigo clair et opaque exact, figé en version 3.0.0.
Cette référence contient uniquement Indigo 1–12 de l’export sRGB clair et opaque de @radix-ui/colors 3.0.0. Les variantes sombres, alpha et P3 sont hors périmètre.
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
Registre compact des jetons
Douze arrêts, un seul parcours utile.
L’ordre source est conservé dans les plages de surfaces, bordures et actions. Chaque carte compacte présente la valeur sRGB exacte, son rôle et le contraste calculé avec un texte noir ou blanc.
Surfaces · 01—05
Voir la couleur canonique
02
#F7F9FFArrière-plan discret
indigo-2
Radix Indigo 2- RGB
rgb(247 249 255)- Texte noir
- 19,95:1
- Texte blanc
- 1,05:1
Autres formats
03
#EDF2FEArrière-plan de composant
indigo-3
Radix Indigo 3- RGB
rgb(237 242 254)- Texte noir
- 18,73:1
- Texte blanc
- 1,12:1
Autres formats
04
#E1E9FFComposant survolé
indigo-4
Radix Indigo 4- RGB
rgb(225 233 255)- Texte noir
- 17,30:1
- Texte blanc
- 1,21:1
Autres formats
05
#D2DEFFComposant actif
indigo-5
Radix Indigo 5- RGB
rgb(210 222 255)- Texte noir
- 15,63:1
- Texte blanc
- 1,34:1
Autres formats
Bordures · 06—08
06
#C1D0FFBordure discrète
indigo-6
Radix Indigo 6- RGB
rgb(193 208 255)- Texte noir
- 13,73:1
- Texte blanc
- 1,53:1
Autres formats
07
#ABBDF9Bordure interactive
indigo-7
Radix Indigo 7- RGB
rgb(171 189 249)- Texte noir
- 11,38:1
- Texte blanc
- 1,85:1
Autres formats
08
#8DA4EFBordure marquée ou repère de navigation
indigo-8
Radix Indigo 8- RGB
rgb(141 164 239)- Texte noir
- 8,69:1
- Texte blanc
- 2,42:1
Autres formats
Accent et texte · 09—12
09
#3E63DDArrière-plan plein
indigo-9
Indigo Radix 9- RGB
rgb(62 99 221)- Texte noir
- 4,03:1
- Texte blanc
- 5,21:1
Autres formats
10
#3358D4Arrière-plan plein survolé
indigo-10
Radix Indigo 10- RGB
rgb(51 88 212)- Texte noir
- 3,49:1
- Texte blanc
- 6,02:1
Autres formats
11
#3A5BC7Texte à contraste modéré
indigo-11
Radix Indigo 11- RGB
rgb(58 91 199)- Texte noir
- 3,50:1
- Texte blanc
- 6,00:1
Autres formats
12
#1F2D5CTexte à contraste élevé
indigo-12
Radix Indigo 12- RGB
rgb(31 45 92)- Texte noir
- 1,59:1
- Texte blanc
- 13,22:1
Autres formats
À utiliser avec des preuves
Un accent de marque exige toujours de tester ses états.
La collection n’est indexable que si les douze valeurs publiées correspondent au manifeste figé. Les pages de jetons individuels restent noindex.
Testez le texte réel, les repères de navigation au clavier, les états sélectionnés et les surfaces voisines. L’indigo seul ne communique ni sélection ni action : ajoutez un libellé, une forme, une icône ou un autre indice accessible par programmation.