1
#FCFCFCFondo de aplicación
gray-1
Radix Gray 1- RGB
rgb(252 252 252)- Texto negro
- 20,47:1
- Texto blanco
- 1,03:1
← Volver al catálogo de colores
Calibración de neutros para interfaces
Una escala gris. Doce funciones deliberadas.
Lee Radix Gray como un sistema continuo de interfaz: desde fondos discretos hasta estados de componentes, bordes, rellenos sólidos y texto. Copia valores exactos sin confundir su función.
- Pasos de la escala
- 1 → 12
- Grupos funcionales
- 5
- Versión
- 3.0.0
Fuente y alcance
La exportación Gray clara y opaca exacta, fijada en 3.0.0.
Esta referencia incluye solo Gray 1–12 de la exportación sRGB clara y opaca de @radix-ui/colors 3.0.0. Los neutros tintados, el modo oscuro, alpha y P3 quedan fuera de este alcance.
Hexees es una referencia independiente, sin afiliación ni respaldo de WorkOS o Radix.
- Versión
- @radix-ui/colors 3.0.0
- Licencia
- MIT
Instrumento tonal
Elige por función, no por el gris que parezca más bonito.
Cada paso conserva el orden oficial y su categoría de uso documentada. Los contrastes con texto negro o blanco describen solo esa pareja exacta y no garantizan accesibilidad general.
2
#F9F9F9Fondo sutil
gray-2
Radix Gray 2- RGB
rgb(249 249 249)- Texto negro
- 19,95:1
- Texto blanco
- 1,05:1
3
#F0F0F0Fondo de componente
gray-3
Radix Gray 3- RGB
rgb(240 240 240)- Texto negro
- 18,43:1
- Texto blanco
- 1,14:1
4
#E8E8E8Componente bajo el puntero
gray-4
Radix Gray 4- RGB
rgb(232 232 232)- Texto negro
- 17,14:1
- Texto blanco
- 1,23:1
5
#E0E0E0Componente activo
gray-5
Gris Material 300- RGB
rgb(224 224 224)- Texto negro
- 15,91:1
- Texto blanco
- 1,32:1
6
#D9D9D9Borde sutil
gray-6
Radix Gray 6- RGB
rgb(217 217 217)- Texto negro
- 14,88:1
- Texto blanco
- 1,41:1
7
#CECECEBorde interactivo
gray-7
Radix Gray 7- RGB
rgb(206 206 206)- Texto negro
- 13,34:1
- Texto blanco
- 1,57:1
8
#BBBBBBBorde fuerte o foco
gray-8
Radix Gray 8- RGB
rgb(187 187 187)- Texto negro
- 10,94:1
- Texto blanco
- 1,92:1
9
#8D8D8DFondo sólido
gray-9
Radix Gray 9- RGB
rgb(141 141 141)- Texto negro
- 6,33:1
- Texto blanco
- 3,32:1
10
#838383Fondo sólido bajo el puntero
gray-10
Radix Gray 10- RGB
rgb(131 131 131)- Texto negro
- 5,54:1
- Texto blanco
- 3,79:1
11
#646464Texto atenuado
gray-11
Radix Gray 11- RGB
rgb(100 100 100)- Texto negro
- 3,55:1
- Texto blanco
- 5,92:1
12
#202020Texto de alto contraste
gray-12
Radix Gray 12- RGB
rgb(32 32 32)- Texto negro
- 1,29:1
- Texto blanco
- 16,29:1
Reutilización canónica
Gray 5 reutiliza un color ya revisado.
El valor exacto #E0E0E0 ya pertenece a la ficha indexada Material Grey 300. Hexees enlaza gray-5 con esa página canónica y mantiene noindex las otras once fichas de Radix.
Prueba la tipografía, los bordes, los indicadores de foco, las superficies adyacentes y los estados interactivos reales. Las funciones Radix y los contrastes calculados no garantizan que el componente final cumpla WCAG.
Abrir el comprobador de contraste →Comparar acentos sólidos de Radix →