Underwater Moonlight to Everglade color palette

428DB4Underwater Moonlight 2B6C79Ocean’s Embrace 84CEB5Bevelled Glass E3F9FFCalm Waters 1B453DEverglade

Open in generator Export PNG, PDF, ASE…

About this palette

Underwater Moonlight to Everglade is a 5-color cool palette: #428DB4 (Underwater Moonlight), #2B6C79 (Ocean’s Embrace), #84CEB5 (Bevelled Glass), #E3F9FF (Calm Waters), #1B453D (Everglade). It mixes blue, turquoise, white tones and feels cool overall. The strongest text pairing is #E3F9FF on #1B453D with a contrast ratio of 9.80:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Underwater Moonlight	rgb(66, 141, 180)	hsl(201, 46%, 48%)
Ocean’s Embrace	rgb(43, 108, 121)	hsl(190, 48%, 32%)
Bevelled Glass	rgb(132, 206, 181)	hsl(160, 43%, 66%)
Calm Waters	rgb(227, 249, 255)	hsl(193, 100%, 95%)
Everglade	rgb(27, 69, 61)	hsl(169, 44%, 19%)

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.80:1 Very good#E3F9FF on #1B453D
Aa9.80:1 Very good#1B453D on #E3F9FF
Aa5.84:1 Good#84CEB5 on #1B453D
Aa5.84:1 Good#1B453D on #84CEB5
Aa5.47:1 Good#2B6C79 on #E3F9FF
Aa5.47:1 Good#E3F9FF on #2B6C79
Aa3.38:1 Poor#428DB4 on #E3F9FF
Aa3.38:1 Poor#E3F9FF on #428DB4

Color blindness preview

CSS variables

/* Underwater Moonlight to Everglade — https://swatchly.xyz/palette/428db4-2b6c79-84ceb5-e3f9ff-1b453d */
:root {
  --underwater-moonlight: #428db4;
  --ocean-s-embrace: #2b6c79;
  --bevelled-glass: #84ceb5;
  --calm-waters: #e3f9ff;
  --everglade: #1b453d;
}

Tailwind CSS v4

/* Underwater Moonlight to Everglade — https://swatchly.xyz/palette/428db4-2b6c79-84ceb5-e3f9ff-1b453d */
@theme {
  --color-underwater-moonlight: #428db4;
  --color-underwater-moonlight-50: #eaf7ff;
  --color-underwater-moonlight-100: #d4efff;
  --color-underwater-moonlight-200: #a8dffe;
  --color-underwater-moonlight-300: #8ac9ec;
  --color-underwater-moonlight-400: #62a9d0;
  --color-underwater-moonlight-500: #428db4;
  --color-underwater-moonlight-600: #267297;
  --color-underwater-moonlight-700: #0f5b7c;
  --color-underwater-moonlight-800: #004764;
  --color-underwater-moonlight-900: #00374f;
  --color-underwater-moonlight-950: #002233;
  --color-ocean-s-embrace: #2b6c79;
  --color-ocean-s-embrace-50: #e4faff;
  --color-ocean-s-embrace-100: #caf1fb;
  --color-ocean-s-embrace-200: #addde8;
  --color-ocean-s-embrace-300: #8fc6d2;
  --color-ocean-s-embrace-400: #68a6b3;
  --color-ocean-s-embrace-500: #498896;
  --color-ocean-s-embrace-600: #2b6c79;
  --color-ocean-s-embrace-700: #1d5661;
  --color-ocean-s-embrace-800: #10444d;
  --color-ocean-s-embrace-900: #07353d;
  --color-ocean-s-embrace-950: #032127;
  --color-bevelled-glass: #84ceb5;
  --color-bevelled-glass-50: #d5feee;
  --color-bevelled-glass-100: #c6f4e3;
  --color-bevelled-glass-200: #aae2ce;
  --color-bevelled-glass-300: #84ceb5;
  --color-bevelled-glass-400: #68ae97;
  --color-bevelled-glass-500: #4a937c;
  --color-bevelled-glass-600: #2f7963;
  --color-bevelled-glass-700: #1b614e;
  --color-bevelled-glass-800: #0c4d3d;
  --color-bevelled-glass-900: #033d2e;
  --color-bevelled-glass-950: #00261c;
  --color-calm-waters: #e3f9ff;
  --color-calm-waters-50: #e3f9ff;
  --color-calm-waters-100: #e0edf1;
  --color-calm-waters-200: #cadadf;
  --color-calm-waters-300: #b2c4c9;
  --color-calm-waters-400: #92a5ab;
  --color-calm-waters-500: #768a8f;
  --color-calm-waters-600: #5d7075;
  --color-calm-waters-700: #47595d;
  --color-calm-waters-800: #364549;
  --color-calm-waters-900: #293539;
  --color-calm-waters-950: #182123;
  --color-everglade: #1b453d;
  --color-everglade-50: #e3fbf5;
  --color-everglade-100: #d7f2eb;
  --color-everglade-200: #bfe0d8;
  --color-everglade-300: #a3c9c0;
  --color-everglade-400: #80a9a0;
  --color-everglade-500: #628d83;
  --color-everglade-600: #487168;
  --color-everglade-700: #345851;
  --color-everglade-800: #1b453d;
  --color-everglade-900: #19342e;
  --color-everglade-950: #0d201c;
}