Color lime de Tailwind CSS

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

Tonos de lime

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

lime-50

lime-100

lime-200

lime-300

lime-400

lime-500

lime-600

lime-700

lime-800

lime-900

lime-950

Copiar toda la paleta

Tailwind v4 (CSS, @theme)

@theme {
  --color-lime-50: oklch(98.6% 0.031 120.757);
  --color-lime-100: oklch(96.7% 0.067 122.328);
  --color-lime-200: oklch(93.8% 0.127 124.321);
  --color-lime-300: oklch(89.7% 0.196 126.665);
  --color-lime-400: oklch(84.1% 0.238 128.85);
  --color-lime-500: oklch(76.8% 0.233 130.85);
  --color-lime-600: oklch(64.8% 0.2 131.684);
  --color-lime-700: oklch(53.2% 0.157 131.589);
  --color-lime-800: oklch(45.3% 0.124 130.933);
  --color-lime-900: oklch(40.5% 0.101 131.063);
  --color-lime-950: oklch(27.4% 0.072 132.109);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        lime: {
          50: '#f7fee7',
          100: '#ecfccb',
          200: '#d9f99d',
          300: '#bef264',
          400: '#a3e635',
          500: '#84cc16',
          600: '#65a30d',
          700: '#4d7c0f',
          800: '#3f6212',
          900: '#365314',
          950: '#1a2e05'
        }
      }
    }
  }
}

Variables CSS (HEX)

:root {
  --lime-50: #F7FEE7;
  --lime-100: #ECFCCB;
  --lime-200: #D9F99D;
  --lime-300: #BEF264;
  --lime-400: #A3E635;
  --lime-500: #84CC16;
  --lime-600: #65A30D;
  --lime-700: #4D7C0F;
  --lime-800: #3F6212;
  --lime-900: #365314;
  --lime-950: #1A2E05;
}

Otros colores de Tailwind

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

Preguntas frecuentes

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

En Tailwind v3, lime-500 es #84CC16, es decir rgb(132, 204, 22). En Tailwind v4 se define como oklch(76.8% 0.233 130.85).

¿Cómo uso Tailwind lime en mi proyecto?

Con clases como bg-lime-500, text-lime-700 o border-lime-200. En Tailwind v4 también puedes usar la variable CSS var(--color-lime-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.