01
#FDFDF9Fondo de la aplicación
yellow-1
- RGB
- rgb(253 253 249)
- Texto negro
- 20,59:1
- Texto blanco
- 1,02:1
← Volver al catálogo de paletas
Calibración de atención
Amarillo calibrado, no improvisado.
Una escala amarilla de doce pasos verificada con la fuente para superficies discretas, bordes, estados de atención y texto legible, en el orden exacto de origen.
- Pasos de la escala
- 01—12
- Espacio de color
- sRGB
- Versión
- 3.0.0
Revisión necesariaEl texto y el icono transmiten el mensaje; el amarillo cambia el énfasis.
Atención- 01Fondo de la aplicación
#FDFDF9 - 02Fondo tenue
#FEFCE9 - 03Fondo de componente
#FFFAB8 - 04Componente al pasar el puntero
#FFF394 - 05Componente activo
#FFE770 - 06Borde tenue
#F3D768 - 07Borde interactivo
#E4C767 - 08Borde fuerte o contorno de teclado
#D5AE39 - 09Fondo sólido
#FFE629 - 10Fondo sólido al pasar el puntero
#FFDC00 - 11Texto de contraste reducido
#9E6C00 - 12Texto de contraste elevado
#473B1F
Los pasos 9 y 10 son anclas sólidas diseñadas para primeros planos oscuros. Compruebe el componente real en vez de suponer que el amarillo es legible.
Procedencia fijada
La exportación Yellow clara y opaca exacta, fijada en 3.0.0.
Esta referencia contiene solo Yellow 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 de su alcance.
Hexees es una referencia independiente sin afiliación ni respaldo de WorkOS o Radix.
Tablero de tokens medidos
Doce funciones y valores exactos.
Cada tarjeta reúne el paso oficial, la función, el valor sRGB, el contraste calculado con texto negro y blanco y formatos listos para copiar.
Examinar color ↗
02
#FEFCE9Fondo tenue
yellow-2
- RGB
- rgb(254 252 233)
- Texto negro
- 20,31:1
- Texto blanco
- 1,03:1
Más formatos
03
#FFFAB8Fondo de componente
yellow-3
- RGB
- rgb(255 250 184)
- Texto negro
- 19,62:1
- Texto blanco
- 1,07:1
Más formatos
04
#FFF394Componente al pasar el puntero
yellow-4
- RGB
- rgb(255 243 148)
- Texto negro
- 18,50:1
- Texto blanco
- 1,14:1
Más formatos
05
#FFE770Componente activo
yellow-5
- RGB
- rgb(255 231 112)
- Texto negro
- 16,92:1
- Texto blanco
- 1,24:1
Más formatos
06
#F3D768Borde tenue
yellow-6
- RGB
- rgb(243 215 104)
- Texto negro
- 14,73:1
- Texto blanco
- 1,43:1
Más formatos
07
#E4C767Borde interactivo
yellow-7
- RGB
- rgb(228 199 103)
- Texto negro
- 12,66:1
- Texto blanco
- 1,66:1
Más formatos
08
#D5AE39Borde fuerte o contorno de teclado
yellow-8
- RGB
- rgb(213 174 57)
- Texto negro
- 9,94:1
- Texto blanco
- 2,11:1
Más formatos
09
#FFE629Fondo sólido
yellow-9
- RGB
- rgb(255 230 41)
- Texto negro
- 16,60:1
- Texto blanco
- 1,26:1
Más formatos
10
#FFDC00Fondo sólido al pasar el puntero
yellow-10
- RGB
- rgb(255 220 0)
- Texto negro
- 15,49:1
- Texto blanco
- 1,36:1
Más formatos
11
#9E6C00Texto de contraste reducido
yellow-11
- RGB
- rgb(158 108 0)
- Texto negro
- 4,60:1
- Texto blanco
- 4,57:1
Más formatos
12
#473B1FTexto de contraste elevado
yellow-12
- RGB
- rgb(71 59 31)
- Texto negro
- 1,91:1
- Texto blanco
- 10,98:1
Más formatos
La atención necesita estructura
El color señala, pero no explica.
La página solo se indexa mientras los doce valores publicados coincidan con el manifiesto fijado. Las páginas individuales permanecen en noindex.
Acompañe el amarillo con texto explícito, un icono y un estado programático. Compruebe texto, bordes, contornos de navegación por teclado y superficies adyacentes en la interfaz final.