01
#FBFDFFFondo de la aplicación
blue-1
Radix Blue 1- RGB
rgb(251 253 255)- Texto negro
- 20,60:1
- Texto blanco
- 1,02:1
← Volver al catálogo de colores
Plano de señales de interfaz
Radix Blue, trazado como una señal de interfaz.
Una escala azul de doce pasos verificada con la fuente, desde el lienzo hasta el texto de alto contraste. Consulta el rol documentado, el valor sRGB exacto y el contraste calculado de cada paso.
- Pasos de escala
- 01—12
- Roles documentados
- 12
- Versión
- 3.0.0
- 01
#FBFDFFFondo de la aplicación - 02
#F4FAFFFondo sutil - 03
#E6F4FEFondo de componente - 04
#D5EFFFComponente al pasar el puntero - 05
#C2E5FFComponente activo - 06
#ACD8FCBorde sutil - 07
#8EC8F6Borde interactivo - 08
#5EB1EFBorde fuerte o foco - 09
#0090FFFondo sólido - 10
#0588F0Fondo sólido al pasar el puntero - 11
#0D74CETexto de contraste moderado - 12
#113264Texto de contraste alto
Procedencia fijada
La exportación Blue clara y opaca exacta, fijada en 3.0.0.
Esta página contiene solo Blue 1–12 de la exportación sRGB clara y opaca de @radix-ui/colors 3.0.0. El modo oscuro, alfa y P3 quedan fuera de esta referencia.
Hexees es una referencia independiente, sin afiliación ni respaldo de WorkOS o Radix.
- Versión
- @radix-ui/colors 3.0.0
- Licencia
- MIT
Tabla de calibración
Doce pasos. Una función explícita para cada uno.
Se conserva el orden de la fuente oficial. Cada fila reúne su rol documentado, el sRGB exacto y el contraste calculado del texto negro o blanco.
Abrir color canónico
02
#F4FAFFFondo sutil
blue-2
Radix Blue 2- RGB
rgb(244 250 255)- Texto negro
- 19,96:1
- Texto blanco
- 1,05:1
Más formatos
03
#E6F4FEFondo de componente
blue-3
Radix Blue 3- RGB
rgb(230 244 254)- Texto negro
- 18,74:1
- Texto blanco
- 1,12:1
Más formatos
04
#D5EFFFComponente al pasar el puntero
blue-4
Radix Blue 4- RGB
rgb(213 239 255)- Texto negro
- 17,62:1
- Texto blanco
- 1,19:1
Más formatos
05
#C2E5FFComponente activo
blue-5
Radix Blue 5- RGB
rgb(194 229 255)- Texto negro
- 15,95:1
- Texto blanco
- 1,32:1
Más formatos
06
#ACD8FCBorde sutil
blue-6
Radix Blue 6- RGB
rgb(172 216 252)- Texto negro
- 13,98:1
- Texto blanco
- 1,50:1
Más formatos
07
#8EC8F6Borde interactivo
blue-7
Radix Blue 7- RGB
rgb(142 200 246)- Texto negro
- 11,74:1
- Texto blanco
- 1,79:1
Más formatos
08
#5EB1EFBorde fuerte o foco
blue-8
Radix Blue 8- RGB
rgb(94 177 239)- Texto negro
- 9,01:1
- Texto blanco
- 2,33:1
Más formatos
09
#0090FFFondo sólido
blue-9
Azul Radix 9- RGB
rgb(0 144 255)- Texto negro
- 6,43:1
- Texto blanco
- 3,26:1
Más formatos
10
#0588F0Fondo sólido al pasar el puntero
blue-10
Radix Blue 10- RGB
rgb(5 136 240)- Texto negro
- 5,79:1
- Texto blanco
- 3,63:1
Más formatos
11
#0D74CETexto de contraste moderado
blue-11
Radix Blue 11- RGB
rgb(13 116 206)- Texto negro
- 4,41:1
- Texto blanco
- 4,77:1
Más formatos
12
#113264Texto de contraste alto
blue-12
Radix Blue 12- RGB
rgb(17 50 100)- Texto negro
- 1,66:1
- Texto blanco
- 12,62:1
Más formatos
Alcance del catálogo
Una escala completa, sin inflar el índice.
La colección solo se indexa cuando los doce valores coinciden con el manifiesto fijado. Las páginas de cada token permanecen noindex; Blue 9 conserva su identidad canónica existente.
Los roles y las relaciones de contraste calculadas son un punto de partida, no una garantía. Prueba tipografía, superficies adyacentes, bordes, indicadores de foco y estados reales.
Abrir el comprobador de contraste →Comparar con Radix Slate →