Color pink de Tailwind CSS

Los 11 tonos del color pink de Tailwind CSS, del pink-50 (el más claro) al pink-950 (el más oscuro). Haz clic en cualquier valor para copiarlo.

Tonos de pink

HEX y RGB de Tailwind v3; OKLCH de Tailwind v4. Haz clic en un valor para copiarlo.

pink-50

pink-100

pink-200

pink-300

pink-400

pink-500

pink-600

pink-700

pink-800

pink-900

pink-950

Copiar toda la paleta

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'
        }
      }
    }
  }
}

Variables 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;
}

Otros colores de Tailwind

slate gray zinc neutral stone red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple fuchsia rose

Preguntas frecuentes

¿Cuál es el código HEX de Tailwind pink-500?

En Tailwind v3, pink-500 es #EC4899, es decir rgb(236, 72, 153). En Tailwind v4 se define como oklch(65.6% 0.241 354.308).

¿Cómo uso Tailwind pink en mi proyecto?

Con clases como bg-pink-500, text-pink-700 o border-pink-200. En Tailwind v4 también puedes usar la variable CSS var(--color-pink-500) en tu propio CSS.

Otros frameworks

Tailwind CSS, Material Design y Bootstrap son marcas de sus respectivos dueños. Los valores salen de su documentación y sus paquetes públicos: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.