Farbpaletten

Tailwind-CSS-Farbe violet

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

Abstufungen von violet

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

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

Ganze Palette kopieren

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

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

Weitere Tailwind-Farben

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigopurplefuchsiapinkrose

Häufige Fragen

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

In Tailwind v3 ist violet-500 #8B5CF6, also rgb(139, 92, 246). In Tailwind v4 ist es als oklch(60.6% 0.25 292.717) definiert.

Wie verwende ich Tailwind violet in meinem Projekt?

Mit Klassen wie bg-violet-500, text-violet-700 oder border-violet-200. In Tailwind v4 kannst du in deinem eigenen CSS auch die CSS-Variable var(--color-violet-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.