Warna purple Tailwind CSS

11 nuansa warna purple Tailwind CSS, dari purple-50 (paling terang) hingga purple-950 (paling gelap). Klik nilai mana pun untuk menyalinnya.

Nuansa purple

HEX dan RGB dari Tailwind v3; OKLCH dari Tailwind v4. Klik sebuah nilai untuk menyalinnya.

purple-50

purple-100

purple-200

purple-300

purple-400

purple-500

purple-600

purple-700

purple-800

purple-900

purple-950

Salin seluruh palet

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'
        }
      }
    }
  }
}

Variabel 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;
}

Warna Tailwind lainnya

slate gray zinc neutral stone red orange amber yellow lime green emerald teal cyan sky blue indigo violet fuchsia pink rose

Pertanyaan umum

Apa kode HEX Tailwind purple-500?

Di Tailwind v3, purple-500 adalah #A855F7, atau rgb(168, 85, 247). Di Tailwind v4, warna ini didefinisikan sebagai oklch(62.7% 0.265 303.9).

Bagaimana cara memakai Tailwind purple di proyek saya?

Dengan class seperti bg-purple-500, text-purple-700, atau border-purple-200. Di Tailwind v4, Anda juga bisa memakai variabel CSS var(--color-purple-500) di CSS Anda sendiri.

Framework lainnya

Tailwind CSS, Material Design, dan Bootstrap adalah merek dagang dari pemiliknya masing-masing. Nilai-nilainya berasal dari dokumentasi dan paket publik mereka: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.