Underwater Moonlight to Botanical Night color palette

3D89B2Underwater Moonlight 0E7459Tropical Rainforest F88DB3Rock’n’Rose FFE1CCCoral Kiss 004034Botanical Night

Open in generator Export PNG, PDF, ASE…

About this palette

Underwater Moonlight to Botanical Night is a 5-color cool, vintage palette: #3D89B2 (Underwater Moonlight), #0E7459 (Tropical Rainforest), #F88DB3 (Rock’n’Rose), #FFE1CC (Coral Kiss), #004034 (Botanical Night). It mixes blue, turquoise, pink, orange tones and feels cool overall. The strongest text pairing is #FFE1CC on #004034 with a contrast ratio of 9.48:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Underwater Moonlight	rgb(61, 137, 178)	hsl(201, 49%, 47%)
Tropical Rainforest	rgb(14, 116, 89)	hsl(164, 78%, 25%)
Rock’n’Rose	rgb(248, 141, 179)	hsl(339, 88%, 76%)
Coral Kiss	rgb(255, 225, 204)	hsl(25, 100%, 90%)
Botanical Night	rgb(0, 64, 52)	hsl(169, 100%, 13%)

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.

Aa9.48:1 Very good#FFE1CC on #004034
Aa9.48:1 Very good#004034 on #FFE1CC
Aa5.30:1 Good#F88DB3 on #004034
Aa5.30:1 Good#004034 on #F88DB3
Aa4.61:1 Good#0E7459 on #FFE1CC
Aa4.61:1 Good#FFE1CC on #0E7459
Aa3.12:1 Poor#3D89B2 on #FFE1CC
Aa3.12:1 Poor#FFE1CC on #3D89B2

Color blindness preview

CSS variables

/* Underwater Moonlight to Botanical Night — https://swatchly.xyz/palette/3d89b2-0e7459-f88db3-ffe1cc-004034 */
:root {
  --underwater-moonlight: #3d89b2;
  --tropical-rainforest: #0e7459;
  --rock-n-rose: #f88db3;
  --coral-kiss: #ffe1cc;
  --botanical-night: #004034;
}

Tailwind CSS v4

/* Underwater Moonlight to Botanical Night — https://swatchly.xyz/palette/3d89b2-0e7459-f88db3-ffe1cc-004034 */
@theme {
  --color-underwater-moonlight: #3d89b2;
  --color-underwater-moonlight-50: #e9f6ff;
  --color-underwater-moonlight-100: #d2eeff;
  --color-underwater-moonlight-200: #a5ddfe;
  --color-underwater-moonlight-300: #86c6ec;
  --color-underwater-moonlight-400: #5da6cf;
  --color-underwater-moonlight-500: #3d89b2;
  --color-underwater-moonlight-600: #226f96;
  --color-underwater-moonlight-700: #0b587b;
  --color-underwater-moonlight-800: #004563;
  --color-underwater-moonlight-900: #00364e;
  --color-underwater-moonlight-950: #002233;
  --color-tropical-rainforest: #0e7459;
  --color-tropical-rainforest-50: #dafff0;
  --color-tropical-rainforest-100: #c3f7e2;
  --color-tropical-rainforest-200: #a4e4cc;
  --color-tropical-rainforest-300: #84ceb2;
  --color-tropical-rainforest-400: #5aae91;
  --color-tropical-rainforest-500: #379174;
  --color-tropical-rainforest-600: #0e7459;
  --color-tropical-rainforest-700: #005d46;
  --color-tropical-rainforest-800: #004936;
  --color-tropical-rainforest-900: #003829;
  --color-tropical-rainforest-950: #002419;
  --color-rock-n-rose: #f88db3;
  --color-rock-n-rose-50: #ffe7ee;
  --color-rock-n-rose-100: #ffd5e2;
  --color-rock-n-rose-200: #ffb3cc;
  --color-rock-n-rose-300: #f88db3;
  --color-rock-n-rose-400: #d77196;
  --color-rock-n-rose-500: #bc577d;
  --color-rock-n-rose-600: #9f4065;
  --color-rock-n-rose-700: #842d51;
  --color-rock-n-rose-800: #6c2040;
  --color-rock-n-rose-900: #581632;
  --color-rock-n-rose-950: #3a0a1f;
  --color-coral-kiss: #ffe1cc;
  --color-coral-kiss-50: #ffefe3;
  --color-coral-kiss-100: #ffe1cc;
  --color-coral-kiss-200: #e6d0c0;
  --color-coral-kiss-300: #d2b9a8;
  --color-coral-kiss-400: #b59a87;
  --color-coral-kiss-500: #9a7f6c;
  --color-coral-kiss-600: #7f6553;
  --color-coral-kiss-700: #67503f;
  --color-coral-kiss-800: #523e2f;
  --color-coral-kiss-900: #402f23;
  --color-coral-kiss-950: #281c14;
  --color-botanical-night: #004034;
  --color-botanical-night-50: #defdf4;
  --color-botanical-night-100: #d2f4ea;
  --color-botanical-night-200: #b9e2d6;
  --color-botanical-night-300: #9dcdbf;
  --color-botanical-night-400: #7aafa0;
  --color-botanical-night-500: #5d9485;
  --color-botanical-night-600: #44796b;
  --color-botanical-night-700: #306256;
  --color-botanical-night-800: #214e43;
  --color-botanical-night-900: #004034;
  --color-botanical-night-950: #0a2721;
}