paletta

Token de shadcn

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.46: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).

oklch(0.585 0.204 277.10)

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

    oklch(0.585 0.204 277.10)
    #6366F1

    Mayor contraste: black

    4.70:1
    Normal AAcumple con WCAG 2.2
    Normal AAAno cumple con WCAG 2.2
    Large AAcumple con WCAG 2.2
    Large AAAcumple con WCAG 2.2
    Lc -31.09
    Probar en Studio

  • 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?

  1. Primitive
  2. Semantic
  3. 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: #6366F1

One 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.

AA4.70:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: black (4.70:1 on #6366F1).

¿Cómo escala shadcn Indigo Custom de 50 a 950?

shadcn Indigo Custom
50 to 950
#EEF3FF
#CFD8FF
#B0BCFF
#939FFF
#7A82FF
#6366F1
#4C4BCC
#3833A3
#241F76
#130B4D
#050027
  • 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.

AAA (7:1+)
AA (4.5:1+)
No cumple AA (menos de 4.5:1)
Pasa el cursor para ver APCA
Aa1.00Below AA
Aa1.64Below AA
Aa2.92Below AA
Aa5.93AA
Aa12.33AAA
Aa18.24AAA
Aa1.64Below AA
Aa1.00Below AA
Aa1.77Below AA
Aa3.60Below AA
Aa7.49AAA
Aa11.08AAA
Aa2.92Below AA
Aa1.77Below AA
Aa1.00Below AA
Aa2.02Below AA
Aa4.21Below AA
Aa6.24AA
Aa5.93AA
Aa3.60Below AA
Aa2.02Below AA
Aa1.00Below AA
Aa2.07Below AA
Aa3.07Below AA
Aa12.33AAA
Aa7.49AAA
Aa4.21Below AA
Aa2.07Below AA
Aa1.00Below AA
Aa1.47Below AA
Aa18.24AAA
Aa11.08AAA
Aa6.24AA
Aa3.07Below AA
Aa1.47Below AA
Aa1.00Below AA

¿shadcn Indigo Custom cumple WCAG 2.2 sobre fondos neutros comunes?

  • Aa4.46Below AA

    Blanco #FFFFFF

  • Aa4.09Below AA

    Neutro 100 #F5F5F5

  • Aa3.54Below AA

    Neutro 200 #E5E5E5

  • Aa1.77Below AA

    Neutro 400 #A3A3A3

  • Aa1.74Below 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?

bg: primary-50 · border: primary-100
Monthly revenue
$48,219
text: primary-900
+12.4% vs last mo.
badge: primary-100 / primary-700
primary-500 / black
$8.2k
JANFEBMARAPRMAYJUNJUL
bg: primary-600 · fg: white
ONBOARDING · STEP 2
Export your first design system this week.
bg: surface · border: neutral-200
SYSTEM
All systems normal
APIprimary-50 / primary-700Webprimary-50 / primary-700Pluginprimary-50 / primary-700
Tokens
248
+18 this week
overlay: primary-700 → primary-800 · fg: white
"One color system, every screen in sync."
Maya Okafor
Design systems lead
EPISODE 14
Designing color systems that scale
28:14
bg: primary-900
--primary-500
#6366F1
focus ring: primary-100COMPONENT · INPUT
Search projects…⌘K
button-primary: primary-600 / whitebutton-secondary: primary-50 / primary-700
SETTINGS
Weekly digest
Net new tokens
$15,989
$18,871 last period

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.46:1, que es AA Large, apenas unas 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?

Bloque :root de shadcn

: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% 0%;
  --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% 0%;
  --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.

FAQ

Frequently asked questions

shadcn Indigo Custom (#6366F1) is oklch(0.585 0.204 277.1) in the OKLCH color space.

shadcn Indigo Custom passes WCAG 2.2 AA on black for normal text. Contrast ratios: 4.46:1 on white, 4.7:1 on black.

On white, shadcn Indigo Custom has an APCA Lc of 70.6. On black, Lc is -31.1. APCA is a perceptual contrast model, not a WCAG compliance standard.

Paste the snippet above into your globals.css (with :root and .dark blocks).

Under deuteranopia (most common, around 5 percent of men), shadcn Indigo Custom simulates to #6464c7. Under protanopia it shifts to #6464cf. Under tritanopia it appears as #63b5af. Always pair color with shape, label, or icon for accessibility.

¿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.

Genera un sistema Ver precios