הצבע red ב-Tailwind CSS

הגוונים של red

ערכי HEX ו-RGB מ-Tailwind v3, וערכי OKLCH מ-Tailwind v4. לחץ על ערך כדי להעתיק אותו.

העתקת הפלטה המלאה

Tailwind v4 (CSS, @theme)

העתקה@theme {
  --color-red-50: oklch(97.1% 0.013 17.38);
  --color-red-100: oklch(93.6% 0.032 17.717);
  --color-red-200: oklch(88.5% 0.062 18.334);
  --color-red-300: oklch(80.8% 0.114 19.571);
  --color-red-400: oklch(70.4% 0.191 22.216);
  --color-red-500: oklch(63.7% 0.237 25.331);
  --color-red-600: oklch(57.7% 0.245 27.325);
  --color-red-700: oklch(50.5% 0.213 27.518);
  --color-red-800: oklch(44.4% 0.177 26.899);
  --color-red-900: oklch(39.6% 0.141 25.723);
  --color-red-950: oklch(25.8% 0.092 26.042);
}

Tailwind v3 (tailwind.config.js)

העתקהmodule.exports = {
  theme: {
    extend: {
      colors: {
        red: {
          50: '⁦#fef2f2⁩',
          100: '⁦#fee2e2⁩',
          200: '⁦#fecaca⁩',
          300: '⁦#fca5a5⁩',
          400: '⁦#f87171⁩',
          500: '⁦#ef4444⁩',
          600: '⁦#dc2626⁩',
          700: '⁦#b91c1c⁩',
          800: '⁦#991b1b⁩',
          900: '⁦#7f1d1d⁩',
          950: '⁦#450a0a⁩'
        }
      }
    }
  }
}

משתני CSS (HEX)

העתקה:root {
  --red-50: ⁦#FEF2F2⁩;
  --red-100: ⁦#FEE2E2⁩;
  --red-200: ⁦#FECACA⁩;
  --red-300: ⁦#FCA5A5⁩;
  --red-400: ⁦#F87171⁩;
  --red-500: ⁦#EF4444⁩;
  --red-600: ⁦#DC2626⁩;
  --red-700: ⁦#B91C1C⁩;
  --red-800: ⁦#991B1B⁩;
  --red-900: ⁦#7F1D1D⁩;
  --red-950: ⁦#450A0A⁩;
}

צבעים נוספים ב-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.