shadcn Orange en OKLCH
Quick answer: shadcn Orange es #F97316, que convierte a oklch(0.705 0.187 47.60). Sobre blanco, tiene una relación de contraste WCAG de 2.80:1 y un puntaje APCA de Lc +53.16.
Esto no alcanza el umbral de texto grande AA de WCAG 2.2 (3:1) sobre blanco. Combínalo con un primer plano más oscuro. Los colores base OKLCH usados aquí están disponibles en shadcn/ui desde la actualización de Tailwind v4 (February 2025), con 92% de soporte global en navegadores para la notación OKLCH (caniuse, April 2026).
shadcn Orange es un token de tema de shadcn. Esta página presenta #F97316 como token de tema: pega los bloques :root y .dark de abajo para aplicar el tema a todos los componentes a la vez.
Especificaciones
Mayor contraste: black
Lente de accesibilidad
- Base#F97316
- 300#FFA46E
- 500#F97316
- 700#9F3400
Toggle a lens to preview this color under color vision differences.
¿Cómo pasa shadcn Orange de primitivo a componente?
- Primitive
- Semantic
- Component
Primitive
The raw value, before it means anything.
- hex
- #F97316
- oklch
- oklch(0.705 0.187 47.60)
Semantic
Bound to a role token that UI reads by name.
--primary: #F97316One primitive feeds the role. --primary then drives --ring and the hover and active states below, so a single value stays in sync everywhere.
Component
Applied to real UI across states.
On-color text: black (7.49:1 on #F97316).
¿Cómo escala shadcn Orange de 50 a 950?
- 50oklch(0.959 0.026 62.01)
- 100oklch(0.907 0.055 52.75)
- 200oklch(0.852 0.091 52.08)
- 300oklch(0.799 0.129 50.74)
- 400oklch(0.751 0.163 48.39)
- 500oklch(0.705 0.187 47.60)
- 600oklch(0.591 0.173 43.71)
- 700oklch(0.478 0.151 39.71)
- 800oklch(0.361 0.121 36.86)
- 900oklch(0.248 0.094 31.90)
- 950oklch(0.142 0.058 29.23)
¿Qué puntaje obtiene shadcn Orange en contraste WCAG 2.2?
Cada combinación de primer plano y fondo, con el veredicto de WCAG 2.2.
¿shadcn Orange cumple WCAG 2.2 sobre fondos neutros comunes?
- Aa2.80Below AA
Blanco #FFFFFF
- Aa2.57Below AA
Neutro 100 #F5F5F5
- Aa2.23Below AA
Neutro 200 #E5E5E5
- Aa1.11Below AA
Neutro 400 #A3A3A3
- Aa2.79Below AA
Neutro 600 #525252
- Aa6.40AA
Neutro 900 #171717
- Aa7.49AAA
Negro #000000
¿Qué paletas combinan con shadcn Orange?
Análogos
- #F91676
- #F91618
- #F97316
- #F9D216
- #C2F916
Complementarios
- #FBA061
- #F97316
Triádicos
- #F97316
- #AF4A04
- #16F973
¿Dónde usar shadcn Orange en UI de producción?
Notas sobre shadcn Orange
El naranja como base de shadcn es un acento de alta energía, oklch(0.705 0.187 47.6), el color para llamados a la acción, advertencias y estados vacíos luminosos. Como la mayoría de los tonos medios cálidos, no puede sostener texto pequeño sobre blanco, ya que queda en Below AA (2.8:1, APCA Lc +53.16), así que #F97316 debería ser un relleno o un gráfico grande, no texto de cuerpo en una página clara. Sobre una superficie casi negra se vuelve fuerte, WCAG 2.2 AAA (7.49:1, APCA Lc -48.69), así que el modo oscuro y los paneles oscuros son su lugar natural. En cuanto a rango, el conjunto análogo asciende desde el rojo #F91618 hasta el amarillo #F9D216, un degradado cálido natural, y la tríada llega a un verde menta #16F973. Un cromado slate frío evita que se lea como un cono de tránsito. El lente de accesibilidad es la verdadera limitación: bajo protanopia y deuteranopia el naranja se desliza hacia un amarillo verdoso (#C7D132), cerca de donde caen los verdes, así que un emparejamiento naranja y verde puede fundirse. Separa la advertencia del éxito con íconos y palabras, no solo con la calidez.
¿Qué otros colores de Tailwind y shadcn se relacionan con shadcn Orange?
Otros temas de shadcn
shadcn Primary Blue en OKLCH
oklch(0.623 0.188 259.80)
shadcn Zinc Dark en OKLCH
oklch(0.274 0.005 286.00)
shadcn Slate Accessible en OKLCH
oklch(0.279 0.037 260.00)
shadcn Indigo Custom en OKLCH
oklch(0.585 0.204 277.10)
shadcn Green en OKLCH
oklch(0.723 0.192 149.60)
shadcn Red en OKLCH
oklch(0.637 0.208 25.30)
shadcn Violet en OKLCH
oklch(0.606 0.219 292.70)
Matices más cercanos entre familias
:root {
--background: 0 7% 97%;
--foreground: 20 6% 10%;
--card: 0 7% 97%;
--card-foreground: 20 6% 10%;
--popover: 0 7% 97%;
--popover-foreground: 20 6% 10%;
--primary: 25 95% 53%;
--primary-foreground: 0 0% 100%;
--secondary: 56 62% 86%;
--secondary-foreground: 51 100% 9%;
--muted: 30 7% 94%;
--muted-foreground: 24 6% 50%;
--accent: 3 100% 89%;
--accent-foreground: 357 100% 13%;
--destructive: 0 72% 51%;
--destructive-foreground: 0 0% 100%;
--border: 20 5% 88%;
--input: 20 5% 88%;
--ring: 25 95% 53%;
--radius: 0.5rem;
}
.dark {
--background: 30 7% 6%;
--foreground: 0 7% 97%;
--card: 20 6% 10%;
--card-foreground: 0 7% 97%;
--popover: 20 6% 10%;
--popover-foreground: 0 7% 97%;
--primary: 22 100% 64%;
--primary-foreground: 0 0% 100%;
--secondary: 53 100% 17%;
--secondary-foreground: 56 62% 86%;
--muted: 20 7% 18%;
--muted-foreground: 22 6% 64%;
--accent: 352 100% 20%;
--accent-foreground: 3 100% 89%;
--destructive: 0 72% 51%;
--destructive-foreground: 0 0% 100%;
--border: 20 7% 18%;
--input: 20 7% 18%;
--ring: 22 100% 64%;
--radius: 0.5rem;
}¿Cómo exportas shadcn Orange como design tokens?
Exporta un documento de tokens W3C DTCG para la escala de shadcn Orange de 50 a 950, listo para Style Dictionary o cualquier pipeline compatible con DTCG.
Frequently asked questions
¿Listo para construir tu sistema de color?
Gratis para siempre, sin tarjeta, Pro cuando necesites más.
Hecho por un diseñador de producto que publica en código.