Hint of Mint to Monster Monstera Color Palette

About this palette

Hint of Mint to Monster Monstera is a 4-color cool, earthy, monochromatic palette: #D3F8DF (Hint of Mint), #85BD9E (Neptune Green), #10462E (Zucchini), #298753 (Monster Monstera). It mixes white, green tones and feels cool overall. The strongest text pairing is #D3F8DF on #10462E with a contrast ratio of 9.43:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hint of Mint	rgb(211, 248, 223)	hsl(139, 73%, 90%)
Neptune Green	rgb(133, 189, 158)	hsl(147, 30%, 63%)
Zucchini	rgb(16, 70, 46)	hsl(153, 63%, 17%)
Monster Monstera	rgb(41, 135, 83)	hsl(147, 53%, 35%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa9.43:1 Very good#D3F8DF on #10462E
Aa9.43:1 Very good#10462E on #D3F8DF
Aa5.04:1 Good#85BD9E on #10462E
Aa5.04:1 Good#10462E on #85BD9E
Aa3.90:1 Poor#D3F8DF on #298753
Aa3.90:1 Poor#298753 on #D3F8DF

Color blindness preview

CSS variables

/* Hint of Mint to Monster Monstera — https://swatchly.xyz/palette/d3f8df-85bd9e-10462e-298753 */
:root {
  --hint-of-mint: #d3f8df;
  --neptune-green: #85bd9e;
  --zucchini: #10462e;
  --monster-monstera: #298753;
}

Tailwind CSS v4

/* Hint of Mint to Monster Monstera — https://swatchly.xyz/palette/d3f8df-85bd9e-10462e-298753 */
@theme {
  --color-hint-of-mint: #d3f8df;
  --color-hint-of-mint-50: #e9fdef;
  --color-hint-of-mint-100: #d3f8df;
  --color-hint-of-mint-200: #c6e1cf;
  --color-hint-of-mint-300: #adcbb7;
  --color-hint-of-mint-400: #8bac96;
  --color-hint-of-mint-500: #6e907a;
  --color-hint-of-mint-600: #547560;
  --color-hint-of-mint-700: #405d4a;
  --color-hint-of-mint-800: #2f4939;
  --color-hint-of-mint-900: #23392b;
  --color-hint-of-mint-950: #142319;
  --color-neptune-green: #85bd9e;
  --color-neptune-green-50: #edfff4;
  --color-neptune-green-100: #dbfbe8;
  --color-neptune-green-200: #c4ebd5;
  --color-neptune-green-300: #abd8be;
  --color-neptune-green-400: #85bd9e;
  --color-neptune-green-500: #689e81;
  --color-neptune-green-600: #4b8165;
  --color-neptune-green-700: #35674d;
  --color-neptune-green-800: #23503a;
  --color-neptune-green-900: #173d2a;
  --color-neptune-green-950: #0a2518;
  --color-zucchini: #10462e;
  --color-zucchini-50: #e0feec;
  --color-zucchini-100: #d3f5e1;
  --color-zucchini-200: #bbe3cc;
  --color-zucchini-300: #9eccb2;
  --color-zucchini-400: #7aac90;
  --color-zucchini-500: #5c8f73;
  --color-zucchini-600: #417359;
  --color-zucchini-700: #2d5a43;
  --color-zucchini-800: #10462e;
  --color-zucchini-900: #143424;
  --color-zucchini-950: #092015;
  --color-monster-monstera: #298753;
  --color-monster-monstera-50: #deffe8;
  --color-monster-monstera-100: #c7fcd8;
  --color-monster-monstera-200: #adecc1;
  --color-monster-monstera-300: #90d8a9;
  --color-monster-monstera-400: #68bc87;
  --color-monster-monstera-500: #48a16c;
  --color-monster-monstera-600: #298753;
  --color-monster-monstera-700: #0c6d3e;
  --color-monster-monstera-800: #00562e;
  --color-monster-monstera-900: #004222;
  --color-monster-monstera-950: #002a13;
}