Maroccan Tea to Good Karma Color Palette

About this palette

Maroccan Tea to Good Karma is a 5-color cool palette: #CDEEBC (Maroccan Tea), #99CE77 (Fresh Cut Grass), #897EAA (Aster), #86415B (Liaison), #393A6F (Good Karma). It mixes green, purple, red tones and feels cool overall. The strongest text pairing is #CDEEBC on #393A6F with a contrast ratio of 8.24:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Maroccan Tea	rgb(205, 238, 188)	hsl(100, 60%, 84%)
Fresh Cut Grass	rgb(153, 206, 119)	hsl(97, 47%, 64%)
Aster	rgb(137, 126, 170)	hsl(255, 21%, 58%)
Liaison	rgb(134, 65, 91)	hsl(337, 35%, 39%)
Good Karma	rgb(57, 58, 111)	hsl(239, 32%, 33%)

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.24:1 Very good#CDEEBC on #393A6F
Aa8.24:1 Very good#393A6F on #CDEEBC
Aa5.70:1 Good#99CE77 on #393A6F
Aa5.70:1 Good#393A6F on #99CE77
Aa5.67:1 Good#CDEEBC on #86415B
Aa5.67:1 Good#86415B on #CDEEBC
Aa3.92:1 Poor#99CE77 on #86415B
Aa3.92:1 Poor#86415B on #99CE77

Color blindness preview

CSS variables

/* Maroccan Tea to Good Karma — https://swatchly.xyz/palette/cdeebc-99ce77-897eaa-86415b-393a6f */
:root {
  --maroccan-tea: #cdeebc;
  --fresh-cut-grass: #99ce77;
  --aster: #897eaa;
  --liaison: #86415b;
  --good-karma: #393a6f;
}

Tailwind CSS v4

/* Maroccan Tea to Good Karma — https://swatchly.xyz/palette/cdeebc-99ce77-897eaa-86415b-393a6f */
@theme {
  --color-maroccan-tea: #cdeebc;
  --color-maroccan-tea-50: #e1f5d7;
  --color-maroccan-tea-100: #cdeebc;
  --color-maroccan-tea-200: #c0d9b3;
  --color-maroccan-tea-300: #a9c59b;
  --color-maroccan-tea-400: #8aa87a;
  --color-maroccan-tea-500: #708e60;
  --color-maroccan-tea-600: #587448;
  --color-maroccan-tea-700: #445e36;
  --color-maroccan-tea-800: #334a27;
  --color-maroccan-tea-900: #26391b;
  --color-maroccan-tea-950: #16240e;
  --color-fresh-cut-grass: #99ce77;
  --color-fresh-cut-grass-50: #dffecc;
  --color-fresh-cut-grass-100: #d1f5bd;
  --color-fresh-cut-grass-200: #b9e2a0;
  --color-fresh-cut-grass-300: #99ce77;
  --color-fresh-cut-grass-400: #7cae5c;
  --color-fresh-cut-grass-500: #61933e;
  --color-fresh-cut-grass-600: #497924;
  --color-fresh-cut-grass-700: #36610f;
  --color-fresh-cut-grass-800: #274d01;
  --color-fresh-cut-grass-900: #1d3c00;
  --color-fresh-cut-grass-950: #102600;
  --color-aster: #897eaa;
  --color-aster-50: #f6f3ff;
  --color-aster-100: #ece7ff;
  --color-aster-200: #dad1f5;
  --color-aster-300: #c3bae2;
  --color-aster-400: #a49ac5;
  --color-aster-500: #897eaa;
  --color-aster-600: #6f648e;
  --color-aster-700: #584e74;
  --color-aster-800: #453c5d;
  --color-aster-900: #352d49;
  --color-aster-950: #211b2f;
  --color-liaison: #86415b;
  --color-liaison-50: #fff1f5;
  --color-liaison-100: #ffe3eb;
  --color-liaison-200: #ffc7d9;
  --color-liaison-300: #f0adc3;
  --color-liaison-400: #d58ca5;
  --color-liaison-500: #ba708a;
  --color-liaison-600: #9e5771;
  --color-liaison-700: #86415b;
  --color-liaison-800: #6a3147;
  --color-liaison-900: #542436;
  --color-liaison-950: #371422;
  --color-good-karma: #393a6f;
  --color-good-karma-50: #f3f4ff;
  --color-good-karma-100: #e7e9ff;
  --color-good-karma-200: #cfd4ff;
  --color-good-karma-300: #b7bcf2;
  --color-good-karma-400: #969bd6;
  --color-good-karma-500: #7b7fba;
  --color-good-karma-600: #61659d;
  --color-good-karma-700: #4c4e81;
  --color-good-karma-800: #393a6f;
  --color-good-karma-900: #2c2d52;
  --color-good-karma-950: #1a1b36;
}