Couleur green de Tailwind CSS

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

Nuances de green

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

green-50

green-100

green-200

green-300

green-400

green-500

green-600

green-700

green-800

green-900

green-950

Copier toute la palette

Tailwind v4 (CSS, @theme)

@theme {
  --color-green-50: oklch(98.2% 0.018 155.826);
  --color-green-100: oklch(96.2% 0.044 156.743);
  --color-green-200: oklch(92.5% 0.084 155.995);
  --color-green-300: oklch(87.1% 0.15 154.449);
  --color-green-400: oklch(79.2% 0.209 151.711);
  --color-green-500: oklch(72.3% 0.219 149.579);
  --color-green-600: oklch(62.7% 0.194 149.214);
  --color-green-700: oklch(52.7% 0.154 150.069);
  --color-green-800: oklch(44.8% 0.119 151.328);
  --color-green-900: oklch(39.3% 0.095 152.535);
  --color-green-950: oklch(26.6% 0.065 152.934);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        green: {
          50: '#f0fdf4',
          100: '#dcfce7',
          200: '#bbf7d0',
          300: '#86efac',
          400: '#4ade80',
          500: '#22c55e',
          600: '#16a34a',
          700: '#15803d',
          800: '#166534',
          900: '#14532d',
          950: '#052e16'
        }
      }
    }
  }
}

Variables CSS (HEX)

:root {
  --green-50: #F0FDF4;
  --green-100: #DCFCE7;
  --green-200: #BBF7D0;
  --green-300: #86EFAC;
  --green-400: #4ADE80;
  --green-500: #22C55E;
  --green-600: #16A34A;
  --green-700: #15803D;
  --green-800: #166534;
  --green-900: #14532D;
  --green-950: #052E16;
}

Autres couleurs Tailwind

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

Questions fréquentes

Quel est le code HEX de Tailwind green-500 ?

Dans Tailwind v3, green-500 vaut #22C55E, soit rgb(34, 197, 94). Dans Tailwind v4, il est défini comme oklch(72.3% 0.219 149.579).

Comment utiliser Tailwind green dans mon projet ?

Avec des classes comme bg-green-500, text-green-700 ou border-green-200. Dans Tailwind v4, vous pouvez aussi utiliser la variable CSS var(--color-green-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.