Color amber de Tailwind CSS

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

Tonos de amber

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

amber-50

amber-100

amber-200

amber-300

amber-400

amber-500

amber-600

amber-700

amber-800

amber-900

amber-950

Copiar toda la paleta

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

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

Otros colores de Tailwind

slate gray zinc neutral stone red orange 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 amber-500?

En Tailwind v3, amber-500 es #F59E0B, es decir rgb(245, 158, 11). En Tailwind v4 se define como oklch(76.9% 0.188 70.08).

¿Cómo uso Tailwind amber en mi proyecto?

Con clases como bg-amber-500, text-amber-700 o border-amber-200. En Tailwind v4 también puedes usar la variable CSS var(--color-amber-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.