paletta

Token de Tailwind CSS

Tailwind Violet 600 en OKLCH

Quick answer: Tailwind Violet 600 es #7C3AED, que convierte a oklch(0.541 0.247 293.00). Sobre blanco, tiene una relación de contraste WCAG de 5.69:1 y un puntaje APCA de Lc +77.47.

Esto cumple el umbral de texto AA de WCAG 2.2 (4.5:1) sobre blanco. Este color se lanzó en Tailwind CSS v4.0 (January 2025) como parte de la paleta OKLCH predeterminada, que tiene 92% de soporte global en navegadores (caniuse, April 2026).

oklch(0.541 0.247 293.00)

Tailwind Violet 600 es un color utilitario de Tailwind. Esta página presenta #7C3AED como un stop utilitario: copia la escala @theme generada abajo, o mapéala a tus propios tokens.

  • Especificaciones

    oklch(0.541 0.247 293.00)
    #7C3AED

    Mayor contraste: white

    5.69: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 +77.47
    Probar en Studio

  • Lente de accesibilidad

    • Base#7C3AED
    • 300#A987FF
    • 500#7C3AED
    • 700#4D00A3

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

¿Cómo pasa Tailwind Violet 600 de primitivo a componente?

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#7C3AED
oklch
oklch(0.541 0.247 293.00)

Semantic

Bound to a role token that UI reads by name.

--primary: #7C3AED

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.

