Barva neutral v Tailwind CSS

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

Odstíny neutral

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

neutral-50

neutral-100

neutral-200

neutral-300

neutral-400

neutral-500

neutral-600

neutral-700

neutral-800

neutral-900

neutral-950

Zkopírovat celou paletu

Tailwind v4 (CSS, @theme)

@theme {
  --color-neutral-50: oklch(98.5% 0 none);
  --color-neutral-100: oklch(97% 0 none);
  --color-neutral-200: oklch(92.2% 0 none);
  --color-neutral-300: oklch(87% 0 none);
  --color-neutral-400: oklch(70.8% 0 none);
  --color-neutral-500: oklch(55.6% 0 none);
  --color-neutral-600: oklch(43.9% 0 none);
  --color-neutral-700: oklch(37.1% 0 none);
  --color-neutral-800: oklch(26.9% 0 none);
  --color-neutral-900: oklch(20.5% 0 none);
  --color-neutral-950: oklch(14.5% 0 none);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        neutral: {
          50: '#fafafa',
          100: '#f5f5f5',
          200: '#e5e5e5',
          300: '#d4d4d4',
          400: '#a3a3a3',
          500: '#737373',
          600: '#525252',
          700: '#404040',
          800: '#262626',
          900: '#171717',
          950: '#0a0a0a'
        }
      }
    }
  }
}

Proměnné CSS (HEX)

:root {
  --neutral-50: #FAFAFA;
  --neutral-100: #F5F5F5;
  --neutral-200: #E5E5E5;
  --neutral-300: #D4D4D4;
  --neutral-400: #A3A3A3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-950: #0A0A0A;
}

Další barvy Tailwindu

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

Časté otázky

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

V Tailwindu v3 je neutral-500 #737373, tedy rgb(115, 115, 115). V Tailwindu v4 je definovaná jako oklch(55.6% 0 none).

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

Pomocí tříd jako bg-neutral-500, text-neutral-700 nebo border-neutral-200. V Tailwindu v4 můžeš ve vlastním CSS použít i proměnnou CSS var(--color-neutral-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.