Moor-Monster to Toxic Latte Color Palette

About this palette

Moor-Monster to Toxic Latte is a 4-color cool, earthy, monochromatic, gradient palette: #005430 (Moor-Monster), #548567 (Clouded Pine), #9AC7AD (Mint Twist), #DFFCE9 (Toxic Latte). It mixes green, white tones and feels cool overall. The strongest text pairing is #005430 on #DFFCE9 with a contrast ratio of 8.33:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Moor-Monster	rgb(0, 84, 48)	hsl(154, 100%, 16%)
Clouded Pine	rgb(84, 133, 103)	hsl(143, 23%, 43%)
Mint Twist	rgb(154, 199, 173)	hsl(145, 29%, 69%)
Toxic Latte	rgb(223, 252, 233)	hsl(141, 83%, 93%)

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.

Aa8.33:1 Very good#005430 on #DFFCE9
Aa8.33:1 Very good#DFFCE9 on #005430
Aa4.82:1 Good#005430 on #9AC7AD
Aa4.82:1 Good#9AC7AD on #005430
Aa3.90:1 Poor#548567 on #DFFCE9
Aa3.90:1 Poor#DFFCE9 on #548567

Color blindness preview

CSS variables

/* Moor-Monster to Toxic Latte — https://swatchly.xyz/palette/005430-548567-9ac7ad-dffce9 */
:root {
  --moor-monster: #005430;
  --clouded-pine: #548567;
  --mint-twist: #9ac7ad;
  --toxic-latte: #dffce9;
}

Tailwind CSS v4

/* Moor-Monster to Toxic Latte — https://swatchly.xyz/palette/005430-548567-9ac7ad-dffce9 */
@theme {
  --color-moor-monster: #005430;
  --color-moor-monster-50: #ddffe9;
  --color-moor-monster-100: #cdf8dc;
  --color-moor-monster-200: #b2e6c5;
  --color-moor-monster-300: #97d2ad;
  --color-moor-monster-400: #72b48c;
  --color-moor-monster-500: #549971;
  --color-moor-monster-600: #3a7e58;
  --color-moor-monster-700: #256744;
  --color-moor-monster-800: #005430;
  --color-moor-monster-900: #0b4026;
  --color-moor-monster-950: #032916;
  --color-clouded-pine: #548567;
  --color-clouded-pine-50: #e1feeb;
  --color-clouded-pine-100: #d8f7e2;
  --color-clouded-pine-200: #c2e7cf;
  --color-clouded-pine-300: #aad4b8;
  --color-clouded-pine-400: #88b799;
  --color-clouded-pine-500: #6d9e7f;
  --color-clouded-pine-600: #548567;
  --color-clouded-pine-700: #3d6b4f;
  --color-clouded-pine-800: #2b543c;
  --color-clouded-pine-900: #1d412c;
  --color-clouded-pine-950: #0f291a;
  --color-mint-twist: #9ac7ad;
  --color-mint-twist-50: #dff9ea;
  --color-mint-twist-100: #d2efde;
  --color-mint-twist-200: #b9dcc7;
  --color-mint-twist-300: #9ac7ad;
  --color-mint-twist-400: #7da890;
  --color-mint-twist-500: #638e75;
  --color-mint-twist-600: #4a745d;
  --color-mint-twist-700: #375d48;
  --color-mint-twist-800: #284a38;
  --color-mint-twist-900: #1d3a2b;
  --color-mint-twist-950: #102419;
  --color-toxic-latte: #dffce9;
  --color-toxic-latte-50: #dffce9;
  --color-toxic-latte-100: #ddefe3;
  --color-toxic-latte-200: #c8ddcf;
  --color-toxic-latte-300: #afc7b7;
  --color-toxic-latte-400: #8ea898;
  --color-toxic-latte-500: #738d7c;
  --color-toxic-latte-600: #5a7363;
  --color-toxic-latte-700: #455c4d;
  --color-toxic-latte-800: #34483b;
  --color-toxic-latte-900: #26372d;
  --color-toxic-latte-950: #16231b;
}