01
#FEFCFBFondo de la aplicación
orange-1
Radix Orange 1- RGB
rgb(254 252 251)- Texto negro
- 20,53:1
- Texto blanco
- 1,02:1
← Volver al catálogo de colores
Laboratorio de señales
Radix Orange, creado para señalar.
Una escala naranja de doce pasos verificada con la fuente, desde superficies discretas hasta bordes, avisos sólidos y texto legible.
- Pasos de la escala
- 01—12
- Funciones documentadas
- 12
- Versión
- 3.0.0
El pago requiere atenciónEl icono y la etiqueta conservan el significado sin color.
Revisar- 01Fondo de la aplicación
#FEFCFB - 02Fondo discreto
#FFF7ED - 03Fondo del componente
#FFEFD6 - 04Componente bajo el puntero
#FFDFB5 - 05Componente activo
#FFD19A - 06Borde discreto
#FFC182 - 07Borde interactivo
#F5AE73 - 08Borde fuerte o indicador de foco
#EC9455 - 09Fondo sólido
#F76B15 - 10Fondo sólido bajo el puntero
#EF5F00 - 11Texto de contraste bajo
#CC4E00 - 12Texto de contraste alto
#582D1D
El paso 9 es el acento naranja sólido. Un aviso también necesita icono, etiqueta y estado programático; el color por sí solo no basta.
Procedencia fijada
La exportación Orange opaca y clara exacta, fijada en la versión 3.0.0.
Esta referencia contiene solo Orange 1–12 de la exportación sRGB opaca y clara 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 señales
Doce tokens, una progresión medida.
Se conserva el orden de la fuente para superficies, bordes, acentos sólidos y texto. Cada tarjeta compacta muestra los datos sRGB exactos y el contraste calculado con texto negro o blanco.
Fondos y superficies · 01—05
Examinar color canónico
02
#FFF7EDFondo discreto
orange-2
Naranja Tailwind 50- RGB
rgb(255 247 237)- Texto negro
- 19,78:1
- Texto blanco
- 1,06:1
Más formatos
03
#FFEFD6Fondo del componente
orange-3
Radix Orange 3- RGB
rgb(255 239 214)- Texto negro
- 18,57:1
- Texto blanco
- 1,13:1
Más formatos
04
#FFDFB5Componente bajo el puntero
orange-4
Radix Orange 4- RGB
rgb(255 223 181)- Texto negro
- 16,47:1
- Texto blanco
- 1,27:1
Más formatos
05
#FFD19AComponente activo
orange-5
Radix Orange 5- RGB
rgb(255 209 154)- Texto negro
- 14,84:1
- Texto blanco
- 1,42:1
Más formatos
Bordes y controles · 06—08
06
#FFC182Borde discreto
orange-6
Radix Orange 6- RGB
rgb(255 193 130)- Texto negro
- 13,20:1
- Texto blanco
- 1,59:1
Más formatos
07
#F5AE73Borde interactivo
orange-7
Radix Orange 7- RGB
rgb(245 174 115)- Texto negro
- 11,18:1
- Texto blanco
- 1,88:1
Más formatos
08
#EC9455Borde fuerte o indicador de foco
orange-8
Radix Orange 8- RGB
rgb(236 148 85)- Texto negro
- 8,93:1
- Texto blanco
- 2,35:1
Más formatos
Señal sólida y texto · 09—12
09
#F76B15Fondo sólido
orange-9
Naranja Radix 9- RGB
rgb(247 107 21)- Texto negro
- 7,07:1
- Texto blanco
- 2,97:1
Más formatos
10
#EF5F00Fondo sólido bajo el puntero
orange-10
Radix Orange 10- RGB
rgb(239 95 0)- Texto negro
- 6,31:1
- Texto blanco
- 3,33:1
Más formatos
11
#CC4E00Texto de contraste bajo
orange-11
Radix Orange 11- RGB
rgb(204 78 0)- Texto negro
- 4,66:1
- Texto blanco
- 4,51:1
Más formatos
12
#582D1DTexto de contraste alto
orange-12
Radix Orange 12- RGB
rgb(88 45 29)- Texto negro
- 1,81:1
- Texto blanco
- 11,61:1
Más formatos
Úsala con pruebas
El naranja atrae la atención; la estructura transmite el significado.
La colección solo se indexa mientras los doce valores publicados coincidan con el manifiesto fijado. Las páginas de tokens individuales permanecen en noindex.
Comprueba el texto, los bordes, los indicadores de navegación por teclado y las superficies adyacentes en la interfaz final. Acompaña el color de aviso con un icono, texto explícito y estado programático.