פלטות צבעים

הצבע sky ב-Tailwind CSS

11 הגוונים של sky ב-Tailwind CSS, מ-sky-50 הבהיר ביותר עד sky-950 הכהה ביותר. לחץ על ערך כדי להעתיק אותו.

הגוונים של sky

ערכי HEX ו-RGB מ-Tailwind v3, וערכי OKLCH מ-Tailwind v4. לחץ על ערך כדי להעתיק אותו.

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

העתקת הפלטה המלאה

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

צבעים נוספים ב-Tailwind

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanblueindigovioletpurplefuchsiapinkrose

שאלות נפוצות

מהו קוד ה-HEX של Tailwind sky-500?

ב-Tailwind v3 הערך של sky-500 הוא ⁦#0EA5E9⁩, כלומר rgb(14, 165, 233). ב-Tailwind v4 הוא מוגדר כ-oklch(68.5% 0.169 237.323).

איך משתמשים בצבע sky של Tailwind בפרויקט?

השתמש במחלקות כמו bg-sky-500, text-sky-700 או border-sky-200. ב-Tailwind v4 אפשר להשתמש גם במשתנה ה-CSS var(--color-sky-500) בקבצי ה-CSS שלך.

פריימוורקים נוספים

פלטת הצבעים של Tailwind CSSפלטת הצבעים של Material Designפלטת הצבעים של Bootstrapפלטות צבעים של פריימוורקים

Tailwind CSS, Material Design ו-Bootstrap הם סימנים מסחריים של בעליהם. הערכים לקוחים מהתיעוד הרשמי ומהחבילות שפורסמו של כל פרויקט: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.