Palette de couleurs

Couleur blue de Tailwind CSS

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

Nuances de blue

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

blue-50
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
blue-950

Copier toute la palette

Tailwind v4 (CSS, @theme)

@theme {
  --color-blue-50: oklch(97% 0.014 254.604);
  --color-blue-100: oklch(93.2% 0.032 255.585);
  --color-blue-200: oklch(88.2% 0.059 254.128);
  --color-blue-300: oklch(80.9% 0.105 251.813);
  --color-blue-400: oklch(70.7% 0.165 254.624);
  --color-blue-500: oklch(62.3% 0.214 259.815);
  --color-blue-600: oklch(54.6% 0.245 262.881);
  --color-blue-700: oklch(48.8% 0.243 264.376);
  --color-blue-800: oklch(42.4% 0.199 265.638);
  --color-blue-900: oklch(37.9% 0.146 265.522);
  --color-blue-950: oklch(28.2% 0.091 267.935);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e40af',
          900: '#1e3a8a',
          950: '#172554'
        }
      }
    }
  }
}

Variables CSS (HEX)

:root {
  --blue-50: #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-300: #93C5FD;
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --blue-800: #1E40AF;
  --blue-900: #1E3A8A;
  --blue-950: #172554;
}

Autres couleurs Tailwind

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyindigovioletpurplefuchsiapinkrose

Questions fréquentes

Quel est le code HEX de Tailwind blue-500 ?

Dans Tailwind v3, blue-500 vaut #3B82F6, soit rgb(59, 130, 246). Dans Tailwind v4, il est défini comme oklch(62.3% 0.214 259.815).

Comment utiliser Tailwind blue dans mon projet ?

Avec des classes comme bg-blue-500, text-blue-700 ou border-blue-200. Dans Tailwind v4, vous pouvez aussi utiliser la variable CSS var(--color-blue-500) dans votre propre CSS.

Autres frameworks

Palette de couleurs Tailwind CSSPalette de couleurs Material DesignPalette de couleurs BootstrapPalettes de couleurs des 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.