Tailwind Lime: 11 Shades, Contrast & Codes

Tailwind CSS 4.3.3

lime: current colors

11 shades with exact official OKLCH values. Use bg-lime-500, text-lime-500 or border-lime-500 in Tailwind. Wide-gamut colors are preserved; these are not the v3 hex values.

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

Source: Tailwind CSS 4.3.3 theme.css (MIT). Values are pinned to this release. Older v3 reference values below are kept separately for existing projects.

Scale

Every shade, 50 to 950

Each shade has a page of its own. Under each, white and black text on it; a bold figure passes 4.5:1.

50#F7FEE7
White
1.03
Black
20.28
100#ECFCCB
White
1.08
Black
19.35
200#D9F99D
White
1.16
Black
17.98
300#BEF264
White
1.30
Black
16.07
400#A3E635
White
1.50
Black
13.92
500#84CC16
White
1.97
Black
10.62
600#65A30D
White
3.08
Black
6.79
700#4D7C0F
White
4.99
Black
4.20
800#3F6212
White
7.07
Black
2.96
900#365314
White
8.73
Black
2.40
950#1A2E05
White
14.61
Black
1.43

Values

Hex, RGB and OKLCH values

The Tailwind CSS v3.4 values, with the contrast of white and black text on each shade.

Shade	HEX	RGB	OKLCH	White text	Black text
lime-50	`#F7FEE7`	`rgb(247, 254, 231)`	`oklch(0.986 0.031 120.8)`	1.03	20.28
lime-100	`#ECFCCB`	`rgb(236, 252, 203)`	`oklch(0.967 0.066 122.3)`	1.08	19.35
lime-200	`#D9F99D`	`rgb(217, 249, 157)`	`oklch(0.938 0.122 124.3)`	1.16	17.98
lime-300	`#BEF264`	`rgb(190, 242, 100)`	`oklch(0.897 0.179 126.7)`	1.30	16.07
lime-400	`#A3E635`	`rgb(163, 230, 53)`	`oklch(0.849 0.207 128.8)`	1.50	13.92
lime-500	`#84CC16`	`rgb(132, 204, 22)`	`oklch(0.768 0.204 130.8)`	1.97	10.62
lime-600	`#65A30D`	`rgb(101, 163, 13)`	`oklch(0.648 0.175 131.7)`	3.08	6.79
lime-700	`#4D7C0F`	`rgb(77, 124, 15)`	`oklch(0.532 0.141 131.6)`	4.99	4.20
lime-800	`#3F6212`	`rgb(63, 98, 18)`	`oklch(0.453 0.113 130.9)`	7.07	2.96
lime-900	`#365314`	`rgb(54, 83, 20)`	`oklch(0.405 0.096 131.1)`	8.73	2.40
lime-950	`#1A2E05`	`rgb(26, 46, 5)`	`oklch(0.274 0.069 132.1)`	14.61	1.43

Legibility

Which shades pass on each other

Every shade as text on every other shade. 38 of 110 pairings pass 4.5:1 for body text, and 10 more pass 3:1 for large text.

Text shade, then background shade	50	100	200	300	400	500	600	700	800	900	950
50	same shade	1.04	1.12	1.26	1.45	1.90	2.98	4.82	6.83	8.43	14.11
100	1.04	same shade	1.07	1.20	1.38	1.82	2.84	4.60	6.52	8.04	13.46
200	1.12	1.07	same shade	1.11	1.29	1.69	2.64	4.27	6.06	7.48	12.51
300	1.26	1.20	1.11	same shade	1.15	1.51	2.36	3.82	5.41	6.68	11.18
400	1.45	1.38	1.29	1.15	same shade	1.31	2.04	3.31	4.69	5.79	9.69
500	1.90	1.82	1.69	1.51	1.31	same shade	1.56	2.52	3.58	4.42	7.39
600	2.98	2.84	2.64	2.36	2.04	1.56	same shade	1.61	2.29	2.82	4.73
700	4.82	4.60	4.27	3.82	3.31	2.52	1.61	same shade	1.41	1.74	2.92
800	6.83	6.52	6.06	5.41	4.69	3.58	2.29	1.41	same shade	1.23	2.06
900	8.43	8.04	7.48	6.68	5.79	4.42	2.82	1.74	1.23	same shade	1.67
950	14.11	13.46	12.51	11.18	9.69	7.39	4.73	2.92	2.06	1.67	same shade

Rows are the text shade, columns the background. A bold figure on a tinted cell passes 4.5:1 for body text; a plain one passes 3:1 for large text only; a faint one fails.

Color vision

The scale with color blindness

The same eleven shades as seen with each color vision deficiency. Lightness keeps a ramp in order even where its hue collapses.

Simulated with Machado et al. (2009) at full severity, in linear light.

What each type sees

Typical vision

Closest neighbors: 300 and 400, ΔE2000 4.6
Protanopia

Closest neighbors: 300 and 400, ΔE2000 4.6
Deuteranopia

Closest neighbors: 300 and 400, ΔE2000 4.4
Tritanopia

Closest neighbors: 50 and 100, ΔE2000 3.7
Achromatopsia

