لون purple في Tailwind CSS

درجات purple

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

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

Tailwind v4 (CSS، @theme)

نسخ@theme {
  --color-purple-50: oklch(97.7% 0.014 308.299);
  --color-purple-100: oklch(94.6% 0.033 307.174);
  --color-purple-200: oklch(90.2% 0.063 306.703);
  --color-purple-300: oklch(82.7% 0.119 306.383);
  --color-purple-400: oklch(71.4% 0.203 305.504);
  --color-purple-500: oklch(62.7% 0.265 303.9);
  --color-purple-600: oklch(55.8% 0.288 302.321);
  --color-purple-700: oklch(49.6% 0.265 301.924);
  --color-purple-800: oklch(43.8% 0.218 303.724);
  --color-purple-900: oklch(38.1% 0.176 304.987);
  --color-purple-950: oklch(29.1% 0.149 302.717);
}

Tailwind v3 (tailwind.config.js)

نسخmodule.exports = {
  theme: {
    extend: {
      colors: {
        purple: {
          50: '⁦#faf5ff⁩',
          100: '⁦#f3e8ff⁩',
          200: '⁦#e9d5ff⁩',
          300: '⁦#d8b4fe⁩',
          400: '⁦#c084fc⁩',
          500: '⁦#a855f7⁩',
          600: '⁦#9333ea⁩',
          700: '⁦#7e22ce⁩',
          800: '⁦#6b21a8⁩',
          900: '⁦#581c87⁩',
          950: '⁦#3b0764⁩'
        }
      }
    }
  }
}

متغيرات CSS (HEX)

نسخ:root {
  --purple-50: ⁦#FAF5FF⁩;
  --purple-100: ⁦#F3E8FF⁩;
  --purple-200: ⁦#E9D5FF⁩;
  --purple-300: ⁦#D8B4FE⁩;
  --purple-400: ⁦#C084FC⁩;
  --purple-500: ⁦#A855F7⁩;
  --purple-600: ⁦#9333EA⁩;
  --purple-700: ⁦#7E22CE⁩;
  --purple-800: ⁦#6B21A8⁩;
  --purple-900: ⁦#581C87⁩;
  --purple-950: ⁦#3B0764⁩;
}

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