Tinta Jade Mist
4-color mesh gradient
Jade Mist is a 4-color CSS mesh gradient built from #064E3B, #059669, #34D399, and #D1FAE5. Its hues sit in the green range. Dark text (#111827) on it keeps at least 1.83:1 at its weakest point — below every WCAG text threshold.
UI Preview
See how this gradient looks in a real interface
Welcome Back
Your creative workspace awaits
ContinueShade scales
Each color as a 50–950 ramp, like Tailwind's built-in palettes — ready for a design system. The ringed step, marked ●, is the original color, exactly.
#064e3b
#059669
#34d399
#d1fae5
@theme {
--color-jade-mist-1-50: #F0FAF6;
--color-jade-mist-1-100: #DDF1E9;
--color-jade-mist-1-200: #BFE3D4;
--color-jade-mist-1-300: #96CFB9;
--color-jade-mist-1-400: #66B297;
--color-jade-mist-1-500: #40987C;
--color-jade-mist-1-600: #267E64;
--color-jade-mist-1-700: #11644D;
--color-jade-mist-1-800: #064E3B;
--color-jade-mist-1-900: #083F30;
--color-jade-mist-1-950: #042B20;
}
@theme {
--color-jade-mist-2-50: #EFFBF4;
--color-jade-mist-2-100: #D9F2E5;
--color-jade-mist-2-200: #B6E4CD;
--color-jade-mist-2-300: #86D0AD;
--color-jade-mist-2-400: #4CB287;
--color-jade-mist-2-500: #059669;
--color-jade-mist-2-600: #007E57;
--color-jade-mist-2-700: #006646;
--color-jade-mist-2-800: #005338;
--color-jade-mist-2-900: #00422C;
--color-jade-mist-2-950: #002C1C;
}
@theme {
--color-jade-mist-3-50: #E8FDF2;
--color-jade-mist-3-100: #C9F5DF;
--color-jade-mist-3-200: #94E8C1;
--color-jade-mist-3-300: #34D399;
--color-jade-mist-3-400: #00B57F;
--color-jade-mist-3-500: #00996B;
--color-jade-mist-3-600: #008059;
--color-jade-mist-3-700: #006847;
--color-jade-mist-3-800: #005439;
--color-jade-mist-3-900: #00432C;
--color-jade-mist-3-950: #002C1C;
}
@theme {
--color-jade-mist-4-50: #EAFDF3;
--color-jade-mist-4-100: #D1FAE5;
--color-jade-mist-4-200: #A4F1CC;
--color-jade-mist-4-300: #5CE2AB;
--color-jade-mist-4-400: #00C489;
--color-jade-mist-4-500: #00A573;
--color-jade-mist-4-600: #00895F;
--color-jade-mist-4-700: #006E4C;
--color-jade-mist-4-800: #00583B;
--color-jade-mist-4-900: #00452E;
--color-jade-mist-4-950: #002C1C;
}Light & dark theme
This palette as Material 3 color roles for a real interface, in light and dark mode. Every color comes with the text color that goes on it, and every pair's contrast is measured.
Contrast checker
Text color (rows) on background (columns), scored against WCAG 2.2. 4 of 12 palette combinations are readable as body text. White and near-black text are included for comparison.
| Text ↓ / Bg → | #064E3B | #059669 | #34D399 | #D1FAE5 |
|---|---|---|---|---|
| #064E3B | Same color | 2.6Fail | 5.1AA | 8.6AAA |
| #059669 | 2.6Fail | Same color | 2.0Fail | 3.3AA18 |
| #34D399 | 5.1AA | 2.0Fail | Same color | 1.7Fail |
| #D1FAE5 | 8.6AAA | 3.3AA18 | 1.7Fail | Same color |
| White | 9.7AAA | 3.8AA18 | 1.9Fail | 1.1Fail |
| Near-black | 1.8Fail | 4.6AA | 9.1AAA | 15.4AAA |
AAA ≥ 7:1 · AA ≥ 4.5:1 body text· AA18 ≥ 3:1 large text (18pt, or 14pt bold) only
Text that works on each color
- White on #064E3B · 9.7:1
- Near-black on #059669 · 4.6:1
- Near-black on #34D399 · 9.1:1
- Near-black on #D1FAE5 · 15.4:1
Suggested fixes for 8 failing pairs
The nearest shade of the text color that passes AA (4.5:1), keeping its hue. Click one to copy it.
Color blindness check
About 1 in 12 men and 1 in 200 women see color differently. Simulated with the Machado (2009) model.
No green cones — the most common form. No two swatches become hard to tell apart here.
What are the HEX, RGB, and HSL values for Jade Mist?
Every color in this 4-color set, with its contrast ratio against white and black.
| Color | Name | HEX | RGB | HSL | On white | On black |
|---|---|---|---|---|---|---|
| #064E3B | Evergreen | #064E3B | 6, 78, 59 | 164°, 86%, 16% | 9.72:1 | 2.16:1 |
| #059669 | Jade | #059669 | 5, 150, 105 | 161°, 94%, 30% | 3.77:1 | 5.57:1 |
| #34D399 | Medium Aquamarine | #34D399 | 52, 211, 153 | 158°, 64%, 52% | 1.92:1 | 10.92:1 |
| #D1FAE5 | Pale Mint | #D1FAE5 | 209, 250, 229 | 149°, 80%, 90% | 1.13:1 | 18.52:1 |
Related mesh gradients
Others sharing the same hues and tone