Garden of Eden to Eminence color palette

77A26CGarden of Eden 855784Muted Purple 382445Purple Void D5EDBFMaroccan Tea A7C9A5Limestoned 6C3A6EEminence

Open in generator Export PNG, PDF, ASE…

About this palette

Garden of Eden to Eminence is a 6-color cool palette: #77A26C (Garden of Eden), #855784 (Muted Purple), #382445 (Purple Void), #D5EDBF (Maroccan Tea), #A7C9A5 (Limestoned), #6C3A6E (Eminence). It mixes green, pink, purple tones and feels cool overall. The strongest text pairing is #382445 on #D5EDBF with a contrast ratio of 11.08:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Garden of Eden	rgb(119, 162, 108)	hsl(108, 22%, 53%)
Muted Purple	rgb(133, 87, 132)	hsl(301, 21%, 43%)
Purple Void	rgb(56, 36, 69)	hsl(276, 31%, 21%)
Maroccan Tea	rgb(213, 237, 191)	hsl(91, 56%, 84%)
Limestoned	rgb(167, 201, 165)	hsl(117, 25%, 72%)
Eminence	rgb(108, 58, 110)	hsl(298, 31%, 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.

Aa11.08:1 Very good#382445 on #D5EDBF
Aa11.08:1 Very good#D5EDBF on #382445
Aa7.66:1 Very good#382445 on #A7C9A5
Aa7.66:1 Very good#A7C9A5 on #382445
Aa6.76:1 Good#D5EDBF on #6C3A6E
Aa6.76:1 Good#6C3A6E on #D5EDBF
Aa4.76:1 Good#77A26C on #382445
Aa4.76:1 Good#382445 on #77A26C

Color blindness preview

CSS variables

/* Garden of Eden to Eminence — https://swatchly.xyz/palette/77a26c-855784-382445-d5edbf-a7c9a5-6c3a6e */
:root {
  --garden-of-eden: #77a26c;
  --muted-purple: #855784;
  --purple-void: #382445;
  --maroccan-tea: #d5edbf;
  --limestoned: #a7c9a5;
  --eminence: #6c3a6e;
}

Tailwind CSS v4

/* Garden of Eden to Eminence — https://swatchly.xyz/palette/77a26c-855784-382445-d5edbf-a7c9a5-6c3a6e */
@theme {
  --color-garden-of-eden: #77a26c;
  --color-garden-of-eden-50: #dffad8;
  --color-garden-of-eden-100: #d0eec8;
  --color-garden-of-eden-200: #b6daad;
  --color-garden-of-eden-300: #9bc391;
  --color-garden-of-eden-400: #77a26c;
  --color-garden-of-eden-500: #5f8954;
  --color-garden-of-eden-600: #48703e;
  --color-garden-of-eden-700: #365a2d;
  --color-garden-of-eden-800: #294820;
  --color-garden-of-eden-900: #1e3917;
  --color-garden-of-eden-950: #11250c;
  --color-muted-purple: #855784;
  --color-muted-purple-50: #ffeffe;
  --color-muted-purple-100: #ffdffd;
  --color-muted-purple-200: #efc8ed;
  --color-muted-purple-300: #dbafd9;
  --color-muted-purple-400: #bd8dbc;
  --color-muted-purple-500: #a171a0;
  --color-muted-purple-600: #855784;
  --color-muted-purple-700: #6c436b;
  --color-muted-purple-800: #563255;
  --color-muted-purple-900: #432543;
  --color-muted-purple-950: #2b162b;
  --color-purple-void: #382445;
  --color-purple-void-50: #f9f2ff;
  --color-purple-void-100: #f4e4ff;
  --color-purple-void-200: #e1cfef;
  --color-purple-void-300: #ccb8db;
  --color-purple-void-400: #ad96bd;
  --color-purple-void-500: #907aa0;
  --color-purple-void-600: #745f83;
  --color-purple-void-700: #5c4969;
  --color-purple-void-800: #473652;
  --color-purple-void-900: #382445;
  --color-purple-void-950: #201727;
  --color-maroccan-tea: #d5edbf;
  --color-maroccan-tea-50: #e6f4d9;
  --color-maroccan-tea-100: #d5edbf;
  --color-maroccan-tea-200: #c6d8b5;
  --color-maroccan-tea-300: #b0c49d;
  --color-maroccan-tea-400: #91a67c;
  --color-maroccan-tea-500: #778c62;
  --color-maroccan-tea-600: #5e724a;
  --color-maroccan-tea-700: #4a5c37;
  --color-maroccan-tea-800: #384828;
  --color-maroccan-tea-900: #2a381c;
  --color-maroccan-tea-950: #19230f;
  --color-limestoned: #a7c9a5;
  --color-limestoned-50: #e7fae5;
  --color-limestoned-100: #daf1d9;
  --color-limestoned-200: #c4dec2;
  --color-limestoned-300: #a7c9a5;
  --color-limestoned-400: #8aa988;
  --color-limestoned-500: #6e8e6d;
  --color-limestoned-600: #557454;
  --color-limestoned-700: #415d40;
  --color-limestoned-800: #314930;
  --color-limestoned-900: #243923;
  --color-limestoned-950: #152414;
  --color-eminence: #6c3a6e;
  --color-eminence-50: #ffefff;
  --color-eminence-100: #ffdfff;
  --color-eminence-200: #f1c6f2;
  --color-eminence-300: #ddacde;
  --color-eminence-400: #bf89c0;
  --color-eminence-500: #a26ca3;
  --color-eminence-600: #845286;
  --color-eminence-700: #6c3a6e;
  --color-eminence-800: #542d56;
  --color-eminence-900: #422143;
  --color-eminence-950: #2a132b;
}