01
#FDFCFEArrière-plan d’application
violet-1
Radix Violet 1- RGB
rgb(253 252 254)- Texte noir
- 20,53:1
- Texte blanc
- 1,02:1
← Retour au catalogue de couleurs
Carte de profondeur de l’interface
Radix Violet, organisé en couches.
Une échelle violette en douze étapes vérifiée à la source et organisée par profondeur : du canevas et des bordures à l’accent plein et au texte lisible.
- Étapes de l’échelle
- 01—12
- Rôles documentés
- 12
- Version
- 3.0.0
- 01Arrière-plan d’application
#FDFCFE - 02Arrière-plan discret
#FAF8FF - 03Arrière-plan de composant
#F4F0FE - 04Composant survolé
#EBE4FF - 05Composant actif
#E1D9FF - 06Bordure discrète
#D4CAFE - 07Bordure interactive
#C2B5F5 - 08Bordure marquée ou repère de navigation
#AA99EC - 09Arrière-plan plein
#6E56CF - 10Arrière-plan plein survolé
#654DC4 - 11Texte à contraste modéré
#6550B9 - 12Texte à contraste élevé
#2F265F
L’étape 9 est la couche d’accent plein. Les étapes 11 et 12 passent au texte ; testez chaque combinaison réelle.
Provenance figée
L’export Violet clair et opaque exact, figé en version 3.0.0.
Cette référence contient uniquement Violet 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 couches
Douze couches, mesurées avec précision.
L’ordre source est conservé entre surfaces, bordures et premier plan. Chaque carte compacte offre une action HEX directe, les données sRGB exactes et le contraste calculé du texte.
Canevas et surfaces · 01—05
Voir la couleur canonique
02
#FAF8FFArrière-plan discret
violet-2
Radix Violet 2- RGB
rgb(250 248 255)- Texte noir
- 19,94:1
- Texte blanc
- 1,05:1
Autres formats
03
#F4F0FEArrière-plan de composant
violet-3
Radix Violet 3- RGB
rgb(244 240 254)- Texte noir
- 18,74:1
- Texte blanc
- 1,12:1
Autres formats
04
#EBE4FFComposant survolé
violet-4
Radix Violet 4- RGB
rgb(235 228 255)- Texte noir
- 17,07:1
- Texte blanc
- 1,23:1
Autres formats
05
#E1D9FFComposant actif
violet-5
Radix Violet 5- RGB
rgb(225 217 255)- Texte noir
- 15,57:1
- Texte blanc
- 1,35:1
Autres formats
Bordures et commandes · 06—08
06
#D4CAFEBordure discrète
violet-6
Radix Violet 6- RGB
rgb(212 202 254)- Texte noir
- 13,68:1
- Texte blanc
- 1,54:1
Autres formats
07
#C2B5F5Bordure interactive
violet-7
Radix Violet 7- RGB
rgb(194 181 245)- Texte noir
- 11,22:1
- Texte blanc
- 1,87:1
Autres formats
08
#AA99ECBordure marquée ou repère de navigation
violet-8
Radix Violet 8- RGB
rgb(170 153 236)- Texte noir
- 8,48:1
- Texte blanc
- 2,48:1
Autres formats
Action et premier plan · 09—12
09
#6E56CFArrière-plan plein
violet-9
Violet Radix 9- RGB
rgb(110 86 207)- Texte noir
- 3,90:1
- Texte blanc
- 5,39:1
Autres formats
10
#654DC4Arrière-plan plein survolé
violet-10
Radix Violet 10- RGB
rgb(101 77 196)- Texte noir
- 3,41:1
- Texte blanc
- 6,15:1
Autres formats
11
#6550B9Texte à contraste modéré
violet-11
Radix Violet 11- RGB
rgb(101 80 185)- Texte noir
- 3,40:1
- Texte blanc
- 6,17:1
Autres formats
12
#2F265FTexte à contraste élevé
violet-12
Radix Violet 12- RGB
rgb(47 38 95)- Texte noir
- 1,56:1
- Texte blanc
- 13,43:1
Autres formats
À utiliser avec des preuves
La profondeur est un système, pas une propriété de la couleur.
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, les repères de navigation au clavier, les états sélectionnés et les couches voisines dans l’interface finale. Le violet seul ne communique ni hiérarchie ni action : ajoutez un libellé, une forme et un état accessible par programmation.