Water to Royal Neptune color palette

D7F0FFWater EAB498Wax Flower A992EDDreamy Candy Forest 817E10Olive 5F539EUltrapurple Merge 013B4ARoyal Neptune

Open in generator Export PNG, PDF, ASE…

About this palette

Water to Royal Neptune is a 6-color palette: #D7F0FF (Water), #EAB498 (Wax Flower), #A992ED (Dreamy Candy Forest), #817E10 (Olive), #5F539E (Ultrapurple Merge), #013B4A (Royal Neptune). It mixes white, orange, purple, yellow, blue tones and feels cool overall. The strongest text pairing is #D7F0FF on #013B4A with a contrast ratio of 10.31:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Water	rgb(215, 240, 255)	hsl(202, 100%, 92%)
Wax Flower	rgb(234, 180, 152)	hsl(20, 66%, 76%)
Dreamy Candy Forest	rgb(169, 146, 237)	hsl(255, 72%, 75%)
Olive	rgb(129, 126, 16)	hsl(58, 78%, 28%)
Ultrapurple Merge	rgb(95, 83, 158)	hsl(250, 31%, 47%)
Royal Neptune	rgb(1, 59, 74)	hsl(192, 97%, 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.

Aa10.31:1 Very good#D7F0FF on #013B4A
Aa10.31:1 Very good#013B4A on #D7F0FF
Aa6.65:1 Good#EAB498 on #013B4A
Aa6.65:1 Good#013B4A on #EAB498
Aa5.53:1 Good#D7F0FF on #5F539E
Aa5.53:1 Good#5F539E on #D7F0FF
Aa4.65:1 Good#A992ED on #013B4A
Aa4.65:1 Good#013B4A on #A992ED

Color blindness preview

CSS variables

/* Water to Royal Neptune — https://swatchly.xyz/palette/d7f0ff-eab498-a992ed-817e10-5f539e-013b4a */
:root {
  --water: #d7f0ff;
  --wax-flower: #eab498;
  --dreamy-candy-forest: #a992ed;
  --olive: #817e10;
  --ultrapurple-merge: #5f539e;
  --royal-neptune: #013b4a;
}

Tailwind CSS v4

/* Water to Royal Neptune — https://swatchly.xyz/palette/d7f0ff-eab498-a992ed-817e10-5f539e-013b4a */
@theme {
  --color-water: #d7f0ff;
  --color-water-50: #ecf8ff;
  --color-water-100: #d7f0ff;
  --color-water-200: #c9dbe6;
  --color-water-300: #b0c5d1;
  --color-water-400: #8fa6b3;
  --color-water-500: #738a98;
  --color-water-600: #5a6f7c;
  --color-water-700: #455864;
  --color-water-800: #34454f;
  --color-water-900: #26353e;
  --color-water-950: #162127;
  --color-wax-flower: #eab498;
  --color-wax-flower-50: #fff3ec;
  --color-wax-flower-100: #ffe6d9;
  --color-wax-flower-200: #f7ceb9;
  --color-wax-flower-300: #eab498;
  --color-wax-flower-400: #c7957b;
  --color-wax-flower-500: #ac795f;
  --color-wax-flower-600: #8f5f46;
  --color-wax-flower-700: #744a32;
  --color-wax-flower-800: #5d3824;
  --color-wax-flower-900: #492a19;
  --color-wax-flower-950: #2f190c;
  --color-dreamy-candy-forest: #a992ed;
  --color-dreamy-candy-forest-50: #f6f4ff;
  --color-dreamy-candy-forest-100: #ede9ff;
  --color-dreamy-candy-forest-200: #dbd2ff;
  --color-dreamy-candy-forest-300: #c6b6ff;
  --color-dreamy-candy-forest-400: #a992ed;
  --color-dreamy-candy-forest-500: #8d76ce;
  --color-dreamy-candy-forest-600: #735bb0;
  --color-dreamy-candy-forest-700: #5c4592;
  --color-dreamy-candy-forest-800: #483477;
  --color-dreamy-candy-forest-900: #37265f;
  --color-dreamy-candy-forest-950: #22163f;
  --color-olive: #817e10;
  --color-olive-50: #f7f7c2;
  --color-olive-100: #ebebaf;
  --color-olive-200: #d6d68d;
  --color-olive-300: #bebd69;
  --color-olive-400: #9e9c3c;
  --color-olive-500: #817e10;
  --color-olive-600: #686500;
  --color-olive-700: #535100;
  --color-olive-800: #413f00;
  --color-olive-900: #333100;
  --color-olive-950: #201f00;
  --color-ultrapurple-merge: #5f539e;
  --color-ultrapurple-merge-50: #f4f4ff;
  --color-ultrapurple-merge-100: #eae8ff;
  --color-ultrapurple-merge-200: #d7d4ff;
  --color-ultrapurple-merge-300: #c2bcff;
  --color-ultrapurple-merge-400: #a59ce9;
  --color-ultrapurple-merge-500: #8c82d0;
  --color-ultrapurple-merge-600: #7469b5;
  --color-ultrapurple-merge-700: #5f539e;
  --color-ultrapurple-merge-800: #4a407f;
  --color-ultrapurple-merge-900: #392f66;
  --color-ultrapurple-merge-950: #241c44;
  --color-royal-neptune: #013b4a;
  --color-royal-neptune-50: #e7f9ff;
  --color-royal-neptune-100: #d1f1fd;
  --color-royal-neptune-200: #b9dfec;
  --color-royal-neptune-300: #9dc9d8;
  --color-royal-neptune-400: #7aaabb;
  --color-royal-neptune-500: #5d8fa0;
  --color-royal-neptune-600: #447585;
  --color-royal-neptune-700: #305e6c;
  --color-royal-neptune-800: #214a57;
  --color-royal-neptune-900: #013b4a;
  --color-royal-neptune-950: #0a242c;
}