Farbpaletten

Tailwind-CSS-Farbe blue

Die 11 Abstufungen der Tailwind-CSS-Farbe blue, von blue-50 (am hellsten) bis blue-950 (am dunkelsten). Klicke auf einen Wert, um ihn zu kopieren.

Abstufungen von blue

HEX und RGB aus Tailwind v3, OKLCH aus Tailwind v4. Klicke auf einen Wert, um ihn zu kopieren.

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

Ganze Palette kopieren

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

CSS-Variablen (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;
}

Weitere Tailwind-Farben

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyindigovioletpurplefuchsiapinkrose

Häufige Fragen

Wie lautet der HEX-Code von Tailwind blue-500?

In Tailwind v3 ist blue-500 #3B82F6, also rgb(59, 130, 246). In Tailwind v4 ist es als oklch(62.3% 0.214 259.815) definiert.

Wie verwende ich Tailwind blue in meinem Projekt?

Mit Klassen wie bg-blue-500, text-blue-700 oder border-blue-200. In Tailwind v4 kannst du in deinem eigenen CSS auch die CSS-Variable var(--color-blue-500) verwenden.

Weitere Frameworks

Tailwind-CSS-FarbpaletteMaterial-Design-FarbpaletteBootstrap-FarbpaletteFarbpaletten von Frameworks

Tailwind CSS, Material Design und Bootstrap sind Marken ihrer jeweiligen Inhaber. Die Werte stammen aus ihrer Dokumentation und ihren öffentlichen Paketen: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.