لون emerald في Tailwind CSS

درجات emerald

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

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

Tailwind v4 (CSS، @theme)

نسخ@theme {
  --color-emerald-50: oklch(97.9% 0.021 166.113);
  --color-emerald-100: oklch(95% 0.052 163.051);
  --color-emerald-200: oklch(90.5% 0.093 164.15);
  --color-emerald-300: oklch(84.5% 0.143 164.978);
  --color-emerald-400: oklch(76.5% 0.177 163.223);
  --color-emerald-500: oklch(69.6% 0.17 162.48);
  --color-emerald-600: oklch(59.6% 0.145 163.225);
  --color-emerald-700: oklch(50.8% 0.118 165.612);
  --color-emerald-800: oklch(43.2% 0.095 166.913);
  --color-emerald-900: oklch(37.8% 0.077 168.94);
  --color-emerald-950: oklch(26.2% 0.051 172.552);
}

Tailwind v3 (tailwind.config.js)

نسخmodule.exports = {
  theme: {
    extend: {
      colors: {
        emerald: {
          50: '⁦#ecfdf5⁩',
          100: '⁦#d1fae5⁩',
          200: '⁦#a7f3d0⁩',
          300: '⁦#6ee7b7⁩',
          400: '⁦#34d399⁩',
          500: '⁦#10b981⁩',
          600: '⁦#059669⁩',
          700: '⁦#047857⁩',
          800: '⁦#065f46⁩',
          900: '⁦#064e3b⁩',
          950: '⁦#022c22⁩'
        }
      }
    }
  }
}

متغيرات CSS (HEX)

نسخ:root {
  --emerald-50: ⁦#ECFDF5⁩;
  --emerald-100: ⁦#D1FAE5⁩;
  --emerald-200: ⁦#A7F3D0⁩;
  --emerald-300: ⁦#6EE7B7⁩;
  --emerald-400: ⁦#34D399⁩;
  --emerald-500: ⁦#10B981⁩;
  --emerald-600: ⁦#059669⁩;
  --emerald-700: ⁦#047857⁩;
  --emerald-800: ⁦#065F46⁩;
  --emerald-900: ⁦#064E3B⁩;
  --emerald-950: ⁦#022C22⁩;
}

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

أطر عمل أخرى

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.