Färgpaletter

Tailwind CSS-färgen pink

De 11 nyanserna av Tailwind CSS-färgen pink, från pink-50 (ljusast) till pink-950 (mörkast). Klicka på ett värde för att kopiera det.

Nyanser av pink

HEX och RGB från Tailwind v3; OKLCH från Tailwind v4. Klicka på ett värde för att kopiera det.

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

Kopiera hela paletten

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

Fler Tailwind-färger

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiarose

Vanliga frågor

Vad är HEX-koden för Tailwind pink-500?

I Tailwind v3 är pink-500 #EC4899, alltså rgb(236, 72, 153). I Tailwind v4 definieras den som oklch(65.6% 0.241 354.308).

Hur använder jag Tailwind pink i mitt projekt?

Med klasser som bg-pink-500, text-pink-700 eller border-pink-200. I Tailwind v4 kan du också använda CSS-variabeln var(--color-pink-500) i din egen CSS.

Andra ramverk

Tailwind CSS färgpalettMaterial Design färgpalettBootstraps färgpalettFärgpaletter från ramverk

Tailwind CSS, Material Design och Bootstrap är varumärken som tillhör respektive ägare. Värdena kommer från deras dokumentation och offentliga paket: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.