لوحات الألوان

لون 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).

كيف أستخدم لون Tailwind sky في مشروعي؟

استخدم فئات مثل 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.