Farbpaletten

Tailwind-CSS-Farbe sky

Die 11 Abstufungen der Tailwind-CSS-Farbe sky, von sky-50 (am hellsten) bis sky-950 (am dunkelsten). Klicke auf einen Wert, um ihn zu kopieren.

Abstufungen von sky

HEX und RGB aus Tailwind v3, OKLCH aus Tailwind v4. Klicke auf einen Wert, um ihn zu kopieren.

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

Ganze Palette kopieren

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

Weitere Tailwind-Farben

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanblueindigovioletpurplefuchsiapinkrose

Häufige Fragen

Wie lautet der HEX-Code von Tailwind sky-500?

In Tailwind v3 ist sky-500 #0EA5E9, also rgb(14, 165, 233). In Tailwind v4 ist es als oklch(68.5% 0.169 237.323) definiert.

Wie verwende ich Tailwind sky in meinem Projekt?

Mit Klassen wie bg-sky-500, text-sky-700 oder border-sky-200. In Tailwind v4 kannst du in deinem eigenen CSS auch die CSS-Variable var(--color-sky-500) verwenden.

Weitere Frameworks

Tailwind-CSS-FarbpaletteMaterial-Design-FarbpaletteBootstrap-FarbpaletteFarbpaletten von Frameworks

Tailwind CSS, Material Design und Bootstrap sind Marken ihrer jeweiligen Inhaber. Die Werte stammen aus ihrer Dokumentation und ihren öffentlichen Paketen: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.