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

لون blue في Tailwind CSS

الدرجات الـ 11 للون blue في Tailwind CSS، من blue-50 الأفتح إلى blue-950 الأغمق. اضغط على أي قيمة لنسخها.

درجات blue

قيم HEX وRGB من Tailwind v3، وقيم OKLCH من Tailwind v4. اضغط على أي قيمة لنسخها.

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

انسخ اللوحة كاملة

Tailwind v4 (CSS، @theme)

@theme {
  --color-blue-50: oklch(97% 0.014 254.604);
  --color-blue-100: oklch(93.2% 0.032 255.585);
  --color-blue-200: oklch(88.2% 0.059 254.128);
  --color-blue-300: oklch(80.9% 0.105 251.813);
  --color-blue-400: oklch(70.7% 0.165 254.624);
  --color-blue-500: oklch(62.3% 0.214 259.815);
  --color-blue-600: oklch(54.6% 0.245 262.881);
  --color-blue-700: oklch(48.8% 0.243 264.376);
  --color-blue-800: oklch(42.4% 0.199 265.638);
  --color-blue-900: oklch(37.9% 0.146 265.522);
  --color-blue-950: oklch(28.2% 0.091 267.935);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          50: '⁦#eff6ff⁩',
          100: '⁦#dbeafe⁩',
          200: '⁦#bfdbfe⁩',
          300: '⁦#93c5fd⁩',
          400: '⁦#60a5fa⁩',
          500: '⁦#3b82f6⁩',
          600: '⁦#2563eb⁩',
          700: '⁦#1d4ed8⁩',
          800: '⁦#1e40af⁩',
          900: '⁦#1e3a8a⁩',
          950: '⁦#172554⁩'
        }
      }
    }
  }
}

متغيرات CSS (HEX)

:root {
  --blue-50: ⁦#EFF6FF⁩;
  --blue-100: ⁦#DBEAFE⁩;
  --blue-200: ⁦#BFDBFE⁩;
  --blue-300: ⁦#93C5FD⁩;
  --blue-400: ⁦#60A5FA⁩;
  --blue-500: ⁦#3B82F6⁩;
  --blue-600: ⁦#2563EB⁩;
  --blue-700: ⁦#1D4ED8⁩;
  --blue-800: ⁦#1E40AF⁩;
  --blue-900: ⁦#1E3A8A⁩;
  --blue-950: ⁦#172554⁩;
}

ألوان أخرى في Tailwind

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyindigovioletpurplefuchsiapinkrose

الأسئلة الشائعة

ما كود HEX للون Tailwind blue-500؟

في Tailwind v3 قيمة blue-500 هي ⁦#3B82F6⁩، أي rgb(59, 130, 246). وفي Tailwind v4 يُعرَّف بالقيمة oklch(62.3% 0.214 259.815).

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

استخدم فئات مثل bg-blue-500 أو text-blue-700 أو border-blue-200. وفي Tailwind v4 يمكنك أيضًا استخدام متغير CSS var(--color-blue-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.