Χρωματικές παλέτες

Το χρώμα purple στο Tailwind CSS

Οι 11 αποχρώσεις του purple στο Tailwind CSS, από purple-50 (η πιο ανοιχτή) έως purple-950 (η πιο σκούρα). Κάνε κλικ σε όποια τιμή θέλεις για να την αντιγράψεις.

Αποχρώσεις purple

HEX και RGB από το Tailwind v3· OKLCH από το Tailwind v4. Κάνε κλικ σε μια τιμή για να την αντιγράψεις.

purple-50
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
purple-900
purple-950

Αντιγραφή όλης της παλέτας

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

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletfuchsiapinkrose

Συχνές ερωτήσεις

Ποιος είναι ο κωδικός HEX του Tailwind purple-500;

Στο Tailwind v3 το purple-500 είναι #A855F7, δηλαδή rgb(168, 85, 247). Στο Tailwind v4 ορίζεται ως oklch(62.7% 0.265 303.9).

Πώς χρησιμοποιώ το Tailwind purple στο έργο μου;

Με κλάσεις όπως bg-purple-500, text-purple-700 ή border-purple-200. Στο Tailwind v4 μπορείς να χρησιμοποιήσεις και τη μεταβλητή CSS var(--color-purple-500) στο δικό σου CSS.

Άλλα framework

Η χρωματική παλέτα του Tailwind CSSΗ χρωματική παλέτα του Material DesignΗ χρωματική παλέτα του BootstrapΧρωματικές παλέτες των framework

Τα 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.