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

لون amber في Tailwind CSS

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

درجات amber

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

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

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

Tailwind v4 (CSS، @theme)

@theme {
  --color-amber-50: oklch(98.7% 0.022 95.277);
  --color-amber-100: oklch(96.2% 0.059 95.617);
  --color-amber-200: oklch(92.4% 0.12 95.746);
  --color-amber-300: oklch(87.9% 0.169 91.605);
  --color-amber-400: oklch(82.8% 0.189 84.429);
  --color-amber-500: oklch(76.9% 0.188 70.08);
  --color-amber-600: oklch(66.6% 0.179 58.318);
  --color-amber-700: oklch(55.5% 0.163 48.998);
  --color-amber-800: oklch(47.3% 0.137 46.201);
  --color-amber-900: oklch(41.4% 0.112 45.904);
  --color-amber-950: oklch(27.9% 0.077 45.635);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        amber: {
          50: '⁦#fffbeb⁩',
          100: '⁦#fef3c7⁩',
          200: '⁦#fde68a⁩',
          300: '⁦#fcd34d⁩',
          400: '⁦#fbbf24⁩',
          500: '⁦#f59e0b⁩',
          600: '⁦#d97706⁩',
          700: '⁦#b45309⁩',
          800: '⁦#92400e⁩',
          900: '⁦#78350f⁩',
          950: '⁦#451a03⁩'
        }
      }
    }
  }
}

متغيرات CSS (HEX)

:root {
  --amber-50: ⁦#FFFBEB⁩;
  --amber-100: ⁦#FEF3C7⁩;
  --amber-200: ⁦#FDE68A⁩;
  --amber-300: ⁦#FCD34D⁩;
  --amber-400: ⁦#FBBF24⁩;
  --amber-500: ⁦#F59E0B⁩;
  --amber-600: ⁦#D97706⁩;
  --amber-700: ⁦#B45309⁩;
  --amber-800: ⁦#92400E⁩;
  --amber-900: ⁦#78350F⁩;
  --amber-950: ⁦#451A03⁩;
}

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

slategrayzincneutralstoneredorangeyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose

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

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

في Tailwind v3 قيمة amber-500 هي ⁦#F59E0B⁩، أي rgb(245, 158, 11). وفي Tailwind v4 يُعرَّف بالقيمة oklch(76.9% 0.188 70.08).

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

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