Färgpaletter

Tailwind CSS-färgen blue

De 11 nyanserna av Tailwind CSS-färgen blue, från blue-50 (ljusast) till blue-950 (mörkast). Klicka på ett värde för att kopiera det.

Nyanser av blue

HEX och RGB från Tailwind v3; OKLCH från Tailwind v4. Klicka på ett värde för att kopiera det.

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

Kopiera hela paletten

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-variabler (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;
}

Fler Tailwind-färger

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyindigovioletpurplefuchsiapinkrose

Vanliga frågor

Vad är HEX-koden för Tailwind blue-500?

I Tailwind v3 är blue-500 #3B82F6, alltså rgb(59, 130, 246). I Tailwind v4 definieras den som oklch(62.3% 0.214 259.815).

Hur använder jag Tailwind blue i mitt projekt?

Med klasser som bg-blue-500, text-blue-700 eller border-blue-200. I Tailwind v4 kan du också använda CSS-variabeln var(--color-blue-500) i din egen CSS.

Andra ramverk

Tailwind CSS färgpalettMaterial Design färgpalettBootstraps färgpalettFärgpaletter från ramverk

Tailwind CSS, Material Design och Bootstrap är varumärken som tillhör respektive ägare. Värdena kommer från deras dokumentation och offentliga paket: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.