Tailwind Emerald Colors: Shades, Contrast & Codes

Tailwind CSS 4.3.3

emerald: current colors

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

Color	Exact OKLCH	CSS variable
emerald-50	`oklch(97.9% 0.021 166.113)`	`--color-emerald-50`
emerald-100	`oklch(95% 0.052 163.051)`	`--color-emerald-100`
emerald-200	`oklch(90.5% 0.093 164.15)`	`--color-emerald-200`
emerald-300	`oklch(84.5% 0.143 164.978)`	`--color-emerald-300`
emerald-400	`oklch(76.5% 0.177 163.223)`	`--color-emerald-400`
emerald-500	`oklch(69.6% 0.17 162.48)`	`--color-emerald-500`
emerald-600	`oklch(59.6% 0.145 163.225)`	`--color-emerald-600`
emerald-700	`oklch(50.8% 0.118 165.612)`	`--color-emerald-700`
emerald-800	`oklch(43.2% 0.095 166.913)`	`--color-emerald-800`
emerald-900	`oklch(37.8% 0.077 168.94)`	`--color-emerald-900`
emerald-950	`oklch(26.2% 0.051 172.552)`	`--color-emerald-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#ECFDF5
White
1.05
Black
19.93
100#D1FAE5
White
1.13
Black
18.51
200#A7F3D0
White
1.28
Black
16.37
300#6EE7B7
White
1.52
Black
13.77
400#34D399
White
1.92
Black
10.92
500#10B981
White
2.53
Black
8.27
600#059669
White
3.76
Black
5.57
700#047857
White
5.48
Black
3.82
800#065F46
White
7.68
Black
2.73
900#064E3B
White
9.71
Black
2.16
950#022C22
White
15.15
Black
1.38

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
emerald-50	`#ECFDF5`	`rgb(236, 253, 245)`	`oklch(0.979 0.021 166.1)`	1.05	19.93
emerald-100	`#D1FAE5`	`rgb(209, 250, 229)`	`oklch(0.950 0.051 163.1)`	1.13	18.51
emerald-200	`#A7F3D0`	`rgb(167, 243, 208)`	`oklch(0.905 0.089 164.2)`	1.28	16.37
emerald-300	`#6EE7B7`	`rgb(110, 231, 183)`	`oklch(0.845 0.130 165.0)`	1.52	13.77
emerald-400	`#34D399`	`rgb(52, 211, 153)`	`oklch(0.773 0.153 163.2)`	1.92	10.92
emerald-500	`#10B981`	`rgb(16, 185, 129)`	`oklch(0.696 0.149 162.5)`	2.53	8.27
emerald-600	`#059669`	`rgb(5, 150, 105)`	`oklch(0.596 0.127 163.2)`	3.76	5.57
emerald-700	`#047857`	`rgb(4, 120, 87)`	`oklch(0.508 0.105 165.6)`	5.48	3.82
emerald-800	`#065F46`	`rgb(6, 95, 70)`	`oklch(0.432 0.086 166.9)`	7.68	2.73
emerald-900	`#064E3B`	`rgb(6, 78, 59)`	`oklch(0.378 0.073 168.9)`	9.71	2.16
emerald-950	`#022C22`	`rgb(2, 44, 34)`	`oklch(0.262 0.049 172.6)`	15.15	1.38

Legibility

Which shades pass on each other

Every shade as text on every other shade. 34 of 110 pairings pass 4.5:1 for body text, and 16 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.07	1.21	1.44	1.82	2.40	3.57	5.20	7.29	9.22	14.38
100	1.07	same shade	1.13	1.34	1.69	2.23	3.32	4.83	6.77	8.56	13.36
200	1.21	1.13	same shade	1.18	1.49	1.97	2.93	4.27	5.99	7.57	11.81
300	1.44	1.34	1.18	same shade	1.26	1.66	2.47	3.59	5.04	6.37	9.94
400	1.82	1.69	1.49	1.26	same shade	1.31	1.96	2.85	3.99	5.05	7.88
500	2.40	2.23	1.97	1.66	1.31	same shade	1.48	2.16	3.02	3.83	5.97
600	3.57	3.32	2.93	2.47	1.96	1.48	same shade	1.45	2.03	2.57	4.02
700	5.20	4.83	4.27	3.59	2.85	2.16	1.45	same shade	1.40	1.77	2.76
800	7.29	6.77	5.99	5.04	3.99	3.02	2.03	1.40	same shade	1.26	1.97
900	9.22	8.56	7.57	6.37	5.05	3.83	2.57	1.77	1.26	same shade	1.55
950	14.38	13.36	11.81	9.94	7.88	5.97	4.02	2.76	1.97	1.55	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: 800 and 900, ΔE2000 5.6
Protanopia

Closest neighbors: 100 and 200, ΔE2000 4.5
Deuteranopia

Closest neighbors: 50 and 100, ΔE2000 3.1
Tritanopia

Closest neighbors: 300 and 400, ΔE2000 5.0
Achromatopsia

