Couleur purple de Tailwind CSS

Les 11 nuances de la couleur purple de Tailwind CSS, de purple-50 (la plus claire) à purple-950 (la plus foncée). Cliquez sur une valeur pour la copier.

Nuances de purple

HEX et RGB de Tailwind v3 ; OKLCH de Tailwind v4. Cliquez sur une valeur pour la copier.

purple-50

purple-100

purple-200

purple-300

purple-400

purple-500

purple-600

purple-700

purple-800

purple-900

purple-950

Copier toute la palette

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;
}

Autres couleurs Tailwind

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

Questions fréquentes

Quel est le code HEX de Tailwind purple-500 ?

Dans Tailwind v3, purple-500 vaut #A855F7, soit rgb(168, 85, 247). Dans Tailwind v4, il est défini comme oklch(62.7% 0.265 303.9).

Comment utiliser Tailwind purple dans mon projet ?

Avec des classes comme bg-purple-500, text-purple-700 ou border-purple-200. Dans Tailwind v4, vous pouvez aussi utiliser la variable CSS var(--color-purple-500) dans votre propre CSS.

Autres frameworks

Tailwind CSS, Material Design et Bootstrap sont des marques de leurs propriétaires respectifs. Les valeurs proviennent de leur documentation et de leurs paquets publics : Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.