הצבע fuchsia ב-Tailwind CSS

הגוונים של fuchsia

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

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

Tailwind v4 (CSS, @theme)

העתקה@theme {
  --color-fuchsia-50: oklch(97.7% 0.017 320.058);
  --color-fuchsia-100: oklch(95.2% 0.037 318.852);
  --color-fuchsia-200: oklch(90.3% 0.076 319.62);
  --color-fuchsia-300: oklch(83.3% 0.145 321.434);
  --color-fuchsia-400: oklch(74% 0.238 322.16);
  --color-fuchsia-500: oklch(66.7% 0.295 322.15);
  --color-fuchsia-600: oklch(59.1% 0.293 322.896);
  --color-fuchsia-700: oklch(51.8% 0.253 323.949);
  --color-fuchsia-800: oklch(45.2% 0.211 324.591);
  --color-fuchsia-900: oklch(40.1% 0.17 325.612);
  --color-fuchsia-950: oklch(29.3% 0.136 325.661);
}

Tailwind v3 (tailwind.config.js)

העתקהmodule.exports = {
  theme: {
    extend: {
      colors: {
        fuchsia: {
          50: '⁦#fdf4ff⁩',
          100: '⁦#fae8ff⁩',
          200: '⁦#f5d0fe⁩',
          300: '⁦#f0abfc⁩',
          400: '⁦#e879f9⁩',
          500: '⁦#d946ef⁩',
          600: '⁦#c026d3⁩',
          700: '⁦#a21caf⁩',
          800: '⁦#86198f⁩',
          900: '⁦#701a75⁩',
          950: '⁦#4a044e⁩'
        }
      }
    }
  }
}

משתני CSS (HEX)

העתקה:root {
  --fuchsia-50: ⁦#FDF4FF⁩;
  --fuchsia-100: ⁦#FAE8FF⁩;
  --fuchsia-200: ⁦#F5D0FE⁩;
  --fuchsia-300: ⁦#F0ABFC⁩;
  --fuchsia-400: ⁦#E879F9⁩;
  --fuchsia-500: ⁦#D946EF⁩;
  --fuchsia-600: ⁦#C026D3⁩;
  --fuchsia-700: ⁦#A21CAF⁩;
  --fuchsia-800: ⁦#86198F⁩;
  --fuchsia-900: ⁦#701A75⁩;
  --fuchsia-950: ⁦#4A044E⁩;
}

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