Farbpaletten

Tailwind-CSS-Farbe lime

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

Abstufungen von lime

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

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

Ganze Palette kopieren

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

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

Weitere Tailwind-Farben

slategrayzincneutralstoneredorangeamberyellowgreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose

Häufige Fragen

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

In Tailwind v3 ist lime-500 #84CC16, also rgb(132, 204, 22). In Tailwind v4 ist es als oklch(76.8% 0.233 130.85) definiert.

Wie verwende ich Tailwind lime in meinem Projekt?

Mit Klassen wie bg-lime-500, text-lime-700 oder border-lime-200. In Tailwind v4 kannst du in deinem eigenen CSS auch die CSS-Variable var(--color-lime-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.