#E54D2Etomato
tomato-9
Tomate Radix 9Copiar CSS, HEX o RGB
- HSL
hsl(10 78% 54%)- HWB
hwb(10 18% 10%)- Texto negro
- 5,43:1
- Texto blanco
- 3,87:1
Referencia versionada de acentos sólidos
Acentos sólidos del paso 9 de Radix Colors 3
Compara los 25 valores del paso 9 de las escalas claras y opacas de familias de acento. Busca por token o valor, copia CSS listo para usar y comprueba la pareja exacta con el texto antes de utilizar un acento como superficie sólida.
- 25acentos principales de familia
- 9paso común de la fuente
- 24 + 1colores Radix y una coincidencia canónica
Fuente y alcance
Una función documentada de una versión fijada del paquete.
Esta página extrae únicamente los 25 tokens de familias de acento claras y opacas que terminan en -9 en @radix-ui/colors 3.0.0. Radix documenta el paso 9 como referencia para fondos sólidos. Se excluyen de forma deliberada las familias neutras, los demás pasos, las escalas oscuras, los valores alfa y los exports display-P3.
Hexees es una referencia independiente y no está afiliada a WorkOS, Radix ni al proyecto Radix Colors, ni cuenta con su respaldo.
- Versión
- @radix-ui/colors 3.0.0
- Licencia
- Licencia MIT
Consulta práctica
Compara los 25 acentos sólidos principales.
La búsqueda y el orden funcionan localmente y no crean páginas indexables con parámetros. El orden de la fuente conserva la secuencia del artefacto fijado; ordenar por tono o nombre localizado solo cambia la vista.
Coinciden 25 de 25 acentos sólidos
#E5484Dred
red-9
Rojo Radix 9Copiar CSS, HEX o RGB
- HSL
hsl(358 75% 59%)- HWB
hwb(358 28% 10%)- Texto negro
- 5,37:1
- Texto blanco
- 3,91:1
#E54666ruby
ruby-9
Rubí Radix 9Copiar CSS, HEX o RGB
- HSL
hsl(348 75% 59%)- HWB
hwb(348 27% 10%)- Texto negro
- 5,40:1
- Texto blanco
- 3,89:1
#E93D82crimson
crimson-9
Carmesí Radix 9Copiar CSS, HEX o RGB
- HSL
hsl(336 80% 58%)- HWB
hwb(336 24% 9%)- Texto negro
- 5,45:1
- Texto blanco
- 3,85:1
#D6409Fpink
pink-9
Rosa Radix 9Copiar CSS, HEX o RGB
- HSL
hsl(322 65% 55%)- HWB
hwb(322 25% 16%)- Texto negro
- 5,09:1
- Texto blanco
- 4,12:1
#AB4ABAplum
plum-9
Ciruela Radix 9Copiar CSS, HEX o RGB
- HSL
hsl(292 45% 51%)- HWB
hwb(292 29% 27%)- Texto negro
- 4,42:1
- Texto blanco
- 4,75:1
#8E4EC6purple
purple-9
Púrpura Radix 9Copiar CSS, HEX o RGB
- HSL
hsl(272 51% 54%)- HWB
hwb(272 31% 22%)- Texto negro
- 4,06:1
- Texto blanco
- 5,18:1
#6E56CFviolet
violet-9
Violeta Radix 9Copiar CSS, HEX o RGB
- HSL
hsl(252 56% 57%)- HWB
hwb(252 34% 19%)- Texto negro
- 3,90:1
- Texto blanco
- 5,39:1
#5B5BD6iris
iris-9
Iris Radix 9Copiar CSS, HEX o RGB
- HSL
hsl(240 60% 60%)- HWB
hwb(240 36% 16%)- Texto negro
- 3,91:1
- Texto blanco
- 5,37:1
#3E63DDindigo
indigo-9
Índigo Radix 9Copiar CSS, HEX o RGB
- HSL
hsl(226 70% 55%)- HWB
hwb(226 24% 13%)- Texto negro
- 4,03:1
- Texto blanco
- 5,21:1
#0090FFblue
blue-9
Azul Radix 9Copiar CSS, HEX o RGB
- HSL
hsl(206 100% 50%)- HWB
hwb(206 0% 0%)- Texto negro
- 6,43:1
- Texto blanco
- 3,26:1
#00A2C7cyan
cyan-9
Cian Radix 9Copiar CSS, HEX o RGB
- HSL
hsl(191 100% 39%)- HWB
hwb(191 0% 22%)- Texto negro
- 6,99:1
- Texto blanco
- 3,00:1
#12A594teal
teal-9
Verde azulado Radix 9Copiar CSS, HEX o RGB
- HSL
hsl(173 80% 36%)- HWB
hwb(173 7% 35%)- Texto negro
- 6,84:1
- Texto blanco
- 3,07:1
#29A383jade
jade-9
Jade Radix 9Copiar CSS, HEX o RGB
- HSL
hsl(164 60% 40%)- HWB
hwb(164 16% 36%)- Texto negro
- 6,66:1
- Texto blanco
- 3,15:1
#30A46Cgreen
green-9
Verde Radix 9Copiar CSS, HEX o RGB
- HSL
hsl(151 55% 42%)- HWB
hwb(151 19% 36%)- Texto negro
- 6,65:1
- Texto blanco
- 3,16:1
#46A758grass
grass-9
Verde hierba Radix 9Copiar CSS, HEX o RGB
- HSL
hsl(131 41% 46%)- HWB
hwb(131 27% 35%)- Texto negro
- 6,93:1
- Texto blanco
- 3,03:1
#AD7F58brown
brown-9
Marrón Radix 9Copiar CSS, HEX o RGB
- HSL
hsl(28 34% 51%)- HWB
hwb(28 35% 32%)- Texto negro
- 5,95:1
- Texto blanco
- 3,53:1
#A18072bronze
bronze-9
Bronce Radix 9Copiar CSS, HEX o RGB
- HSL
hsl(18 20% 54%)- HWB
hwb(18 45% 37%)- Texto negro
- 5,85:1
- Texto blanco
- 3,59:1
#978365gold
gold-9
Dorado Radix 9Copiar CSS, HEX o RGB
- HSL
hsl(36 20% 49%)- HWB
hwb(36 40% 41%)- Texto negro
- 5,75:1
- Texto blanco
- 3,65:1
#7CE2FEsky
sky-9
Azul cielo Radix 9Copiar CSS, HEX o RGB
- HSL
hsl(193 98% 74%)- HWB
hwb(193 49% 0%)- Texto negro
- 14,17:1
- Texto blanco
- 1,48:1
#86EAD4mint
mint-9
Menta Radix 9Copiar CSS, HEX o RGB
- HSL
hsl(167 70% 72%)- HWB
hwb(167 53% 8%)- Texto negro
- 14,73:1
- Texto blanco
- 1,43:1
#BDEE63lime
lime-9
Lima Radix 9Copiar CSS, HEX o RGB
- HSL
hsl(81 80% 66%)- HWB
hwb(81 39% 7%)- Texto negro
- 15,57:1
- Texto blanco
- 1,35:1
#FFE629yellow
yellow-9
Amarillo Radix 9Copiar CSS, HEX o RGB
- HSL
hsl(53 100% 58%)- HWB
hwb(53 16% 0%)- Texto negro
- 16,60:1
- Texto blanco
- 1,26:1
#FFC53Damber
amber-9
Naranja dorado brillante — Ant gold 5Copiar CSS, HEX o RGB
- HSL
hsl(42 100% 62%)- HWB
hwb(42 24% 0%)- Texto negro
- 13,31:1
- Texto blanco
- 1,58:1
#F76B15orange
orange-9
Naranja Radix 9Copiar CSS, HEX o RGB
- HSL
hsl(23 93% 53%)- HWB
hwb(23 8% 3%)- Texto negro
- 7,07:1
- Texto blanco
- 2,97:1
Reutilización canónica
amber-9 reutiliza un color ya revisado.
El valor exacto #FFC53D ya pertenece al registro canónico ant-gold-5 de Ant Design. Hexees enlaza el token de Radix con ese registro en vez de crear una página duplicada; los otros 24 valores conservan la procedencia Radix.
- amber-9#FFC53D
- registro canónicoant-gold-5
Límites de accesibilidad
La función de acento sólido no garantiza accesibilidad.
Cada tarjeta calcula el contraste únicamente entre el valor sRGB opaco exacto y texto negro o blanco. WCAG 2.2 AA exige 4,5:1 para texto normal y 3:1 para texto grande; el resultado solo describe esa pareja.
Comprueba el componente real, la tipografía, los colores adyacentes, los bordes, los indicadores de foco y los estados de interacción, selección y desactivación. No comuniques estados ni acciones obligatorias solo mediante color.