Closest neighbors: 50 and 100, ΔE2000 1.6

Code

Design tokens

The whole family in six formats, ready to paste.

CSS custom properties

:root {
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e3b;
  --color-emerald-950: #022c22;
}

Tailwind config

// tailwind.config.js — emerald is built in; this pins the v3.4 values.
module.exports = {
  theme: {
    extend: {
      colors: {
        emerald: {
          50: '#ecfdf5',
          100: '#d1fae5',
          200: '#a7f3d0',
          300: '#6ee7b7',
          400: '#34d399',
          500: '#10b981',
          600: '#059669',
          700: '#047857',
          800: '#065f46',
          900: '#064e3b',
          950: '#022c22',
        },
      },
    },
  },
};

Tailwind v4 theme

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

@theme {
  /* v4 has its own emerald; these pin the v3 values. */
  --color-emerald-50: oklch(0.979 0.021 166.1);
  --color-emerald-100: oklch(0.950 0.051 163.1);
  --color-emerald-200: oklch(0.905 0.089 164.2);
  --color-emerald-300: oklch(0.845 0.130 165.0);
  --color-emerald-400: oklch(0.773 0.153 163.2);
  --color-emerald-500: oklch(0.696 0.149 162.5);
  --color-emerald-600: oklch(0.596 0.127 163.2);
  --color-emerald-700: oklch(0.508 0.105 165.6);
  --color-emerald-800: oklch(0.432 0.086 166.9);
  --color-emerald-900: oklch(0.378 0.073 168.9);
  --color-emerald-950: oklch(0.262 0.049 172.6);
}

Design tokens (W3C DTCG)

{
  "color": {
    "emerald": {
      "50": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9255, 0.9922, 0.9608],
          "hex": "#ecfdf5"
        }
      },
      "100": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.8196, 0.9804, 0.898],
          "hex": "#d1fae5"
        }
      },
      "200": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.6549, 0.9529, 0.8157],
          "hex": "#a7f3d0"
        }
      },
      "300": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.4314, 0.9059, 0.7176],
          "hex": "#6ee7b7"
        }
      },
      "400": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.2039, 0.8275, 0.6],
          "hex": "#34d399"
        }
      },
      "500": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0627, 0.7255, 0.5059],
          "hex": "#10b981"
        }
      },
      "600": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0196, 0.5882, 0.4118],
          "hex": "#059669"
        }
      },
      "700": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0157, 0.4706, 0.3412],
          "hex": "#047857"
        }
      },
      "800": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0235, 0.3725, 0.2745],
          "hex": "#065f46"
        }
      },
      "900": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0235, 0.3059, 0.2314],
          "hex": "#064e3b"
        }
      },
      "950": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0078, 0.1725, 0.1333],
          "hex": "#022c22"
        }
      }
    }
  }
}

SwiftUI colors

import SwiftUI

enum Palette {
    static let emerald50 = Color(.sRGB, red: 0.925, green: 0.992, blue: 0.961, opacity: 1)
    static let emerald100 = Color(.sRGB, red: 0.820, green: 0.980, blue: 0.898, opacity: 1)
    static let emerald200 = Color(.sRGB, red: 0.655, green: 0.953, blue: 0.816, opacity: 1)
    static let emerald300 = Color(.sRGB, red: 0.431, green: 0.906, blue: 0.718, opacity: 1)
    static let emerald400 = Color(.sRGB, red: 0.204, green: 0.827, blue: 0.600, opacity: 1)
    static let emerald500 = Color(.sRGB, red: 0.063, green: 0.725, blue: 0.506, opacity: 1)
    static let emerald600 = Color(.sRGB, red: 0.020, green: 0.588, blue: 0.412, opacity: 1)
    static let emerald700 = Color(.sRGB, red: 0.016, green: 0.471, blue: 0.341, opacity: 1)
    static let emerald800 = Color(.sRGB, red: 0.024, green: 0.373, blue: 0.275, opacity: 1)
    static let emerald900 = Color(.sRGB, red: 0.024, green: 0.306, blue: 0.231, opacity: 1)
    static let emerald950 = Color(.sRGB, red: 0.008, green: 0.173, blue: 0.133, opacity: 1)
}

Jetpack Compose colors

import androidx.compose.ui.graphics.Color

object Palette {
    val Emerald50 = Color(0xFFECFDF5)
    val Emerald100 = Color(0xFFD1FAE5)
    val Emerald200 = Color(0xFFA7F3D0)
    val Emerald300 = Color(0xFF6EE7B7)
    val Emerald400 = Color(0xFF34D399)
    val Emerald500 = Color(0xFF10B981)
    val Emerald600 = Color(0xFF059669)
    val Emerald700 = Color(0xFF047857)
    val Emerald800 = Color(0xFF065F46)
    val Emerald900 = Color(0xFF064E3B)
    val Emerald950 = Color(0xFF022C22)
}

Families

Other Tailwind families

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

Tailwind emerald 11 shades, 50 to 950