shadcn Indigo Custom en OKLCH
Quick answer: shadcn Indigo Custom es #6366F1, que convierte a oklch(0.585 0.204 277.10). Sobre blanco, tiene una relación de contraste WCAG de 4.47:1 y un puntaje APCA de Lc +70.58.
Esto cumple el umbral de texto AA Large de WCAG 2.2 (3:1) sobre blanco. 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 Indigo Custom es un token de tema de shadcn. Esta página presenta #6366F1 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#6366F1
- 300#939FFF
- 500#6366F1
- 700#3833A3
Toggle a lens to preview this color under color vision differences.
¿Cómo pasa shadcn Indigo Custom de primitivo a componente?
- Primitive
- Semantic
- Component
Primitive
The raw value, before it means anything.
- hex
- #6366F1
- oklch
- oklch(0.585 0.204 277.10)
Semantic
Bound to a role token that UI reads by name.
--primary: #6366F1One 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 (4.70:1 on #6366F1).
¿Cómo escala shadcn Indigo Custom de 50 a 950?
- 50oklch(0.964 0.017 267.79)
- 100oklch(0.888 0.055 275.01)
- 200oklch(0.810 0.096 276.21)
- 300oklch(0.733 0.139 276.98)
- 400oklch(0.661 0.182 277.42)
- 500oklch(0.585 0.204 277.12)
- 600oklch(0.494 0.194 276.95)
- 700oklch(0.404 0.174 277.22)
- 800oklch(0.312 0.142 276.82)
- 900oklch(0.221 0.113 277.28)
- 950oklch(0.132 0.081 277.60)
¿Qué puntaje obtiene shadcn Indigo Custom en contraste WCAG 2.2?
Cada combinación de primer plano y fondo, con el veredicto de WCAG 2.2.
¿shadcn Indigo Custom cumple WCAG 2.2 sobre fondos neutros comunes?
- Aa4.47Below AA
Blanco #FFFFFF
- Aa4.10Below AA
Neutro 100 #F5F5F5
- Aa3.55Below AA
Neutro 200 #E5E5E5
- Aa1.77Below AA
Neutro 400 #A3A3A3
- Aa1.75Below AA
Neutro 600 #525252
- Aa4.01Below AA
Neutro 900 #171717
- Aa4.70AA
Negro #000000
¿Qué paletas combinan con shadcn Indigo Custom?
Análogos
- #63DCF1
- #63A1F1
- #6366F1
- #9B63F1
- #D663F1
Complementarios
- #A9ABF7
- #6366F1
Triádicos
- #6366F1
- #1419E4
- #F16366
¿Dónde usar shadcn Indigo Custom en UI de producción?
Notas sobre shadcn Indigo Custom
Indigo Custom cae un punto más frío y suave que un azul puro, oklch(0.585 0.204 277.1), un índigo amigable que funciona como primario o como enlace. Es el caso límite de este conjunto que vale la pena conocer: como texto sobre blanco mide 4.47:1, que es AA Large, apenas tres centésimas por debajo del 4.5 necesario para WCAG 2.2 AA en texto normal, así que no asumas que un texto pequeño en índigo sobre blanco cumple, auméntalo de tamaño o usa un tono más oscuro. Sobre una superficie casi negra en realidad le va mejor, en AA (4.7:1, APCA Lc -31.09). La tríada lanza un #1419E4 eléctrico y un coral #F16366, mientras que #A9ABF7 es un tinte suave para hovers. Bajo el lente de accesibilidad el índigo es estable para la visión rojo-verde (la protanopia se ubica en #6464CF, casi sin cambios), lo cual juega a su favor; la tritanopia lo empuja hacia el verde azulado (#63B5AF), así que mantén cualquier señal de índigo contra verde azulado respaldada por texto.
¿Qué otros colores de Tailwind y shadcn se relacionan con shadcn Indigo Custom?
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 Orange en OKLCH
oklch(0.705 0.187 47.60)
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: 240 7% 97%;
--foreground: 240 6% 10%;
--card: 240 7% 97%;
--card-foreground: 240 6% 10%;
--popover: 240 7% 97%;
--popover-foreground: 240 6% 10%;
--primary: 239 84% 67%;
--primary-foreground: 0 0% 100%;
--secondary: 266 95% 92%;
--secondary-foreground: 272 58% 15%;
--muted: 240 7% 94%;
--muted-foreground: 240 6% 50%;
--accent: 208 75% 91%;
--accent-foreground: 208 67% 13%;
--destructive: 0 72% 51%;
--destructive-foreground: 0 0% 100%;
--border: 240 5% 88%;
--input: 240 5% 88%;
--ring: 239 84% 67%;
--radius: 0.5rem;
}
.dark {
--background: 240 7% 6%;
--foreground: 240 7% 97%;
--card: 240 6% 10%;
--card-foreground: 240 7% 97%;
--popover: 240 6% 10%;
--popover-foreground: 240 7% 97%;
--primary: 236 100% 74%;
--primary-foreground: 0 0% 100%;
--secondary: 270 44% 27%;
--secondary-foreground: 266 95% 92%;
--muted: 240 7% 18%;
--muted-foreground: 240 6% 64%;
--accent: 209 47% 25%;
--accent-foreground: 208 75% 91%;
--destructive: 0 72% 51%;
--destructive-foreground: 0 0% 100%;
--border: 240 7% 18%;
--input: 240 7% 18%;
--ring: 236 100% 74%;
--radius: 0.5rem;
}¿Cómo exportas shadcn Indigo Custom como design tokens?
Exporta un documento de tokens W3C DTCG para la escala de shadcn Indigo Custom 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.