Tailwind-CSS-Farbe fuchsia

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

Abstufungen von fuchsia

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

fuchsia-50

fuchsia-100

fuchsia-200

fuchsia-300

fuchsia-400

fuchsia-500

fuchsia-600

fuchsia-700

fuchsia-800

fuchsia-900

fuchsia-950

Ganze Palette kopieren

Tailwind v4 (CSS, @theme)

@theme {
  --color-fuchsia-50: oklch(97.7% 0.017 320.058);
  --color-fuchsia-100: oklch(95.2% 0.037 318.852);
  --color-fuchsia-200: oklch(90.3% 0.076 319.62);
  --color-fuchsia-300: oklch(83.3% 0.145 321.434);
  --color-fuchsia-400: oklch(74% 0.238 322.16);
  --color-fuchsia-500: oklch(66.7% 0.295 322.15);
  --color-fuchsia-600: oklch(59.1% 0.293 322.896);
  --color-fuchsia-700: oklch(51.8% 0.253 323.949);
  --color-fuchsia-800: oklch(45.2% 0.211 324.591);
  --color-fuchsia-900: oklch(40.1% 0.17 325.612);
  --color-fuchsia-950: oklch(29.3% 0.136 325.661);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        fuchsia: {
          50: '#fdf4ff',
          100: '#fae8ff',
          200: '#f5d0fe',
          300: '#f0abfc',
          400: '#e879f9',
          500: '#d946ef',
          600: '#c026d3',
          700: '#a21caf',
          800: '#86198f',
          900: '#701a75',
          950: '#4a044e'
        }
      }
    }
  }
}

CSS-Variablen (HEX)

:root {
  --fuchsia-50: #FDF4FF;
  --fuchsia-100: #FAE8FF;
  --fuchsia-200: #F5D0FE;
  --fuchsia-300: #F0ABFC;
  --fuchsia-400: #E879F9;
  --fuchsia-500: #D946EF;
  --fuchsia-600: #C026D3;
  --fuchsia-700: #A21CAF;
  --fuchsia-800: #86198F;
  --fuchsia-900: #701A75;
  --fuchsia-950: #4A044E;
}

Weitere Tailwind-Farben

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

Häufige Fragen

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

In Tailwind v3 ist fuchsia-500 #D946EF, also rgb(217, 70, 239). In Tailwind v4 ist es als oklch(66.7% 0.295 322.15) definiert.

Wie verwende ich Tailwind fuchsia in meinem Projekt?

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

Weitere 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.