Color violet de Tailwind CSS

Los 11 tonos del color violet de Tailwind CSS, del violet-50 (el más claro) al violet-950 (el más oscuro). Haz clic en cualquier valor para copiarlo.

Tonos de violet

HEX y RGB de Tailwind v3; OKLCH de Tailwind v4. Haz clic en un valor para copiarlo.

violet-50

violet-100

violet-200

violet-300

violet-400

violet-500

violet-600

violet-700

violet-800

violet-900

violet-950

Copiar toda la paleta

Tailwind v4 (CSS, @theme)

@theme {
  --color-violet-50: oklch(96.9% 0.016 293.756);
  --color-violet-100: oklch(94.3% 0.029 294.588);
  --color-violet-200: oklch(89.4% 0.057 293.283);
  --color-violet-300: oklch(81.1% 0.111 293.571);
  --color-violet-400: oklch(70.2% 0.183 293.541);
  --color-violet-500: oklch(60.6% 0.25 292.717);
  --color-violet-600: oklch(54.1% 0.281 293.009);
  --color-violet-700: oklch(49.1% 0.27 292.581);
  --color-violet-800: oklch(43.2% 0.232 292.759);
  --color-violet-900: oklch(38% 0.189 293.745);
  --color-violet-950: oklch(28.3% 0.141 291.089);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        violet: {
          50: '#f5f3ff',
          100: '#ede9fe',
          200: '#ddd6fe',
          300: '#c4b5fd',
          400: '#a78bfa',
          500: '#8b5cf6',
          600: '#7c3aed',
          700: '#6d28d9',
          800: '#5b21b6',
          900: '#4c1d95',
          950: '#2e1065'
        }
      }
    }
  }
}

Variables CSS (HEX)

:root {
  --violet-50: #F5F3FF;
  --violet-100: #EDE9FE;
  --violet-200: #DDD6FE;
  --violet-300: #C4B5FD;
  --violet-400: #A78BFA;
  --violet-500: #8B5CF6;
  --violet-600: #7C3AED;
  --violet-700: #6D28D9;
  --violet-800: #5B21B6;
  --violet-900: #4C1D95;
  --violet-950: #2E1065;
}

Otros colores de Tailwind

slate gray zinc neutral stone red orange amber yellow lime green emerald teal cyan sky blue indigo purple fuchsia pink rose

Preguntas frecuentes

¿Cuál es el código HEX de Tailwind violet-500?

En Tailwind v3, violet-500 es #8B5CF6, es decir rgb(139, 92, 246). En Tailwind v4 se define como oklch(60.6% 0.25 292.717).

¿Cómo uso Tailwind violet en mi proyecto?

Con clases como bg-violet-500, text-violet-700 o border-violet-200. En Tailwind v4 también puedes usar la variable CSS var(--color-violet-500) en tu propio CSS.

Otros frameworks

Tailwind CSS, Material Design y Bootstrap son marcas de sus respectivos dueños. Los valores salen de su documentación y sus paquetes públicos: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.