Culoarea neutral din Tailwind CSS

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

Nuanțe de neutral

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

neutral-50

neutral-100

neutral-200

neutral-300

neutral-400

neutral-500

neutral-600

neutral-700

neutral-800

neutral-900

neutral-950

Copiază toată paleta

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

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

Alte culori Tailwind

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

Întrebări frecvente

Care este codul HEX pentru Tailwind neutral-500?

În Tailwind v3, neutral-500 este #737373, adică rgb(115, 115, 115). În Tailwind v4 este definit ca oklch(55.6% 0 none).

Cum folosesc Tailwind neutral în proiectul meu?

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