Tropical Forest to Near Moon color palette

004644Tropical Forest 4A9293Martian Cerulean 006F70Pine Scented Lagoon 70BAB8Castaway 4DE2DANear Moon

Open in generator Export PNG, PDF, ASE…

About this palette

Tropical Forest to Near Moon is a 5-color cool, monochromatic palette: #004644 (Tropical Forest), #4A9293 (Martian Cerulean), #006F70 (Pine Scented Lagoon), #70BAB8 (Castaway), #4DE2DA (Near Moon). It mixes turquoise tones and feels cool overall. The strongest text pairing is #004644 on #4DE2DA with a contrast ratio of 6.74:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tropical Forest	rgb(0, 70, 68)	hsl(178, 100%, 14%)
Martian Cerulean	rgb(74, 146, 147)	hsl(181, 33%, 43%)
Pine Scented Lagoon	rgb(0, 111, 112)	hsl(181, 100%, 22%)
Castaway	rgb(112, 186, 184)	hsl(178, 35%, 58%)
Near Moon	rgb(77, 226, 218)	hsl(177, 72%, 59%)

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.

Aa6.74:1 Good#004644 on #4DE2DA
Aa6.74:1 Good#4DE2DA on #004644
Aa4.80:1 Good#004644 on #70BAB8
Aa4.80:1 Good#70BAB8 on #004644
Aa3.76:1 Poor#006F70 on #4DE2DA
Aa3.76:1 Poor#4DE2DA on #006F70

Color blindness preview

CSS variables

/* Tropical Forest to Near Moon — https://swatchly.xyz/palette/004644-4a9293-006f70-70bab8-4de2da */
:root {
  --tropical-forest: #004644;
  --martian-cerulean: #4a9293;
  --pine-scented-lagoon: #006f70;
  --castaway: #70bab8;
  --near-moon: #4de2da;
}

Tailwind CSS v4

/* Tropical Forest to Near Moon — https://swatchly.xyz/palette/004644-4a9293-006f70-70bab8-4de2da */
@theme {
  --color-tropical-forest: #004644;
  --color-tropical-forest-50: #ddfdfb;
  --color-tropical-forest-100: #cff4f1;
  --color-tropical-forest-200: #b6e2df;
  --color-tropical-forest-300: #99cbc8;
  --color-tropical-forest-400: #73aba8;
  --color-tropical-forest-500: #548f8c;
  --color-tropical-forest-600: #3a7270;
  --color-tropical-forest-700: #265a57;
  --color-tropical-forest-800: #004644;
  --color-tropical-forest-900: #0e3533;
  --color-tropical-forest-950: #05201f;
  --color-martian-cerulean: #4a9293;
  --color-martian-cerulean-50: #d7fefe;
  --color-martian-cerulean-100: #c9f4f5;
  --color-martian-cerulean-200: #aee2e2;
  --color-martian-cerulean-300: #90cdcd;
  --color-martian-cerulean-400: #69aeaf;
  --color-martian-cerulean-500: #4a9293;
  --color-martian-cerulean-600: #2f7778;
  --color-martian-cerulean-700: #1a5f61;
  --color-martian-cerulean-800: #0a4b4c;
  --color-martian-cerulean-900: #023a3b;
  --color-martian-cerulean-950: #002526;
  --color-pine-scented-lagoon: #006f70;
  --color-pine-scented-lagoon-50: #d4ffff;
  --color-pine-scented-lagoon-100: #c1f5f4;
  --color-pine-scented-lagoon-200: #a2e1e1;
  --color-pine-scented-lagoon-300: #80caca;
  --color-pine-scented-lagoon-400: #55a9aa;
  --color-pine-scented-lagoon-500: #328c8d;
  --color-pine-scented-lagoon-600: #006f70;
  --color-pine-scented-lagoon-700: #005859;
  --color-pine-scented-lagoon-800: #004546;
  --color-pine-scented-lagoon-900: #003636;
  --color-pine-scented-lagoon-950: #002222;
  --color-castaway: #70bab8;
  --color-castaway-50: #e4fffe;
  --color-castaway-100: #d0faf8;
  --color-castaway-200: #b7eae8;
  --color-castaway-300: #9bd6d4;
  --color-castaway-400: #70bab8;
  --color-castaway-500: #539c9a;
  --color-castaway-600: #347f7e;
  --color-castaway-700: #1c6664;
  --color-castaway-800: #0a4f4f;
  --color-castaway-900: #003d3c;
  --color-castaway-950: #002525;
  --color-near-moon: #4de2da;
  --color-near-moon-50: #e6fffd;
  --color-near-moon-100: #befffa;
  --color-near-moon-200: #96f1ea;
  --color-near-moon-300: #4de2da;
  --color-near-moon-400: #2bbfb8;
  --color-near-moon-500: #00a099;
  --color-near-moon-600: #00807b;
  --color-near-moon-700: #006561;
  --color-near-moon-800: #004e4b;
  --color-near-moon-900: #003c39;
  --color-near-moon-950: #002524;
}