Closest neighbors: 50 and 100, ΔE2000 1.0

Code

Design tokens

The whole family in six formats, ready to paste.

CSS custom properties

:root {
  --color-lime-50: #f7fee7;
  --color-lime-100: #ecfccb;
  --color-lime-200: #d9f99d;
  --color-lime-300: #bef264;
  --color-lime-400: #a3e635;
  --color-lime-500: #84cc16;
  --color-lime-600: #65a30d;
  --color-lime-700: #4d7c0f;
  --color-lime-800: #3f6212;
  --color-lime-900: #365314;
  --color-lime-950: #1a2e05;
}

Tailwind config

// tailwind.config.js — lime is built in; this pins the v3.4 values.
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',
        },
      },
    },
  },
};

Tailwind v4 theme

/* app.css — Tailwind CSS v4 */
@import "tailwindcss";

@theme {
  /* v4 has its own lime; these pin the v3 values. */
  --color-lime-50: oklch(0.986 0.031 120.8);
  --color-lime-100: oklch(0.967 0.066 122.3);
  --color-lime-200: oklch(0.938 0.122 124.3);
  --color-lime-300: oklch(0.897 0.179 126.7);
  --color-lime-400: oklch(0.849 0.207 128.8);
  --color-lime-500: oklch(0.768 0.204 130.8);
  --color-lime-600: oklch(0.648 0.175 131.7);
  --color-lime-700: oklch(0.532 0.141 131.6);
  --color-lime-800: oklch(0.453 0.113 130.9);
  --color-lime-900: oklch(0.405 0.096 131.1);
  --color-lime-950: oklch(0.274 0.069 132.1);
}

Design tokens (W3C DTCG)

{
  "color": {
    "lime": {
      "50": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9686, 0.9961, 0.9059],
          "hex": "#f7fee7"
        }
      },
      "100": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9255, 0.9882, 0.7961],
          "hex": "#ecfccb"
        }
      },
      "200": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.851, 0.9765, 0.6157],
          "hex": "#d9f99d"
        }
      },
      "300": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.7451, 0.949, 0.3922],
          "hex": "#bef264"
        }
      },
      "400": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.6392, 0.902, 0.2078],
          "hex": "#a3e635"
        }
      },
      "500": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.5176, 0.8, 0.0863],
          "hex": "#84cc16"
        }
      },
      "600": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.3961, 0.6392, 0.051],
          "hex": "#65a30d"
        }
      },
      "700": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.302, 0.4863, 0.0588],
          "hex": "#4d7c0f"
        }
      },
      "800": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.2471, 0.3843, 0.0706],
          "hex": "#3f6212"
        }
      },
      "900": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.2118, 0.3255, 0.0784],
          "hex": "#365314"
        }
      },
      "950": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.102, 0.1804, 0.0196],
          "hex": "#1a2e05"
        }
      }
    }
  }
}

SwiftUI colors

import SwiftUI

enum Palette {
    static let lime50 = Color(.sRGB, red: 0.969, green: 0.996, blue: 0.906, opacity: 1)
    static let lime100 = Color(.sRGB, red: 0.925, green: 0.988, blue: 0.796, opacity: 1)
    static let lime200 = Color(.sRGB, red: 0.851, green: 0.976, blue: 0.616, opacity: 1)
    static let lime300 = Color(.sRGB, red: 0.745, green: 0.949, blue: 0.392, opacity: 1)
    static let lime400 = Color(.sRGB, red: 0.639, green: 0.902, blue: 0.208, opacity: 1)
    static let lime500 = Color(.sRGB, red: 0.518, green: 0.800, blue: 0.086, opacity: 1)
    static let lime600 = Color(.sRGB, red: 0.396, green: 0.639, blue: 0.051, opacity: 1)
    static let lime700 = Color(.sRGB, red: 0.302, green: 0.486, blue: 0.059, opacity: 1)
    static let lime800 = Color(.sRGB, red: 0.247, green: 0.384, blue: 0.071, opacity: 1)
    static let lime900 = Color(.sRGB, red: 0.212, green: 0.325, blue: 0.078, opacity: 1)
    static let lime950 = Color(.sRGB, red: 0.102, green: 0.180, blue: 0.020, opacity: 1)
}

Jetpack Compose colors

import androidx.compose.ui.graphics.Color

object Palette {
    val Lime50 = Color(0xFFF7FEE7)
    val Lime100 = Color(0xFFECFCCB)
    val Lime200 = Color(0xFFD9F99D)
    val Lime300 = Color(0xFFBEF264)
    val Lime400 = Color(0xFFA3E635)
    val Lime500 = Color(0xFF84CC16)
    val Lime600 = Color(0xFF65A30D)
    val Lime700 = Color(0xFF4D7C0F)
    val Lime800 = Color(0xFF3F6212)
    val Lime900 = Color(0xFF365314)
    val Lime950 = Color(0xFF1A2E05)
}

Families

Other Tailwind families

The rest of the Tailwind CSS v3.4 palette, in the order Tailwind lists it.

Tailwind lime 11 shades, 50 to 950