01
#FDFDFEFondo de aplicación
indigo-1
Radix Indigo 1- RGB
rgb(253 253 254)- Texto negro
- 20,66:1
- Texto blanco
- 1,02:1
← Volver al catálogo de colores
Mapa de interacción
Radix Indigo, una ruta por la interfaz.
Una escala índigo de doce pasos verificada en la fuente y trazada como una ruta continua: desde superficies discretas, pasando por bordes y foco, hasta acciones sólidas y texto legible.
- Pasos de la escala
- 01—12
- Roles documentados
- 12
- Versión
- 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
El paso 9 es el acento sólido de referencia. Los pasos 11 y 12 se destinan al texto; aun así, cada combinación real debe comprobarse.
Procedencia fijada
La exportación Indigo clara y opaca exacta, fijada en 3.0.0.
Esta referencia contiene solo Indigo 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 tokens
Doce paradas, una ruta útil.
El orden original se conserva en los rangos de superficies, bordes y acciones. Cada tarjeta compacta muestra el valor sRGB exacto, su rol y el contraste calculado con texto negro o blanco.
Superficies · 01—05
Ver color canónico
02
#F7F9FFFondo sutil
indigo-2
Radix Indigo 2- RGB
rgb(247 249 255)- Texto negro
- 19,95:1
- Texto blanco
- 1,05:1
Más formatos
03
#EDF2FEFondo de componente
indigo-3
Radix Indigo 3- RGB
rgb(237 242 254)- Texto negro
- 18,73:1
- Texto blanco
- 1,12:1
Más formatos
04
#E1E9FFComponente bajo el puntero
indigo-4
Radix Indigo 4- RGB
rgb(225 233 255)- Texto negro
- 17,30:1
- Texto blanco
- 1,21:1
Más formatos
05
#D2DEFFComponente activo
indigo-5
Radix Indigo 5- RGB
rgb(210 222 255)- Texto negro
- 15,63:1
- Texto blanco
- 1,34:1
Más formatos
Bordes · 06—08
06
#C1D0FFBorde sutil
indigo-6
Radix Indigo 6- RGB
rgb(193 208 255)- Texto negro
- 13,73:1
- Texto blanco
- 1,53:1
Más formatos
07
#ABBDF9Borde interactivo
indigo-7
Radix Indigo 7- RGB
rgb(171 189 249)- Texto negro
- 11,38:1
- Texto blanco
- 1,85:1
Más formatos
08
#8DA4EFBorde marcado o foco
indigo-8
Radix Indigo 8- RGB
rgb(141 164 239)- Texto negro
- 8,69:1
- Texto blanco
- 2,42:1
Más formatos
Acento y texto · 09—12
09
#3E63DDFondo sólido
indigo-9
Índigo Radix 9- RGB
rgb(62 99 221)- Texto negro
- 4,03:1
- Texto blanco
- 5,21:1
Más formatos
10
#3358D4Fondo sólido bajo el puntero
indigo-10
Radix Indigo 10- RGB
rgb(51 88 212)- Texto negro
- 3,49:1
- Texto blanco
- 6,02:1
Más formatos
11
#3A5BC7Texto de contraste suave
indigo-11
Radix Indigo 11- RGB
rgb(58 91 199)- Texto negro
- 3,50:1
- Texto blanco
- 6,00:1
Más formatos
12
#1F2D5CTexto de alto contraste
indigo-12
Radix Indigo 12- RGB
rgb(31 45 92)- Texto negro
- 1,59:1
- Texto blanco
- 13,22:1
Más formatos
Úsalo con pruebas
Un acento de marca también exige probar sus estados.
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 real, los contornos de foco, los estados seleccionados y las superficies vecinas. El índigo por sí solo no comunica selección ni acción: añade etiquetas, formas, iconos u otra señal disponible mediante programación.