Couleur yellow de Tailwind CSS

Les 11 nuances de la couleur yellow de Tailwind CSS, de yellow-50 (la plus claire) à yellow-950 (la plus foncée). Cliquez sur une valeur pour la copier.

Nuances de yellow

HEX et RGB de Tailwind v3 ; OKLCH de Tailwind v4. Cliquez sur une valeur pour la copier.

yellow-50

yellow-100

yellow-200

yellow-300

yellow-400

yellow-500

yellow-600

yellow-700

yellow-800

yellow-900

yellow-950

Copier toute la palette

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

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

Autres couleurs Tailwind

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

Questions fréquentes

Quel est le code HEX de Tailwind yellow-500 ?

Dans Tailwind v3, yellow-500 vaut #EAB308, soit rgb(234, 179, 8). Dans Tailwind v4, il est défini comme oklch(79.5% 0.184 86.047).

Comment utiliser Tailwind yellow dans mon projet ?

Avec des classes comme bg-yellow-500, text-yellow-700 ou border-yellow-200. Dans Tailwind v4, vous pouvez aussi utiliser la variable CSS var(--color-yellow-500) dans votre propre CSS.

Autres frameworks

Tailwind CSS, Material Design et Bootstrap sont des marques de leurs propriétaires respectifs. Les valeurs proviennent de leur documentation et de leurs paquets publics : Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.