Farbpaletten

Tailwind-CSS-Farbe purple

Die 11 Abstufungen der Tailwind-CSS-Farbe purple, von purple-50 (am hellsten) bis purple-950 (am dunkelsten). Klicke auf einen Wert, um ihn zu kopieren.

Abstufungen von purple

HEX und RGB aus Tailwind v3, OKLCH aus Tailwind v4. Klicke auf einen Wert, um ihn zu kopieren.

purple-50
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
purple-900
purple-950

Ganze Palette kopieren

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

CSS-Variablen (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;
}

Weitere Tailwind-Farben

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletfuchsiapinkrose

Häufige Fragen

Wie lautet der HEX-Code von Tailwind purple-500?

In Tailwind v3 ist purple-500 #A855F7, also rgb(168, 85, 247). In Tailwind v4 ist es als oklch(62.7% 0.265 303.9) definiert.

Wie verwende ich Tailwind purple in meinem Projekt?

Mit Klassen wie bg-purple-500, text-purple-700 oder border-purple-200. In Tailwind v4 kannst du in deinem eigenen CSS auch die CSS-Variable var(--color-purple-500) verwenden.

Weitere Frameworks

Tailwind-CSS-FarbpaletteMaterial-Design-FarbpaletteBootstrap-FarbpaletteFarbpaletten von Frameworks

Tailwind CSS, Material Design und Bootstrap sind Marken ihrer jeweiligen Inhaber. Die Werte stammen aus ihrer Dokumentation und ihren öffentlichen Paketen: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.