Färgpaletter

Tailwind CSS-färgen sky

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

Nyanser av sky

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

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

Kopiera hela paletten

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

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

Fler Tailwind-färger

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanblueindigovioletpurplefuchsiapinkrose

Vanliga frågor

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

I Tailwind v3 är sky-500 #0EA5E9, alltså rgb(14, 165, 233). I Tailwind v4 definieras den som oklch(68.5% 0.169 237.323).

Hur använder jag Tailwind sky i mitt projekt?

Med klasser som bg-sky-500, text-sky-700 eller border-sky-200. I Tailwind v4 kan du också använda CSS-variabeln var(--color-sky-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.