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

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

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

Αποχρώσεις pink

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

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

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

Tailwind v4 (CSS, @theme)

@theme {
  --color-pink-50: oklch(97.1% 0.014 343.198);
  --color-pink-100: oklch(94.8% 0.028 342.258);
  --color-pink-200: oklch(89.9% 0.061 343.231);
  --color-pink-300: oklch(82.3% 0.12 346.018);
  --color-pink-400: oklch(71.8% 0.202 349.761);
  --color-pink-500: oklch(65.6% 0.241 354.308);
  --color-pink-600: oklch(59.2% 0.249 0.584);
  --color-pink-700: oklch(52.5% 0.223 3.958);
  --color-pink-800: oklch(45.9% 0.187 3.815);
  --color-pink-900: oklch(40.8% 0.153 2.432);
  --color-pink-950: oklch(28.4% 0.109 3.907);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        pink: {
          50: '#fdf2f8',
          100: '#fce7f3',
          200: '#fbcfe8',
          300: '#f9a8d4',
          400: '#f472b6',
          500: '#ec4899',
          600: '#db2777',
          700: '#be185d',
          800: '#9d174d',
          900: '#831843',
          950: '#500724'
        }
      }
    }
  }
}

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

:root {
  --pink-50: #FDF2F8;
  --pink-100: #FCE7F3;
  --pink-200: #FBCFE8;
  --pink-300: #F9A8D4;
  --pink-400: #F472B6;
  --pink-500: #EC4899;
  --pink-600: #DB2777;
  --pink-700: #BE185D;
  --pink-800: #9D174D;
  --pink-900: #831843;
  --pink-950: #500724;
}

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

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiarose

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

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

Στο Tailwind v3 το pink-500 είναι #EC4899, δηλαδή rgb(236, 72, 153). Στο Tailwind v4 ορίζεται ως oklch(65.6% 0.241 354.308).

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

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