הצבע 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.