لون indigo في Tailwind CSS

درجات indigo

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

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

Tailwind v4 (CSS، @theme)

نسخ@theme {
  --color-indigo-50: oklch(96.2% 0.018 272.314);
  --color-indigo-100: oklch(93% 0.034 272.788);
  --color-indigo-200: oklch(87% 0.065 274.039);
  --color-indigo-300: oklch(78.5% 0.115 274.713);
  --color-indigo-400: oklch(67.3% 0.182 276.935);
  --color-indigo-500: oklch(58.5% 0.233 277.117);
  --color-indigo-600: oklch(51.1% 0.262 276.966);
  --color-indigo-700: oklch(45.7% 0.24 277.023);
  --color-indigo-800: oklch(39.8% 0.195 277.366);
  --color-indigo-900: oklch(35.9% 0.144 278.697);
  --color-indigo-950: oklch(25.7% 0.09 281.288);
}

Tailwind v3 (tailwind.config.js)

نسخmodule.exports = {
  theme: {
    extend: {
      colors: {
        indigo: {
          50: '⁦#eef2ff⁩',
          100: '⁦#e0e7ff⁩',
          200: '⁦#c7d2fe⁩',
          300: '⁦#a5b4fc⁩',
          400: '⁦#818cf8⁩',
          500: '⁦#6366f1⁩',
          600: '⁦#4f46e5⁩',
          700: '⁦#4338ca⁩',
          800: '⁦#3730a3⁩',
          900: '⁦#312e81⁩',
          950: '⁦#1e1b4b⁩'
        }
      }
    }
  }
}

متغيرات CSS (HEX)

نسخ:root {
  --indigo-50: ⁦#EEF2FF⁩;
  --indigo-100: ⁦#E0E7FF⁩;
  --indigo-200: ⁦#C7D2FE⁩;
  --indigo-300: ⁦#A5B4FC⁩;
  --indigo-400: ⁦#818CF8⁩;
  --indigo-500: ⁦#6366F1⁩;
  --indigo-600: ⁦#4F46E5⁩;
  --indigo-700: ⁦#4338CA⁩;
  --indigo-800: ⁦#3730A3⁩;
  --indigo-900: ⁦#312E81⁩;
  --indigo-950: ⁦#1E1B4B⁩;
}

ألوان أخرى في 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.