Farbpaletten

Tailwind-CSS-Farbe amber

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

Abstufungen von amber

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

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

Ganze Palette kopieren

Tailwind v4 (CSS, @theme)

@theme {
  --color-amber-50: oklch(98.7% 0.022 95.277);
  --color-amber-100: oklch(96.2% 0.059 95.617);
  --color-amber-200: oklch(92.4% 0.12 95.746);
  --color-amber-300: oklch(87.9% 0.169 91.605);
  --color-amber-400: oklch(82.8% 0.189 84.429);
  --color-amber-500: oklch(76.9% 0.188 70.08);
  --color-amber-600: oklch(66.6% 0.179 58.318);
  --color-amber-700: oklch(55.5% 0.163 48.998);
  --color-amber-800: oklch(47.3% 0.137 46.201);
  --color-amber-900: oklch(41.4% 0.112 45.904);
  --color-amber-950: oklch(27.9% 0.077 45.635);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        amber: {
          50: '#fffbeb',
          100: '#fef3c7',
          200: '#fde68a',
          300: '#fcd34d',
          400: '#fbbf24',
          500: '#f59e0b',
          600: '#d97706',
          700: '#b45309',
          800: '#92400e',
          900: '#78350f',
          950: '#451a03'
        }
      }
    }
  }
}

CSS-Variablen (HEX)

:root {
  --amber-50: #FFFBEB;
  --amber-100: #FEF3C7;
  --amber-200: #FDE68A;
  --amber-300: #FCD34D;
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;
  --amber-600: #D97706;
  --amber-700: #B45309;
  --amber-800: #92400E;
  --amber-900: #78350F;
  --amber-950: #451A03;
}

Weitere Tailwind-Farben

slategrayzincneutralstoneredorangeyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose

Häufige Fragen

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

In Tailwind v3 ist amber-500 #F59E0B, also rgb(245, 158, 11). In Tailwind v4 ist es als oklch(76.9% 0.188 70.08) definiert.

Wie verwende ich Tailwind amber in meinem Projekt?

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