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

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

Αποχρώσεις violet

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

violet-50

violet-100

violet-200

violet-300

violet-400

violet-500

violet-600

violet-700

violet-800

violet-900

violet-950

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

Tailwind v4 (CSS, @theme)

@theme {
  --color-violet-50: oklch(96.9% 0.016 293.756);
  --color-violet-100: oklch(94.3% 0.029 294.588);
  --color-violet-200: oklch(89.4% 0.057 293.283);
  --color-violet-300: oklch(81.1% 0.111 293.571);
  --color-violet-400: oklch(70.2% 0.183 293.541);
  --color-violet-500: oklch(60.6% 0.25 292.717);
  --color-violet-600: oklch(54.1% 0.281 293.009);
  --color-violet-700: oklch(49.1% 0.27 292.581);
  --color-violet-800: oklch(43.2% 0.232 292.759);
  --color-violet-900: oklch(38% 0.189 293.745);
  --color-violet-950: oklch(28.3% 0.141 291.089);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        violet: {
          50: '#f5f3ff',
          100: '#ede9fe',
          200: '#ddd6fe',
          300: '#c4b5fd',
          400: '#a78bfa',
          500: '#8b5cf6',
          600: '#7c3aed',
          700: '#6d28d9',
          800: '#5b21b6',
          900: '#4c1d95',
          950: '#2e1065'
        }
      }
    }
  }
}

Μεταβλητές CSS (HEX)

:root {
  --violet-50: #F5F3FF;
  --violet-100: #EDE9FE;
  --violet-200: #DDD6FE;
  --violet-300: #C4B5FD;
  --violet-400: #A78BFA;
  --violet-500: #8B5CF6;
  --violet-600: #7C3AED;
  --violet-700: #6D28D9;
  --violet-800: #5B21B6;
  --violet-900: #4C1D95;
  --violet-950: #2E1065;
}

Άλλα χρώματα του Tailwind

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

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

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

Στο Tailwind v3 το violet-500 είναι #8B5CF6, δηλαδή rgb(139, 92, 246). Στο Tailwind v4 ορίζεται ως oklch(60.6% 0.25 292.717).

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

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

Άλλα 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.