Fargepaletter

Tailwind CSS-fargen sky

De 11 nyansene av Tailwind CSS-fargen sky, fra sky-50 (lysest) til sky-950 (mørkest). Klikk på en verdi for å kopiere den.

Nyanser av sky

HEX og RGB fra Tailwind v3; OKLCH fra Tailwind v4. Klikk på en verdi for å kopiere den.

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

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

Flere Tailwind-farger

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanblueindigovioletpurplefuchsiapinkrose

Vanlige spørsmål

Hva er HEX-koden for Tailwind sky-500?

I Tailwind v3 er sky-500 #0EA5E9, altså rgb(14, 165, 233). I Tailwind v4 er den definert som oklch(68.5% 0.169 237.323).

Hvordan bruker jeg Tailwind sky i prosjektet mitt?

Med klasser som bg-sky-500, text-sky-700 eller border-sky-200. I Tailwind v4 kan du også bruke CSS-variabelen var(--color-sky-500) i din egen CSS.

Andre rammeverk

Tailwind CSS fargepalettMaterial Design fargepalettBootstraps fargepalettFargepaletter fra rammeverk

Tailwind CSS, Material Design og Bootstrap er varemerker som tilhører sine respektive eiere. Verdiene kommer fra dokumentasjonen og de offentlige pakkene deres: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.