Culoarea orange din Tailwind CSS

Cele 11 nuanțe ale culorii orange din Tailwind CSS, de la orange-50 (cea mai deschisă) la orange-950 (cea mai închisă). Fă clic pe orice valoare ca s-o copiezi.

Nuanțe de orange

HEX și RGB din Tailwind v3; OKLCH din Tailwind v4. Fă clic pe o valoare ca s-o copiezi.

orange-50

orange-100

orange-200

orange-300

orange-400

orange-500

orange-600

orange-700

orange-800

orange-900

orange-950

Copiază toată paleta

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

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

Alte culori Tailwind

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

Întrebări frecvente

Care este codul HEX pentru Tailwind orange-500?

În Tailwind v3, orange-500 este #F97316, adică rgb(249, 115, 22). În Tailwind v4 este definit ca oklch(70.5% 0.213 47.604).

Cum folosesc Tailwind orange în proiectul meu?

Cu clase precum bg-orange-500, text-orange-700 sau border-orange-200. În Tailwind v4 poți folosi și variabila CSS var(--color-orange-500) în propriul CSS.

Alte framework-uri

Tailwind CSS, Material Design și Bootstrap sunt mărci ale proprietarilor lor. Valorile provin din documentația și pachetele lor publice: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.