Color purple de Tailwind CSS

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

Tonos de purple

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

purple-50

purple-100

purple-200

purple-300

purple-400

purple-500

purple-600

purple-700

purple-800

purple-900

purple-950

Copiar toda la paleta

Tailwind v4 (CSS, @theme)

@theme {
  --color-purple-50: oklch(97.7% 0.014 308.299);
  --color-purple-100: oklch(94.6% 0.033 307.174);
  --color-purple-200: oklch(90.2% 0.063 306.703);
  --color-purple-300: oklch(82.7% 0.119 306.383);
  --color-purple-400: oklch(71.4% 0.203 305.504);
  --color-purple-500: oklch(62.7% 0.265 303.9);
  --color-purple-600: oklch(55.8% 0.288 302.321);
  --color-purple-700: oklch(49.6% 0.265 301.924);
  --color-purple-800: oklch(43.8% 0.218 303.724);
  --color-purple-900: oklch(38.1% 0.176 304.987);
  --color-purple-950: oklch(29.1% 0.149 302.717);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        purple: {
          50: '#faf5ff',
          100: '#f3e8ff',
          200: '#e9d5ff',
          300: '#d8b4fe',
          400: '#c084fc',
          500: '#a855f7',
          600: '#9333ea',
          700: '#7e22ce',
          800: '#6b21a8',
          900: '#581c87',
          950: '#3b0764'
        }
      }
    }
  }
}

Variables CSS (HEX)

:root {
  --purple-50: #FAF5FF;
  --purple-100: #F3E8FF;
  --purple-200: #E9D5FF;
  --purple-300: #D8B4FE;
  --purple-400: #C084FC;
  --purple-500: #A855F7;
  --purple-600: #9333EA;
  --purple-700: #7E22CE;
  --purple-800: #6B21A8;
  --purple-900: #581C87;
  --purple-950: #3B0764;
}

Otros colores de Tailwind

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

Preguntas frecuentes

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

En Tailwind v3, purple-500 es #A855F7, es decir rgb(168, 85, 247). En Tailwind v4 se define como oklch(62.7% 0.265 303.9).

¿Cómo uso Tailwind purple en mi proyecto?

Con clases como bg-purple-500, text-purple-700 o border-purple-200. En Tailwind v4 también puedes usar la variable CSS var(--color-purple-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.