paletta
Token de shadcn

shadcn Violet en OKLCH

Quick answer: shadcn Violet es #8B5CF6, que convierte a oklch(0.606 0.219 292.70). Sobre blanco, tiene una relación de contraste WCAG de 4.23:1 y un puntaje APCA de Lc +68.72.

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.606 0.219 292.70)

shadcn Violet es un token de tema de shadcn. Esta página presenta #8B5CF6 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.606 0.219 292.70)
#8B5CF6

Mayor contraste: black

4.96: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 -32.94
Probar en Studio

Lente de accesibilidad

  • Base#8B5CF6
  • 300#B398FF
  • 500#8B5CF6
  • 700#5427A5

Toggle a lens to preview this color under color vision differences.

¿Cómo pasa shadcn Violet de primitivo a componente?

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#8B5CF6
oklch
oklch(0.606 0.219 292.70)

Semantic

Bound to a role token that UI reads by name.

--primary: #8B5CF6

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.96:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: black (4.96:1 on #8B5CF6).

¿Cómo escala shadcn Violet de 50 a 950?

shadcn Violet
50 to 950
#F5F0FF
#DED4FF
#C8B7FF
#B398FF
#9F7AFF
#8B5CF6
#6F40CF
#5427A5
#3A1478
#21024D
#0B0026
  • 50oklch(0.963 0.021 301.15)
  • 100oklch(0.892 0.059 295.83)
  • 200oklch(0.819 0.101 294.90)
  • 300oklch(0.745 0.147 294.63)
  • 400oklch(0.676 0.190 293.49)
  • 500oklch(0.606 0.219 292.72)
  • 600oklch(0.510 0.207 292.57)
  • 700oklch(0.415 0.186 292.57)
  • 800oklch(0.321 0.154 292.63)
  • 900oklch(0.224 0.121 292.47)
  • 950oklch(0.139 0.079 289.78)

¿Qué puntaje obtiene shadcn Violet 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.61Below AA
Aa2.80Below AA
Aa5.68AA
Aa12.11AAA
Aa18.03AAA
Aa1.61Below AA
Aa1.00Below AA
Aa1.74Below AA
Aa3.53Below AA
Aa7.53AAA
Aa11.20AAA
Aa2.80Below AA
Aa1.74Below AA
Aa1.00Below AA
Aa2.02Below AA
Aa4.32Below AA
Aa6.43AA
Aa5.68AA
Aa3.53Below AA
Aa2.02Below AA
Aa1.00Below AA
Aa2.13Below AA
Aa3.18Below AA
Aa12.11AAA
Aa7.53AAA
Aa4.32Below AA
Aa2.13Below AA
Aa1.00Below AA
Aa1.49Below AA
Aa18.03AAA
Aa11.20AAA
Aa6.43AA
Aa3.18Below AA
Aa1.49Below AA
Aa1.00Below AA

¿shadcn Violet cumple WCAG 2.2 sobre fondos neutros comunes?

  • Aa4.23Below AA

    Blanco #FFFFFF

  • Aa3.88Below AA

    Neutro 100 #F5F5F5

  • Aa3.36Below AA

    Neutro 200 #E5E5E5

  • Aa1.68Below AA

    Neutro 400 #A3A3A3

  • Aa1.85Below AA

    Neutro 600 #525252

  • Aa4.23Below AA

    Neutro 900 #171717

  • Aa4.96AA

    Negro #000000

¿Qué paletas combinan con shadcn Violet?

Análogos

  • #5CADF6
  • #5C6DF6
  • #8B5CF6
  • #CB5CF6
  • #F65CE1

Complementarios

  • #BFA4FA
  • #8B5CF6

Triádicos

  • #8B5CF6
  • #500DE9
  • #F68B5C

¿Dónde usar shadcn Violet 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
$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
"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
#8B5CF6
focus ring: primary-100COMPONENT · INPUT
Search projects…⌘K
button-primary: primary-600button-secondary: primary-50
SETTINGS
Weekly digest
Net new tokens
$15,989
$18,871 last period

Notas sobre shadcn Violet

Violet es el acento de shadcn para temas que quieren personalidad sin llegar a la saturación total, oklch(0.606 0.219 292.7), un morado con tendencia a lavanda que funciona bien para colores primarios, destacados y degradados. Está casi equilibrado entre modos: como texto blanco sobre un relleno violeta se lee AA Large (4.23:1) bajo WCAG 2.2, suficiente para una etiqueta de botón grande pero no para texto pequeño, y como texto sobre una tarjeta casi negra mejora a AA (4.96:1, APCA Lc -32.94). Trata el lado blanco como el sensible al tamaño. En cuanto a variedad, el conjunto análogo va del azul #5C6DF6 al magenta #CB5CF6, un degradado limpio, y la tríada responde con un coral #F68B5C. El cromado neutro en slate deja que el violet siga siendo el acento. Bajo la lente de accesibilidad el canal rojo se desvanece: la protanopia y la deuteranopia lo llevan hacia el azul (#797DC8), así que violet y azul pueden fundirse, mientras que la tritanopia lo atenúa a un verde azulado (#89B3AD). Mantén cualquier distinción entre violet y azul reforzada por algo más que el matiz.

¿Qué otros colores de Tailwind y shadcn se relacionan con shadcn Violet?

Explora todos los colores

:root {
  --background: 240 7% 97%;
  --foreground: 260 6% 10%;
  --card: 240 7% 97%;
  --card-foreground: 260 6% 10%;
  --popover: 240 7% 97%;
  --popover-foreground: 260 6% 10%;
  --primary: 258 90% 66%;
  --primary-foreground: 0 0% 100%;
  --secondary: 288 69% 91%;
  --secondary-foreground: 289 52% 14%;
  --muted: 240 7% 94%;
  --muted-foreground: 260 6% 50%;
  --accent: 226 100% 92%;
  --accent-foreground: 232 54% 16%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 260 5% 88%;
  --input: 260 5% 88%;
  --ring: 258 90% 66%;
  --radius: 0.5rem;
}

.dark {
  --background: 270 7% 6%;
  --foreground: 240 7% 97%;
  --card: 260 6% 10%;
  --card-foreground: 240 7% 97%;
  --popover: 260 6% 10%;
  --popover-foreground: 240 7% 97%;
  --primary: 257 100% 74%;
  --primary-foreground: 0 0% 100%;
  --secondary: 288 39% 26%;
  --secondary-foreground: 288 69% 91%;
  --muted: 260 7% 18%;
  --muted-foreground: 256 6% 64%;
  --accent: 230 45% 28%;
  --accent-foreground: 226 100% 92%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 260 7% 18%;
  --input: 260 7% 18%;
  --ring: 257 100% 74%;
  --radius: 0.5rem;
}

¿Cómo exportas shadcn Violet como design tokens?

Exporta un documento de tokens W3C DTCG para la escala de shadcn Violet 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.

Genera un sistema Ver precios