Color sky de Tailwind CSS

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

Tonos de sky

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

sky-50

sky-100

sky-200

sky-300

sky-400

sky-500

sky-600

sky-700

sky-800

sky-900

sky-950

Copiar toda la paleta

Tailwind v4 (CSS, @theme)

@theme {
  --color-sky-50: oklch(97.7% 0.013 236.62);
  --color-sky-100: oklch(95.1% 0.026 236.824);
  --color-sky-200: oklch(90.1% 0.058 230.902);
  --color-sky-300: oklch(82.8% 0.111 230.318);
  --color-sky-400: oklch(74.6% 0.16 232.661);
  --color-sky-500: oklch(68.5% 0.169 237.323);
  --color-sky-600: oklch(58.8% 0.158 241.966);
  --color-sky-700: oklch(50% 0.134 242.749);
  --color-sky-800: oklch(44.3% 0.11 240.79);
  --color-sky-900: oklch(39.1% 0.09 240.876);
  --color-sky-950: oklch(29.3% 0.066 243.157);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        sky: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
          950: '#082f49'
        }
      }
    }
  }
}

Variables CSS (HEX)

:root {
  --sky-50: #F0F9FF;
  --sky-100: #E0F2FE;
  --sky-200: #BAE6FD;
  --sky-300: #7DD3FC;
  --sky-400: #38BDF8;
  --sky-500: #0EA5E9;
  --sky-600: #0284C7;
  --sky-700: #0369A1;
  --sky-800: #075985;
  --sky-900: #0C4A6E;
  --sky-950: #082F49;
}

Otros colores de Tailwind

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

Preguntas frecuentes

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

En Tailwind v3, sky-500 es #0EA5E9, es decir rgb(14, 165, 233). En Tailwind v4 se define como oklch(68.5% 0.169 237.323).

¿Cómo uso Tailwind sky en mi proyecto?

Con clases como bg-sky-500, text-sky-700 o border-sky-200. En Tailwind v4 también puedes usar la variable CSS var(--color-sky-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.