Barva green v Tailwind CSS

11 odstínů barvy green v Tailwind CSS, od green-50 (nejsvětlejší) po green-950 (nejtmavší). Klikni na libovolnou hodnotu a zkopíruješ ji.

Odstíny green

HEX a RGB z Tailwindu v3; OKLCH z Tailwindu v4. Kliknutím na hodnotu ji zkopíruješ.

green-50

green-100

green-200

green-300

green-400

green-500

green-600

green-700

green-800

green-900

green-950

Zkopírovat celou paletu

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

Proměnné 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;
}

Další barvy Tailwindu

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

Časté otázky

Jaký je HEX kód Tailwind green-500?

V Tailwindu v3 je green-500 #22C55E, tedy rgb(34, 197, 94). V Tailwindu v4 je definovaná jako oklch(72.3% 0.219 149.579).

Jak použít Tailwind green ve svém projektu?

Pomocí tříd jako bg-green-500, text-green-700 nebo border-green-200. V Tailwindu v4 můžeš ve vlastním CSS použít i proměnnou CSS var(--color-green-500).

Další frameworky

Tailwind CSS, Material Design a Bootstrap jsou ochranné známky svých vlastníků. Hodnoty pocházejí z jejich dokumentace a veřejných balíčků: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.