Farbpaletten

Tailwind-CSS-Farbe orange

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

Abstufungen von orange

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

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

Ganze Palette kopieren

Tailwind v4 (CSS, @theme)

@theme {
  --color-orange-50: oklch(98% 0.016 73.684);
  --color-orange-100: oklch(95.4% 0.038 75.164);
  --color-orange-200: oklch(90.1% 0.076 70.697);
  --color-orange-300: oklch(83.7% 0.128 66.29);
  --color-orange-400: oklch(75% 0.183 55.934);
  --color-orange-500: oklch(70.5% 0.213 47.604);
  --color-orange-600: oklch(64.6% 0.222 41.116);
  --color-orange-700: oklch(55.3% 0.195 38.402);
  --color-orange-800: oklch(47% 0.157 37.304);
  --color-orange-900: oklch(40.8% 0.123 38.172);
  --color-orange-950: oklch(26.6% 0.079 36.259);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        orange: {
          50: '#fff7ed',
          100: '#ffedd5',
          200: '#fed7aa',
          300: '#fdba74',
          400: '#fb923c',
          500: '#f97316',
          600: '#ea580c',
          700: '#c2410c',
          800: '#9a3412',
          900: '#7c2d12',
          950: '#431407'
        }
      }
    }
  }
}

CSS-Variablen (HEX)

:root {
  --orange-50: #FFF7ED;
  --orange-100: #FFEDD5;
  --orange-200: #FED7AA;
  --orange-300: #FDBA74;
  --orange-400: #FB923C;
  --orange-500: #F97316;
  --orange-600: #EA580C;
  --orange-700: #C2410C;
  --orange-800: #9A3412;
  --orange-900: #7C2D12;
  --orange-950: #431407;
}

Weitere Tailwind-Farben

slategrayzincneutralstoneredamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose

Häufige Fragen

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

In Tailwind v3 ist orange-500 #F97316, also rgb(249, 115, 22). In Tailwind v4 ist es als oklch(70.5% 0.213 47.604) definiert.

Wie verwende ich Tailwind orange in meinem Projekt?

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