Culoarea amber din Tailwind CSS

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

Nuanțe de amber

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

amber-50

amber-100

amber-200

amber-300

amber-400

amber-500

amber-600

amber-700

amber-800

amber-900

amber-950

Copiază toată 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'
        }
      }
    }
  }
}

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

Alte culori Tailwind

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

Întrebări frecvente

Care este codul HEX pentru Tailwind amber-500?

În Tailwind v3, amber-500 este #F59E0B, adică rgb(245, 158, 11). În Tailwind v4 este definit ca oklch(76.9% 0.188 70.08).

Cum folosesc Tailwind amber în proiectul meu?

Cu clase precum bg-amber-500, text-amber-700 sau border-amber-200. În Tailwind v4 poți folosi și variabila CSS var(--color-amber-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.