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

لون red في Tailwind CSS

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

درجات red

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

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

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

Tailwind v4 (CSS، @theme)

@theme {
  --color-red-50: oklch(97.1% 0.013 17.38);
  --color-red-100: oklch(93.6% 0.032 17.717);
  --color-red-200: oklch(88.5% 0.062 18.334);
  --color-red-300: oklch(80.8% 0.114 19.571);
  --color-red-400: oklch(70.4% 0.191 22.216);
  --color-red-500: oklch(63.7% 0.237 25.331);
  --color-red-600: oklch(57.7% 0.245 27.325);
  --color-red-700: oklch(50.5% 0.213 27.518);
  --color-red-800: oklch(44.4% 0.177 26.899);
  --color-red-900: oklch(39.6% 0.141 25.723);
  --color-red-950: oklch(25.8% 0.092 26.042);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        red: {
          50: '⁦#fef2f2⁩',
          100: '⁦#fee2e2⁩',
          200: '⁦#fecaca⁩',
          300: '⁦#fca5a5⁩',
          400: '⁦#f87171⁩',
          500: '⁦#ef4444⁩',
          600: '⁦#dc2626⁩',
          700: '⁦#b91c1c⁩',
          800: '⁦#991b1b⁩',
          900: '⁦#7f1d1d⁩',
          950: '⁦#450a0a⁩'
        }
      }
    }
  }
}

متغيرات CSS (HEX)

:root {
  --red-50: ⁦#FEF2F2⁩;
  --red-100: ⁦#FEE2E2⁩;
  --red-200: ⁦#FECACA⁩;
  --red-300: ⁦#FCA5A5⁩;
  --red-400: ⁦#F87171⁩;
  --red-500: ⁦#EF4444⁩;
  --red-600: ⁦#DC2626⁩;
  --red-700: ⁦#B91C1C⁩;
  --red-800: ⁦#991B1B⁩;
  --red-900: ⁦#7F1D1D⁩;
  --red-950: ⁦#450A0A⁩;
}

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

slategrayzincneutralstoneorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose

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

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

في Tailwind v3 قيمة red-500 هي ⁦#EF4444⁩، أي rgb(239, 68, 68). وفي Tailwind v4 يُعرَّف بالقيمة oklch(63.7% 0.237 25.331).

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

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