Farbpaletten

Tailwind-CSS-Farbe yellow

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

Abstufungen von yellow

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

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

Ganze Palette kopieren

Tailwind v4 (CSS, @theme)

@theme {
  --color-yellow-50: oklch(98.7% 0.026 102.212);
  --color-yellow-100: oklch(97.3% 0.071 103.193);
  --color-yellow-200: oklch(94.5% 0.129 101.54);
  --color-yellow-300: oklch(90.5% 0.182 98.111);
  --color-yellow-400: oklch(85.2% 0.199 91.936);
  --color-yellow-500: oklch(79.5% 0.184 86.047);
  --color-yellow-600: oklch(68.1% 0.162 75.834);
  --color-yellow-700: oklch(55.4% 0.135 66.442);
  --color-yellow-800: oklch(47.6% 0.114 61.907);
  --color-yellow-900: oklch(42.1% 0.095 57.708);
  --color-yellow-950: oklch(28.6% 0.066 53.813);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        yellow: {
          50: '#fefce8',
          100: '#fef9c3',
          200: '#fef08a',
          300: '#fde047',
          400: '#facc15',
          500: '#eab308',
          600: '#ca8a04',
          700: '#a16207',
          800: '#854d0e',
          900: '#713f12',
          950: '#422006'
        }
      }
    }
  }
}

CSS-Variablen (HEX)

:root {
  --yellow-50: #FEFCE8;
  --yellow-100: #FEF9C3;
  --yellow-200: #FEF08A;
  --yellow-300: #FDE047;
  --yellow-400: #FACC15;
  --yellow-500: #EAB308;
  --yellow-600: #CA8A04;
  --yellow-700: #A16207;
  --yellow-800: #854D0E;
  --yellow-900: #713F12;
  --yellow-950: #422006;
}

Weitere Tailwind-Farben

slategrayzincneutralstoneredorangeamberlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose

Häufige Fragen

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

In Tailwind v3 ist yellow-500 #EAB308, also rgb(234, 179, 8). In Tailwind v4 ist es als oklch(79.5% 0.184 86.047) definiert.

Wie verwende ich Tailwind yellow in meinem Projekt?

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