AA5.69:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: white (5.69:1 on #7C3AED).

¿Cómo escala Tailwind Violet 600 de 50 a 950?

Tailwind Violet 600
50 to 950
#F6F0FF
#DACFFF
#C1ACFF
#A987FF
#9262FF
#7C3AED
#651DCA
#4D00A3
#360078
#20004F
#0D002A
  • 50oklch(0.964 0.021 304.04)
  • 100oklch(0.879 0.066 295.50)
  • 200oklch(0.793 0.118 295.21)
  • 300oklch(0.707 0.172 294.66)
  • 400oklch(0.627 0.222 292.97)
  • 500oklch(0.541 0.247 293.01)
  • 600oklch(0.459 0.234 293.14)
  • 700oklch(0.377 0.210 292.73)
  • 800oklch(0.300 0.168 292.14)
  • 900oklch(0.223 0.125 291.00)
  • 950oklch(0.147 0.083 289.90)

¿Qué puntaje obtiene Tailwind Violet 600 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.77Below AA
Aa3.47Below AA
Aa7.29AAA
Aa13.18AAA
Aa17.92AAA
Aa1.77Below AA
Aa1.00Below AA
Aa1.96Below AA
Aa4.11Below AA
Aa7.43AAA
Aa10.10AAA
Aa3.47Below AA
Aa1.96Below AA
Aa1.00Below AA
Aa2.09Below AA
Aa3.79Below AA
Aa5.15AA
Aa7.29AAA
Aa4.11Below AA
Aa2.09Below AA
Aa1.00Below AA
Aa1.80Below AA
Aa2.45Below AA
Aa13.18AAA
Aa7.43AAA
Aa3.79Below AA
Aa1.80Below AA
Aa1.00Below AA
Aa1.35Below AA
Aa17.92AAA
Aa10.10AAA
Aa5.15AA
Aa2.45Below AA
Aa1.35Below AA
Aa1.00Below AA

¿Tailwind Violet 600 cumple WCAG 2.2 sobre fondos neutros comunes?

  • Aa5.69AA

    Blanco #FFFFFF

  • Aa5.22AA

    Neutro 100 #F5F5F5

  • Aa4.52AA

    Neutro 200 #E5E5E5

  • Aa2.25Below AA

    Neutro 400 #A3A3A3

  • Aa1.37Below AA

    Neutro 600 #525252

  • Aa3.14Below AA

    Neutro 900 #171717

  • Aa3.68Below AA

    Negro #000000

¿Qué paletas combinan con Tailwind Violet 600?

  • Análogos

    • #3A8DED
    • #3A43ED
    • #7C3AED
    • #C73AED
    • #ED3AC9

  • Complementarios

    • #AB80F3
    • #7C3AED

  • Triádicos

    • #7C3AED
    • #4F11BA
    • #ED7C3A

¿Dónde usar Tailwind Violet 600 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 / white
$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
#7C3AED
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 Tailwind Violet 600

Violet 600 es el color más ruidoso de este conjunto, oklch(0.541 0.247 293) con el croma arriba en 0.247, así que funciona como primario de atención, acento premium o punto final de gradiente. Como texto o botón relleno sobre blanco cumple con WCAG 2.2 AA (5.6:1, APCA Lc +77.47); sobre una superficie casi negra se asienta en AA Large (3.68:1), así que aumenta el tamaño en cualquier uso de modo oscuro. Sus vecinos análogos son eléctricos, desde un azul #3A43ED hasta un magenta #ED3AC9, lo cual crea un gradiente natural, y la tríada lo equilibra con un naranja cálido #ED7C3A. Mantén el chrome en slate neutro para que el violeta siga siendo el protagonista. Bajo el lente de accesibilidad el canal rojo se debilita: la protanopia y la deuteranopia lo empujan hacia el azul (#6368B7), así que una distinción entre violeta y azul puede desaparecer, y la tritanopia lo atenúa a un verde suave (#799F98). Apóyate en la forma y la posición, no en el matiz exacto, cuando señale un estado.

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

Bloque @theme de Tailwind v4

@theme {
  --color-primary-50: #f6f0ff;
  --color-primary-100: #dacfff;
  --color-primary-200: #c1acff;
  --color-primary-300: #a987ff;
  --color-primary-400: #9262ff;
  --color-primary-500: #7c3aed;
  --color-primary-600: #651dca;
  --color-primary-700: #4d00a3;
  --color-primary-800: #360078;
  --color-primary-900: #20004f;
  --color-primary-950: #0d002a;

  --color-secondary-50: #ffeeff;
  --color-secondary-100: #f2d3f6;
  --color-secondary-200: #e6b5ed;
  --color-secondary-300: #d998e3;
  --color-secondary-400: #ca7cd5;
  --color-secondary-500: #b862c5;
  --color-secondary-600: #9646a2;
  --color-secondary-700: #732e7d;
  --color-secondary-800: #501a58;
  --color-secondary-900: #300736;
  --color-secondary-950: #120016;

  --color-accent-50: #edf4ff;
  --color-accent-100: #cdd8ff;
  --color-accent-200: #abbbfa;
  --color-accent-300: #8b9ff3;
  --color-accent-400: #6e82e5;
  --color-accent-500: #5566d2;
  --color-accent-600: #404db1;
  --color-accent-700: #2e378d;
  --color-accent-800: #1d2366;
  --color-accent-900: #0e1142;
  --color-accent-950: #030321;

  --color-neutral-50: #f7f7f8;
  --color-neutral-100: #efeff1;
  --color-neutral-200: #e0dfe2;
  --color-neutral-300: #c6c4ca;
  --color-neutral-400: #a29ea9;
  --color-neutral-500: #7d7887;
  --color-neutral-600: #5f5b67;
  --color-neutral-700: #46434c;
  --color-neutral-800: #2d2b31;
  --color-neutral-900: #19181b;
  --color-neutral-950: #0f0e10;

  --color-success-50: #e6fce9;
  --color-success-100: #c4eaca;
  --color-success-200: #9ddaa7;
  --color-success-300: #74c985;
  --color-success-400: #4ab766;
  --color-success-500: #16a34a;
  --color-success-600: #008330;
  --color-success-700: #00631a;
  --color-success-800: #00440a;
  --color-success-900: #002700;
  --color-success-950: #000d00;

  --color-error-50: #ffebe6;
  --color-error-100: #ffc9c0;
  --color-error-200: #ffa398;
  --color-error-300: #fe7c6f;
  --color-error-400: #f0544a;
  --color-error-500: #dc2626;
  --color-error-600: #b8000a;
  --color-error-700: #910000;
  --color-error-800: #680000;
  --color-error-900: #420000;
  --color-error-950: #200000;

  --color-warning-50: #fff1e1;
  --color-warning-100: #fed9be;
  --color-warning-200: #f9c095;
  --color-warning-300: #f2a66a;
  --color-warning-400: #e78e40;
  --color-warning-500: #d97706;
  --color-warning-600: #b25800;
  --color-warning-700: #893d00;
  --color-warning-800: #612500;
  --color-warning-900: #3a0f00;
  --color-warning-950: #180000;

  --color-info-50: #e6f6ff;
  --color-info-100: #bfdaff;
  --color-info-200: #95bdff;
  --color-info-300: #6ca0ff;
  --color-info-400: #4782fd;
  --color-info-500: #2563eb;
  --color-info-600: #114ac8;
  --color-info-700: #0333a1;
  --color-info-800: #002076;
  --color-info-900: #000e4e;
  --color-info-950: #000129;

  /* Surfaces */
  --color-background: #F7F7F8;
  --color-surface: #FFFFFF;
  --color-elevated: #F7F7F8;
  --color-foreground: #19181B;
  --color-muted: #7D7887;
  --color-border: #E0DFE2;
}

¿Cómo exportas Tailwind Violet 600 como design tokens?

Exporta un documento de tokens W3C DTCG para la escala de Tailwind Violet 600 de 50 a 950, listo para Style Dictionary o cualquier pipeline compatible con DTCG.

FAQ

Frequently asked questions

Tailwind Violet 600 (#7C3AED) is oklch(0.541 0.247 293) in the OKLCH color space.

Tailwind Violet 600 passes WCAG 2.2 AA on white for normal text. Contrast ratios: 5.69:1 on white, 3.68:1 on black.

On white, Tailwind Violet 600 has an APCA Lc of 77.5. On black, Lc is -24.3. APCA is a perceptual contrast model, not a WCAG compliance standard.

Paste the snippet above into your tailwind.config (or globals.css with @theme).

Under deuteranopia (most common, around 5 percent of men), Tailwind Violet 600 simulates to #6368b7. Under protanopia it shifts to #5f5fc2. Under tritanopia it appears as #799f98. 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