Mint Coffee to Tropical Forest color palette

D0FFE4Mint Coffee C8E28ASage Sensation 6BC984Exhilarating Green 638E21Asparagus Sultan 006963Peacock Pride 004F49Tropical Forest

Open in generator Export PNG, PDF, ASE…

About this palette

Mint Coffee to Tropical Forest is a 6-color cool, earthy, gradient palette: #D0FFE4 (Mint Coffee), #C8E28A (Sage Sensation), #6BC984 (Exhilarating Green), #638E21 (Asparagus Sultan), #006963 (Peacock Pride), #004F49 (Tropical Forest). It mixes green, turquoise tones and feels cool overall. The strongest text pairing is #D0FFE4 on #004F49 with a contrast ratio of 8.63:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mint Coffee	rgb(208, 255, 228)	hsl(146, 100%, 91%)
Sage Sensation	rgb(200, 226, 138)	hsl(78, 60%, 71%)
Exhilarating Green	rgb(107, 201, 132)	hsl(136, 47%, 60%)
Asparagus Sultan	rgb(99, 142, 33)	hsl(84, 62%, 34%)
Peacock Pride	rgb(0, 105, 99)	hsl(177, 100%, 21%)
Tropical Forest	rgb(0, 79, 73)	hsl(175, 100%, 15%)

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.63:1 Very good#D0FFE4 on #004F49
Aa8.63:1 Very good#004F49 on #D0FFE4
Aa6.64:1 Good#C8E28A on #004F49
Aa6.64:1 Good#004F49 on #C8E28A
Aa5.97:1 Good#D0FFE4 on #006963
Aa5.97:1 Good#006963 on #D0FFE4
Aa4.66:1 Good#6BC984 on #004F49
Aa4.66:1 Good#004F49 on #6BC984

Color blindness preview

CSS variables

/* Mint Coffee to Tropical Forest — https://swatchly.xyz/palette/d0ffe4-c8e28a-6bc984-638e21-006963-004f49 */
:root {
  --mint-coffee: #d0ffe4;
  --sage-sensation: #c8e28a;
  --exhilarating-green: #6bc984;
  --asparagus-sultan: #638e21;
  --peacock-pride: #006963;
  --tropical-forest: #004f49;
}

Tailwind CSS v4

/* Mint Coffee to Tropical Forest — https://swatchly.xyz/palette/d0ffe4-c8e28a-6bc984-638e21-006963-004f49 */
@theme {
  --color-mint-coffee: #d0ffe4;
  --color-mint-coffee-50: #d0ffe4;
  --color-mint-coffee-100: #d4f1e0;
  --color-mint-coffee-200: #bddfcb;
  --color-mint-coffee-300: #a3cab4;
  --color-mint-coffee-400: #81ac94;
  --color-mint-coffee-500: #669179;
  --color-mint-coffee-600: #4d7760;
  --color-mint-coffee-700: #385f4a;
  --color-mint-coffee-800: #294b39;
  --color-mint-coffee-900: #1d3a2b;
  --color-mint-coffee-950: #0f241a;
  --color-sage-sensation: #c8e28a;
  --color-sage-sensation-50: #ecfbcb;
  --color-sage-sensation-100: #e1f2bc;
  --color-sage-sensation-200: #c8e28a;
  --color-sage-sensation-300: #b4ca80;
  --color-sage-sensation-400: #94ab59;
  --color-sage-sensation-500: #799039;
  --color-sage-sensation-600: #60751d;
  --color-sage-sensation-700: #4b5e03;
  --color-sage-sensation-800: #3a4a00;
  --color-sage-sensation-900: #2c3900;
  --color-sage-sensation-950: #1b2300;
  --color-exhilarating-green: #6bc984;
  --color-exhilarating-green-50: #c6fdd1;
  --color-exhilarating-green-100: #b4f2c1;
  --color-exhilarating-green-200: #94dfa5;
  --color-exhilarating-green-300: #6bc984;
  --color-exhilarating-green-400: #4fab69;
  --color-exhilarating-green-500: #309251;
  --color-exhilarating-green-600: #12793b;
  --color-exhilarating-green-700: #00622c;
  --color-exhilarating-green-800: #004e22;
  --color-exhilarating-green-900: #003f19;
  --color-exhilarating-green-950: #00270d;
  --color-asparagus-sultan: #638e21;
  --color-asparagus-sultan-50: #e3ffc6;
  --color-asparagus-sultan-100: #d5f5b4;
  --color-asparagus-sultan-200: #bde294;
  --color-asparagus-sultan-300: #a2cb72;
  --color-asparagus-sultan-400: #7fab46;
  --color-asparagus-sultan-500: #638e21;
  --color-asparagus-sultan-600: #4c7300;
  --color-asparagus-sultan-700: #3c5c00;
  --color-asparagus-sultan-800: #2e4800;
  --color-asparagus-sultan-900: #233800;
  --color-asparagus-sultan-950: #142400;
  --color-peacock-pride: #006963;
  --color-peacock-pride-50: #d6fffa;
  --color-peacock-pride-100: #c6f7f1;
  --color-peacock-pride-200: #ace6e0;
  --color-peacock-pride-300: #8ed2cb;
  --color-peacock-pride-400: #67b5ad;
  --color-peacock-pride-500: #479a93;
  --color-peacock-pride-600: #2a8079;
  --color-peacock-pride-700: #006963;
  --color-peacock-pride-800: #00524d;
  --color-peacock-pride-900: #003f3c;
  --color-peacock-pride-950: #002825;
  --color-tropical-forest: #004f49;
  --color-tropical-forest-50: #dbfef9;
  --color-tropical-forest-100: #cdf5ef;
  --color-tropical-forest-200: #b3e3dc;
  --color-tropical-forest-300: #97cec7;
  --color-tropical-forest-400: #72b0a8;
  --color-tropical-forest-500: #54948d;
  --color-tropical-forest-600: #3a7972;
  --color-tropical-forest-700: #25625c;
  --color-tropical-forest-800: #004f49;
  --color-tropical-forest-900: #0c3c38;
  --color-tropical-forest-950: #042623;
}