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

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

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

Αποχρώσεις fuchsia

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

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

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

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

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplepinkrose

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

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

Στο Tailwind v3 το fuchsia-500 είναι #D946EF, δηλαδή rgb(217, 70, 239). Στο Tailwind v4 ορίζεται ως oklch(66.7% 0.295 322.15).

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

Με κλάσεις όπως bg-fuchsia-500, text-fuchsia-700 ή border-fuchsia-200. Στο Tailwind v4 μπορείς να χρησιμοποιήσεις και τη μεταβλητή CSS var(--color-fuchsia-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.