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

لون yellow في Tailwind CSS

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

درجات yellow

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

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

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

Tailwind v4 (CSS، @theme)

@theme {
  --color-yellow-50: oklch(98.7% 0.026 102.212);
  --color-yellow-100: oklch(97.3% 0.071 103.193);
  --color-yellow-200: oklch(94.5% 0.129 101.54);
  --color-yellow-300: oklch(90.5% 0.182 98.111);
  --color-yellow-400: oklch(85.2% 0.199 91.936);
  --color-yellow-500: oklch(79.5% 0.184 86.047);
  --color-yellow-600: oklch(68.1% 0.162 75.834);
  --color-yellow-700: oklch(55.4% 0.135 66.442);
  --color-yellow-800: oklch(47.6% 0.114 61.907);
  --color-yellow-900: oklch(42.1% 0.095 57.708);
  --color-yellow-950: oklch(28.6% 0.066 53.813);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        yellow: {
          50: '⁦#fefce8⁩',
          100: '⁦#fef9c3⁩',
          200: '⁦#fef08a⁩',
          300: '⁦#fde047⁩',
          400: '⁦#facc15⁩',
          500: '⁦#eab308⁩',
          600: '⁦#ca8a04⁩',
          700: '⁦#a16207⁩',
          800: '⁦#854d0e⁩',
          900: '⁦#713f12⁩',
          950: '⁦#422006⁩'
        }
      }
    }
  }
}

متغيرات CSS (HEX)

:root {
  --yellow-50: ⁦#FEFCE8⁩;
  --yellow-100: ⁦#FEF9C3⁩;
  --yellow-200: ⁦#FEF08A⁩;
  --yellow-300: ⁦#FDE047⁩;
  --yellow-400: ⁦#FACC15⁩;
  --yellow-500: ⁦#EAB308⁩;
  --yellow-600: ⁦#CA8A04⁩;
  --yellow-700: ⁦#A16207⁩;
  --yellow-800: ⁦#854D0E⁩;
  --yellow-900: ⁦#713F12⁩;
  --yellow-950: ⁦#422006⁩;
}

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

slategrayzincneutralstoneredorangeamberlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose

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

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

في Tailwind v3 قيمة yellow-500 هي ⁦#EAB308⁩، أي rgb(234, 179, 8). وفي Tailwind v4 يُعرَّف بالقيمة oklch(79.5% 0.184 86.047).

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

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