01
#FDFCFEFondo de aplicación
violet-1
Radix Violet 1- RGB
rgb(253 252 254)- Texto negro
- 20,53:1
- Texto blanco
- 1,02:1
← Volver al catálogo de colores
Mapa de profundidad de interfaz
Radix Violet, organizado por capas.
Una escala violeta de doce pasos verificada en la fuente y ordenada por profundidad de interfaz: desde el lienzo y los bordes hasta el acento sólido y el texto legible.
- Pasos de la escala
- 01—12
- Roles documentados
- 12
- Versión
- 3.0.0
- 01Fondo de aplicación
#FDFCFE - 02Fondo sutil
#FAF8FF - 03Fondo de componente
#F4F0FE - 04Componente bajo el puntero
#EBE4FF - 05Componente activo
#E1D9FF - 06Borde sutil
#D4CAFE - 07Borde interactivo
#C2B5F5 - 08Borde marcado o foco
#AA99EC - 09Fondo sólido
#6E56CF - 10Fondo sólido bajo el puntero
#654DC4 - 11Texto de contraste suave
#6550B9 - 12Texto de alto contraste
#2F265F
El paso 9 es la capa de acento sólido. Los pasos 11 y 12 pasan al texto; comprueba cada combinación real.
Procedencia fijada
La exportación Violet clara y opaca exacta, fijada en 3.0.0.
Esta referencia contiene solo Violet 1–12 de la exportación sRGB clara y opaca de @radix-ui/colors 3.0.0. Las variantes oscuras, alfa y P3 quedan fuera.
Hexees es una referencia independiente, sin afiliación ni respaldo de WorkOS o Radix.
- Versión
- @radix-ui/colors 3.0.0
- Licencia
- MIT
Registro compacto de capas
Doce capas, medidas con precisión.
El orden original se conserva entre superficies, bordes y primer plano. Cada tarjeta compacta ofrece una acción HEX directa, datos sRGB exactos y contraste de texto calculado.
Lienzo y superficies · 01—05
Ver color canónico
02
#FAF8FFFondo sutil
violet-2
Radix Violet 2- RGB
rgb(250 248 255)- Texto negro
- 19,94:1
- Texto blanco
- 1,05:1
Más formatos
03
#F4F0FEFondo de componente
violet-3
Radix Violet 3- RGB
rgb(244 240 254)- Texto negro
- 18,74:1
- Texto blanco
- 1,12:1
Más formatos
04
#EBE4FFComponente bajo el puntero
violet-4
Radix Violet 4- RGB
rgb(235 228 255)- Texto negro
- 17,07:1
- Texto blanco
- 1,23:1
Más formatos
05
#E1D9FFComponente activo
violet-5
Radix Violet 5- RGB
rgb(225 217 255)- Texto negro
- 15,57:1
- Texto blanco
- 1,35:1
Más formatos
Bordes y controles · 06—08
06
#D4CAFEBorde sutil
violet-6
Radix Violet 6- RGB
rgb(212 202 254)- Texto negro
- 13,68:1
- Texto blanco
- 1,54:1
Más formatos
07
#C2B5F5Borde interactivo
violet-7
Radix Violet 7- RGB
rgb(194 181 245)- Texto negro
- 11,22:1
- Texto blanco
- 1,87:1
Más formatos
08
#AA99ECBorde marcado o foco
violet-8
Radix Violet 8- RGB
rgb(170 153 236)- Texto negro
- 8,48:1
- Texto blanco
- 2,48:1
Más formatos
Acción y primer plano · 09—12
09
#6E56CFFondo sólido
violet-9
Violeta Radix 9- RGB
rgb(110 86 207)- Texto negro
- 3,90:1
- Texto blanco
- 5,39:1
Más formatos
10
#654DC4Fondo sólido bajo el puntero
violet-10
Radix Violet 10- RGB
rgb(101 77 196)- Texto negro
- 3,41:1
- Texto blanco
- 6,15:1
Más formatos
11
#6550B9Texto de contraste suave
violet-11
Radix Violet 11- RGB
rgb(101 80 185)- Texto negro
- 3,40:1
- Texto blanco
- 6,17:1
Más formatos
12
#2F265FTexto de alto contraste
violet-12
Radix Violet 12- RGB
rgb(47 38 95)- Texto negro
- 1,56:1
- Texto blanco
- 13,43:1
Más formatos
Úsalo con pruebas
La profundidad es un sistema, no una propiedad del color.
La colección solo se indexa mientras los doce valores publicados coincidan con el manifiesto fijado. Las páginas de tokens individuales permanecen noindex.
Comprueba el texto, los contornos de foco, los estados seleccionados y las capas adyacentes en la interfaz final. El violeta por sí solo no comunica jerarquía ni acción: añade etiquetas, forma y estado disponible mediante programación.