Culoarea yellow din Tailwind CSS

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

Nuanțe de yellow

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

yellow-50

yellow-100

yellow-200

yellow-300

yellow-400

yellow-500

yellow-600

yellow-700

yellow-800

yellow-900

yellow-950

Copiază toată paleta

Tailwind v4 (CSS, @theme)

@theme {
  --color-yellow-50: oklch(98.7% 0.026 102.212);
  --color-yellow-100: oklch(97.3% 0.071 103.193);
  --color-yellow-200: oklch(94.5% 0.129 101.54);
  --color-yellow-300: oklch(90.5% 0.182 98.111);
  --color-yellow-400: oklch(85.2% 0.199 91.936);
  --color-yellow-500: oklch(79.5% 0.184 86.047);
  --color-yellow-600: oklch(68.1% 0.162 75.834);
  --color-yellow-700: oklch(55.4% 0.135 66.442);
  --color-yellow-800: oklch(47.6% 0.114 61.907);
  --color-yellow-900: oklch(42.1% 0.095 57.708);
  --color-yellow-950: oklch(28.6% 0.066 53.813);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        yellow: {
          50: '#fefce8',
          100: '#fef9c3',
          200: '#fef08a',
          300: '#fde047',
          400: '#facc15',
          500: '#eab308',
          600: '#ca8a04',
          700: '#a16207',
          800: '#854d0e',
          900: '#713f12',
          950: '#422006'
        }
      }
    }
  }
}

Variabile CSS (HEX)

:root {
  --yellow-50: #FEFCE8;
  --yellow-100: #FEF9C3;
  --yellow-200: #FEF08A;
  --yellow-300: #FDE047;
  --yellow-400: #FACC15;
  --yellow-500: #EAB308;
  --yellow-600: #CA8A04;
  --yellow-700: #A16207;
  --yellow-800: #854D0E;
  --yellow-900: #713F12;
  --yellow-950: #422006;
}

Alte culori Tailwind

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

Întrebări frecvente

Care este codul HEX pentru Tailwind yellow-500?

În Tailwind v3, yellow-500 este #EAB308, adică rgb(234, 179, 8). În Tailwind v4 este definit ca oklch(79.5% 0.184 86.047).

Cum folosesc Tailwind yellow în proiectul meu?

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