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

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

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

Αποχρώσεις green

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

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

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

Tailwind v4 (CSS, @theme)

@theme {
  --color-green-50: oklch(98.2% 0.018 155.826);
  --color-green-100: oklch(96.2% 0.044 156.743);
  --color-green-200: oklch(92.5% 0.084 155.995);
  --color-green-300: oklch(87.1% 0.15 154.449);
  --color-green-400: oklch(79.2% 0.209 151.711);
  --color-green-500: oklch(72.3% 0.219 149.579);
  --color-green-600: oklch(62.7% 0.194 149.214);
  --color-green-700: oklch(52.7% 0.154 150.069);
  --color-green-800: oklch(44.8% 0.119 151.328);
  --color-green-900: oklch(39.3% 0.095 152.535);
  --color-green-950: oklch(26.6% 0.065 152.934);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        green: {
          50: '#f0fdf4',
          100: '#dcfce7',
          200: '#bbf7d0',
          300: '#86efac',
          400: '#4ade80',
          500: '#22c55e',
          600: '#16a34a',
          700: '#15803d',
          800: '#166534',
          900: '#14532d',
          950: '#052e16'
        }
      }
    }
  }
}

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

:root {
  --green-50: #F0FDF4;
  --green-100: #DCFCE7;
  --green-200: #BBF7D0;
  --green-300: #86EFAC;
  --green-400: #4ADE80;
  --green-500: #22C55E;
  --green-600: #16A34A;
  --green-700: #15803D;
  --green-800: #166534;
  --green-900: #14532D;
  --green-950: #052E16;
}

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

slategrayzincneutralstoneredorangeamberyellowlimeemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose

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

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

Στο Tailwind v3 το green-500 είναι #22C55E, δηλαδή rgb(34, 197, 94). Στο Tailwind v4 ορίζεται ως oklch(72.3% 0.219 149.579).

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

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