Couleur gray de Tailwind CSS

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

Nuances de gray

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

gray-50

gray-100

gray-200

gray-300

gray-400

gray-500

gray-600

gray-700

gray-800

gray-900

gray-950

Copier toute la palette

Tailwind v4 (CSS, @theme)

@theme {
  --color-gray-50: oklch(98.5% 0.002 247.839);
  --color-gray-100: oklch(96.7% 0.003 264.542);
  --color-gray-200: oklch(92.8% 0.006 264.531);
  --color-gray-300: oklch(87.2% 0.01 258.338);
  --color-gray-400: oklch(70.7% 0.022 261.325);
  --color-gray-500: oklch(55.1% 0.027 264.364);
  --color-gray-600: oklch(44.6% 0.03 256.802);
  --color-gray-700: oklch(37.3% 0.034 259.733);
  --color-gray-800: oklch(27.8% 0.033 256.848);
  --color-gray-900: oklch(21% 0.034 264.665);
  --color-gray-950: oklch(13% 0.028 261.692);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        gray: {
          50: '#f9fafb',
          100: '#f3f4f6',
          200: '#e5e7eb',
          300: '#d1d5db',
          400: '#9ca3af',
          500: '#6b7280',
          600: '#4b5563',
          700: '#374151',
          800: '#1f2937',
          900: '#111827',
          950: '#030712'
        }
      }
    }
  }
}

Variables CSS (HEX)

:root {
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;
  --gray-950: #030712;
}

Autres couleurs Tailwind

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

Questions fréquentes

Quel est le code HEX de Tailwind gray-500 ?

Dans Tailwind v3, gray-500 vaut #6B7280, soit rgb(107, 114, 128). Dans Tailwind v4, il est défini comme oklch(55.1% 0.027 264.364).

Comment utiliser Tailwind gray dans mon projet ?

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