لون 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.