Color orange de Tailwind CSS

Los 11 tonos del color orange de Tailwind CSS, del orange-50 (el más claro) al orange-950 (el más oscuro). Haz clic en cualquier valor para copiarlo.

Tonos de orange

HEX y RGB de Tailwind v3; OKLCH de Tailwind v4. Haz clic en un valor para copiarlo.

orange-50

orange-100

orange-200

orange-300

orange-400

orange-500

orange-600

orange-700

orange-800

orange-900

orange-950

Copiar toda la 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'
        }
      }
    }
  }
}

Variables 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;
}

Otros colores de Tailwind

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

Preguntas frecuentes

¿Cuál es el código HEX de Tailwind orange-500?

En Tailwind v3, orange-500 es #F97316, es decir rgb(249, 115, 22). En Tailwind v4 se define como oklch(70.5% 0.213 47.604).

¿Cómo uso Tailwind orange en mi proyecto?

Con clases como bg-orange-500, text-orange-700 o border-orange-200. En Tailwind v4 también puedes usar la variable CSS var(--color-orange-500) en tu propio CSS.

Otros frameworks

Tailwind CSS, Material Design y Bootstrap son marcas de sus respectivos dueños. Los valores salen de su documentación y sus paquetes públicos: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.