Water Leaf to Nightly Voyager color palette

B2EADFWater Leaf DAA6DECandy Floss 209378Pool Table 9D4F54Lumberjack 652826Jazz 371E35Nightly Voyager

Open in generator Export PNG, PDF, ASE…

About this palette

Water Leaf to Nightly Voyager is a 6-color cool palette: #B2EADF (Water Leaf), #DAA6DE (Candy Floss), #209378 (Pool Table), #9D4F54 (Lumberjack), #652826 (Jazz), #371E35 (Nightly Voyager). It mixes turquoise, pink, red, brown, purple tones and feels cool overall. The strongest text pairing is #B2EADF on #371E35 with a contrast ratio of 11.24:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Water Leaf	rgb(178, 234, 223)	hsl(168, 57%, 81%)
Candy Floss	rgb(218, 166, 222)	hsl(296, 46%, 76%)
Pool Table	rgb(32, 147, 120)	hsl(166, 64%, 35%)
Lumberjack	rgb(157, 79, 84)	hsl(356, 33%, 46%)
Jazz	rgb(101, 40, 38)	hsl(2, 45%, 27%)
Nightly Voyager	rgb(55, 30, 53)	hsl(305, 29%, 17%)

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.

Aa11.24:1 Very good#B2EADF on #371E35
Aa11.24:1 Very good#371E35 on #B2EADF
Aa8.34:1 Very good#B2EADF on #652826
Aa8.34:1 Very good#652826 on #B2EADF
Aa7.50:1 Very good#DAA6DE on #371E35
Aa7.50:1 Very good#371E35 on #DAA6DE
Aa5.57:1 Good#DAA6DE on #652826
Aa5.57:1 Good#652826 on #DAA6DE

Color blindness preview

CSS variables

/* Water Leaf to Nightly Voyager — https://swatchly.xyz/palette/b2eadf-daa6de-209378-9d4f54-652826-371e35 */
:root {
  --water-leaf: #b2eadf;
  --candy-floss: #daa6de;
  --pool-table: #209378;
  --lumberjack: #9d4f54;
  --jazz: #652826;
  --nightly-voyager: #371e35;
}

Tailwind CSS v4

/* Water Leaf to Nightly Voyager — https://swatchly.xyz/palette/b2eadf-daa6de-209378-9d4f54-652826-371e35 */
@theme {
  --color-water-leaf: #b2eadf;
  --color-water-leaf-50: #e6fffa;
  --color-water-leaf-100: #d7f8f1;
  --color-water-leaf-200: #b2eadf;
  --color-water-leaf-300: #a3d0c7;
  --color-water-leaf-400: #7db1a7;
  --color-water-leaf-500: #5f948b;
  --color-water-leaf-600: #44796f;
  --color-water-leaf-700: #306058;
  --color-water-leaf-800: #204b44;
  --color-water-leaf-900: #153a34;
  --color-water-leaf-950: #092420;
  --color-candy-floss: #daa6de;
  --color-candy-floss-50: #feebff;
  --color-candy-floss-100: #fddaff;
  --color-candy-floss-200: #ebc2ee;
  --color-candy-floss-300: #daa6de;
  --color-candy-floss-400: #ba89be;
  --color-candy-floss-500: #9f6ea3;
  --color-candy-floss-600: #845588;
  --color-candy-floss-700: #6b416f;
  --color-candy-floss-800: #563159;
  --color-candy-floss-900: #442547;
  --color-candy-floss-950: #2c152e;
  --color-pool-table: #209378;
  --color-pool-table-50: #d4fff0;
  --color-pool-table-100: #baf8e4;
  --color-pool-table-200: #9be5ce;
  --color-pool-table-300: #78cfb5;
  --color-pool-table-400: #4ab094;
  --color-pool-table-500: #209378;
  --color-pool-table-600: #007860;
  --color-pool-table-700: #005f4c;
  --color-pool-table-800: #004b3b;
  --color-pool-table-900: #003a2d;
  --color-pool-table-950: #00251c;
  --color-lumberjack: #9d4f54;
  --color-lumberjack-50: #fff1f1;
  --color-lumberjack-100: #ffe3e3;
  --color-lumberjack-200: #ffc6c7;
  --color-lumberjack-300: #f4a9ab;
  --color-lumberjack-400: #d7868a;
  --color-lumberjack-500: #bb6a6e;
  --color-lumberjack-600: #9d4f54;
  --color-lumberjack-700: #803b40;
  --color-lumberjack-800: #682b30;
  --color-lumberjack-900: #521f24;
  --color-lumberjack-950: #361114;
  --color-jazz: #652826;
  --color-jazz-50: #fff2f0;
  --color-jazz-100: #ffe4e1;
  --color-jazz-200: #ffc8c3;
  --color-jazz-300: #eeada8;
  --color-jazz-400: #d08b86;
  --color-jazz-500: #b36e69;
  --color-jazz-600: #945450;
  --color-jazz-700: #783e3b;
  --color-jazz-800: #652826;
  --color-jazz-900: #4b211f;
  --color-jazz-950: #301311;
  --color-nightly-voyager: #371e35;
  --color-nightly-voyager-50: #fff0fd;
  --color-nightly-voyager-100: #f9e4f6;
  --color-nightly-voyager-200: #e7cfe4;
  --color-nightly-voyager-300: #d3b7cf;
  --color-nightly-voyager-400: #b596b1;
  --color-nightly-voyager-500: #9b7d98;
  --color-nightly-voyager-600: #82647e;
  --color-nightly-voyager-700: #6b5068;
  --color-nightly-voyager-800: #584055;
  --color-nightly-voyager-900: #483346;
  --color-nightly-voyager-950: #371e35;
}