Color blue de Tailwind CSS

Los 11 tonos del color blue de Tailwind CSS, del blue-50 (el más claro) al blue-950 (el más oscuro). Haz clic en cualquier valor para copiarlo.

Tonos de blue

HEX y RGB de Tailwind v3; OKLCH de Tailwind v4. Haz clic en un valor para copiarlo.

blue-50

blue-100

blue-200

blue-300

blue-400

blue-500

blue-600

blue-700

blue-800

blue-900

blue-950

Copiar toda la paleta

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

Otros colores de Tailwind

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

Preguntas frecuentes

¿Cuál es el código HEX de Tailwind blue-500?

En Tailwind v3, blue-500 es #3B82F6, es decir rgb(59, 130, 246). En Tailwind v4 se define como oklch(62.3% 0.214 259.815).

¿Cómo uso Tailwind blue en mi proyecto?

Con clases como bg-blue-500, text-blue-700 o border-blue-200. En Tailwind v4 también puedes usar la variable CSS var(--color-blue-500) en tu propio CSS.

Otros frameworks

Tailwind CSS, Material Design y Bootstrap son marcas de sus respectivos dueños. Los valores salen de su documentación y sus paquetes públicos: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.