Veiling Waterfalls to Purple Illusion color palette

D0EEFFVeiling Waterfalls 003D4DManiac Mansion 918FD7Perrywinkle 647711Topiary Green 924900Brownie B6B7FFPurple Illusion

Open in generator Export PNG, PDF, ASE…

About this palette

Veiling Waterfalls to Purple Illusion is a 6-color cool palette: #D0EEFF (Veiling Waterfalls), #003D4D (Maniac Mansion), #918FD7 (Perrywinkle), #647711 (Topiary Green), #924900 (Brownie), #B6B7FF (Purple Illusion). It mixes blue, purple, green, brown tones and feels cool overall. The strongest text pairing is #D0EEFF on #003D4D with a contrast ratio of 9.78:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Veiling Waterfalls	rgb(208, 238, 255)	hsl(202, 100%, 91%)
Maniac Mansion	rgb(0, 61, 77)	hsl(192, 100%, 15%)
Perrywinkle	rgb(145, 143, 215)	hsl(242, 47%, 70%)
Topiary Green	rgb(100, 119, 17)	hsl(71, 75%, 27%)
Brownie	rgb(146, 73, 0)	hsl(30, 100%, 29%)
Purple Illusion	rgb(182, 183, 255)	hsl(239, 100%, 86%)

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.78:1 Very good#D0EEFF on #003D4D
Aa9.78:1 Very good#003D4D on #D0EEFF
Aa6.31:1 Good#003D4D on #B6B7FF
Aa6.31:1 Good#B6B7FF on #003D4D
Aa5.47:1 Good#D0EEFF on #924900
Aa5.47:1 Good#924900 on #D0EEFF
Aa4.14:1 Poor#D0EEFF on #647711
Aa4.14:1 Poor#647711 on #D0EEFF

Color blindness preview

CSS variables

/* Veiling Waterfalls to Purple Illusion — https://swatchly.xyz/palette/d0eeff-003d4d-918fd7-647711-924900-b6b7ff */
:root {
  --veiling-waterfalls: #d0eeff;
  --maniac-mansion: #003d4d;
  --perrywinkle: #918fd7;
  --topiary-green: #647711;
  --brownie: #924900;
  --purple-illusion: #b6b7ff;
}

Tailwind CSS v4

/* Veiling Waterfalls to Purple Illusion — https://swatchly.xyz/palette/d0eeff-003d4d-918fd7-647711-924900-b6b7ff */
@theme {
  --color-veiling-waterfalls: #d0eeff;
  --color-veiling-waterfalls-50: #e6f6ff;
  --color-veiling-waterfalls-100: #d0eeff;
  --color-veiling-waterfalls-200: #c3d9e6;
  --color-veiling-waterfalls-300: #abc4d2;
  --color-veiling-waterfalls-400: #8aa5b4;
  --color-veiling-waterfalls-500: #6e8a99;
  --color-veiling-waterfalls-600: #55707e;
  --color-veiling-waterfalls-700: #415966;
  --color-veiling-waterfalls-800: #314651;
  --color-veiling-waterfalls-900: #24363f;
  --color-veiling-waterfalls-950: #142128;
  --color-maniac-mansion: #003d4d;
  --color-maniac-mansion-50: #e7f9ff;
  --color-maniac-mansion-100: #d1f2fe;
  --color-maniac-mansion-200: #b8dfed;
  --color-maniac-mansion-300: #9cc9da;
  --color-maniac-mansion-400: #79abbd;
  --color-maniac-mansion-500: #5c90a2;
  --color-maniac-mansion-600: #437687;
  --color-maniac-mansion-700: #305f6f;
  --color-maniac-mansion-800: #214c5a;
  --color-maniac-mansion-900: #003d4d;
  --color-maniac-mansion-950: #0a262f;
  --color-perrywinkle: #918fd7;
  --color-perrywinkle-50: #f0f0ff;
  --color-perrywinkle-100: #e3e3ff;
  --color-perrywinkle-200: #cbcbff;
  --color-perrywinkle-300: #b2b1f3;
  --color-perrywinkle-400: #918fd7;
  --color-perrywinkle-500: #7875bb;
  --color-perrywinkle-600: #605d9e;
  --color-perrywinkle-700: #4c4883;
  --color-perrywinkle-800: #3b386b;
  --color-perrywinkle-900: #2e2b57;
  --color-perrywinkle-950: #1d1a3a;
  --color-topiary-green: #647711;
  --color-topiary-green-50: #effdcb;
  --color-topiary-green-100: #e4f4bc;
  --color-topiary-green-200: #d0e29f;
  --color-topiary-green-300: #b8cc7f;
  --color-topiary-green-400: #99ad56;
  --color-topiary-green-500: #7e9235;
  --color-topiary-green-600: #647711;
  --color-topiary-green-700: #4f5f00;
  --color-topiary-green-800: #3d4a00;
  --color-topiary-green-900: #2e3900;
  --color-topiary-green-950: #1c2300;
  --color-brownie: #924900;
  --color-brownie-50: #fff2ea;
  --color-brownie-100: #ffe6d5;
  --color-brownie-200: #ffceae;
  --color-brownie-300: #f8b385;
  --color-brownie-400: #df935e;
  --color-brownie-500: #c57840;
  --color-brownie-600: #aa5f24;
  --color-brownie-700: #924900;
  --color-brownie-800: #733800;
  --color-brownie-900: #5a2a00;
  --color-brownie-950: #3b1900;
  --color-purple-illusion: #b6b7ff;
  --color-purple-illusion-50: #f2f3ff;
  --color-purple-illusion-100: #e7e8ff;
  --color-purple-illusion-200: #d0d1ff;
  --color-purple-illusion-300: #b6b7ff;
  --color-purple-illusion-400: #9898db;
  --color-purple-illusion-500: #7d7dc0;
  --color-purple-illusion-600: #6462a3;
  --color-purple-illusion-700: #4e4d87;
  --color-purple-illusion-800: #3d3b6d;
  --color-purple-illusion-900: #2e2c57;
  --color-purple-illusion-950: #1c1b3a;
}