Tropical Forest to Munch on Melon color palette

004648Tropical Forest E3FFFEBubbles B92C40Timeless Beauty 00E5EACold Light of Day F2436CMunch on Melon

Open in generator Export PNG, PDF, ASE…

About this palette

Tropical Forest to Munch on Melon is a 5-color palette: #004648 (Tropical Forest), #E3FFFE (Bubbles), #B92C40 (Timeless Beauty), #00E5EA (Cold Light of Day), #F2436C (Munch on Melon). It mixes turquoise, white, red tones and feels balanced overall. The strongest text pairing is #004648 on #E3FFFE with a contrast ratio of 10.15:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tropical Forest	rgb(0, 70, 72)	hsl(182, 100%, 14%)
Bubbles	rgb(227, 255, 254)	hsl(178, 100%, 95%)
Timeless Beauty	rgb(185, 44, 64)	hsl(351, 62%, 45%)
Cold Light of Day	rgb(0, 229, 234)	hsl(181, 100%, 46%)
Munch on Melon	rgb(242, 67, 108)	hsl(346, 87%, 61%)

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.

Aa10.15:1 Very good#004648 on #E3FFFE
Aa10.15:1 Very good#E3FFFE on #004648
Aa6.80:1 Good#004648 on #00E5EA
Aa6.80:1 Good#00E5EA on #004648
Aa5.72:1 Good#E3FFFE on #B92C40
Aa5.72:1 Good#B92C40 on #E3FFFE
Aa3.83:1 Poor#B92C40 on #00E5EA
Aa3.83:1 Poor#00E5EA on #B92C40

Color blindness preview

CSS variables

/* Tropical Forest to Munch on Melon — https://swatchly.xyz/palette/004648-e3fffe-b92c40-00e5ea-f2436c */
:root {
  --tropical-forest: #004648;
  --bubbles: #e3fffe;
  --timeless-beauty: #b92c40;
  --cold-light-of-day: #00e5ea;
  --munch-on-melon: #f2436c;
}

Tailwind CSS v4

/* Tropical Forest to Munch on Melon — https://swatchly.xyz/palette/004648-e3fffe-b92c40-00e5ea-f2436c */
@theme {
  --color-tropical-forest: #004648;
  --color-tropical-forest-50: #dcfdfd;
  --color-tropical-forest-100: #cff3f4;
  --color-tropical-forest-200: #b6e1e2;
  --color-tropical-forest-300: #98cbcc;
  --color-tropical-forest-400: #73abac;
  --color-tropical-forest-500: #548e90;
  --color-tropical-forest-600: #3a7274;
  --color-tropical-forest-700: #26595b;
  --color-tropical-forest-800: #004648;
  --color-tropical-forest-900: #0e3536;
  --color-tropical-forest-950: #052021;
  --color-bubbles: #e3fffe;
  --color-bubbles-50: #e3fffe;
  --color-bubbles-100: #e1f2f1;
  --color-bubbles-200: #cadede;
  --color-bubbles-300: #b1c8c7;
  --color-bubbles-400: #8fa8a7;
  --color-bubbles-500: #738c8c;
  --color-bubbles-600: #597171;
  --color-bubbles-700: #445a5a;
  --color-bubbles-800: #334746;
  --color-bubbles-900: #263636;
  --color-bubbles-950: #162222;
  --color-timeless-beauty: #b92c40;
  --color-timeless-beauty-50: #fff1f1;
  --color-timeless-beauty-100: #ffe3e3;
  --color-timeless-beauty-200: #ffc6c6;
  --color-timeless-beauty-300: #ffa2a4;
  --color-timeless-beauty-400: #f76d76;
  --color-timeless-beauty-500: #d94c5a;
  --color-timeless-beauty-600: #b92c40;
  --color-timeless-beauty-700: #99172e;
  --color-timeless-beauty-800: #7c0520;
  --color-timeless-beauty-900: #630017;
  --color-timeless-beauty-950: #41000c;
  --color-cold-light-of-day: #00e5ea;
  --color-cold-light-of-day-50: #e9ffff;
  --color-cold-light-of-day-100: #c3feff;
  --color-cold-light-of-day-200: #88f3f6;
  --color-cold-light-of-day-300: #00e5ea;
  --color-cold-light-of-day-400: #00c0c4;
  --color-cold-light-of-day-500: #009fa3;
  --color-cold-light-of-day-600: #008083;
  --color-cold-light-of-day-700: #006567;
  --color-cold-light-of-day-800: #004e50;
  --color-cold-light-of-day-900: #003b3d;
  --color-cold-light-of-day-950: #002526;
  --color-munch-on-melon: #f2436c;
  --color-munch-on-melon-50: #fff3f4;
  --color-munch-on-melon-100: #ffe8ea;
  --color-munch-on-melon-200: #ffcdd2;
  --color-munch-on-melon-300: #ffadb6;
  --color-munch-on-melon-400: #ff768d;
  --color-munch-on-melon-500: #f2436c;
  --color-munch-on-melon-600: #cf1a51;
  --color-munch-on-melon-700: #a9003e;
  --color-munch-on-melon-800: #85002f;
  --color-munch-on-melon-900: #680023;
  --color-munch-on-melon-950: #430014;
}