Farbpaletten

Tailwind-CSS-Farbe pink

Die 11 Abstufungen der Tailwind-CSS-Farbe pink, von pink-50 (am hellsten) bis pink-950 (am dunkelsten). Klicke auf einen Wert, um ihn zu kopieren.

Abstufungen von pink

HEX und RGB aus Tailwind v3, OKLCH aus Tailwind v4. Klicke auf einen Wert, um ihn zu kopieren.

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

Ganze Palette kopieren

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-Variablen (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;
}

Weitere Tailwind-Farben

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiarose

Häufige Fragen

Wie lautet der HEX-Code von Tailwind pink-500?

In Tailwind v3 ist pink-500 #EC4899, also rgb(236, 72, 153). In Tailwind v4 ist es als oklch(65.6% 0.241 354.308) definiert.

Wie verwende ich Tailwind pink in meinem Projekt?

Mit Klassen wie bg-pink-500, text-pink-700 oder border-pink-200. In Tailwind v4 kannst du in deinem eigenen CSS auch die CSS-Variable var(--color-pink-500) verwenden.

Weitere Frameworks

Tailwind-CSS-FarbpaletteMaterial-Design-FarbpaletteBootstrap-FarbpaletteFarbpaletten von Frameworks

Tailwind CSS, Material Design und Bootstrap sind Marken ihrer jeweiligen Inhaber. Die Werte stammen aus ihrer Dokumentation und ihren öffentlichen Paketen: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.