Veiling Waterfalls to Halo Color Palette

About this palette

Veiling Waterfalls to Halo is a 5-color pastel, light, cool palette: #C6E9FF (Veiling Waterfalls), #BCE6B7 (Glaucous Green), #F0DAFF (Grape Taffy), #F6F8FF (Ghost White), #DEC396 (Halo). It mixes blue, green, purple, white, yellow tones and feels cool overall. The strongest text pairing is #F6F8FF on #DEC396 with a contrast ratio of 1.60:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Veiling Waterfalls	rgb(198, 233, 255)	hsl(203, 100%, 89%)
Glaucous Green	rgb(188, 230, 183)	hsl(114, 48%, 81%)
Grape Taffy	rgb(240, 218, 255)	hsl(276, 100%, 93%)
Ghost White	rgb(246, 248, 255)	hsl(227, 100%, 98%)
Halo	rgb(222, 195, 150)	hsl(37, 52%, 73%)

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.

Color blindness preview

CSS variables

/* Veiling Waterfalls to Halo — https://swatchly.xyz/palette/c6e9ff-bce6b7-f0daff-f6f8ff-dec396 */
:root {
  --veiling-waterfalls: #c6e9ff;
  --glaucous-green: #bce6b7;
  --grape-taffy: #f0daff;
  --ghost-white: #f6f8ff;
  --halo: #dec396;
}

Tailwind CSS v4

/* Veiling Waterfalls to Halo — https://swatchly.xyz/palette/c6e9ff-bce6b7-f0daff-f6f8ff-dec396 */
@theme {
  --color-veiling-waterfalls: #c6e9ff;
  --color-veiling-waterfalls-50: #ddf2ff;
  --color-veiling-waterfalls-100: #c6e9ff;
  --color-veiling-waterfalls-200: #bbd5e6;
  --color-veiling-waterfalls-300: #a3c1d3;
  --color-veiling-waterfalls-400: #83a3b7;
  --color-veiling-waterfalls-500: #68899d;
  --color-veiling-waterfalls-600: #506f82;
  --color-veiling-waterfalls-700: #3d596b;
  --color-veiling-waterfalls-800: #2d4655;
  --color-veiling-waterfalls-900: #213642;
  --color-veiling-waterfalls-950: #12212a;
  --color-glaucous-green: #bce6b7;
  --color-glaucous-green-50: #e6fee4;
  --color-glaucous-green-100: #dbf5d7;
  --color-glaucous-green-200: #bce6b7;
  --color-glaucous-green-300: #aacda6;
  --color-glaucous-green-400: #88ae83;
  --color-glaucous-green-500: #6c9367;
  --color-glaucous-green-600: #52774e;
  --color-glaucous-green-700: #3e5f3a;
  --color-glaucous-green-800: #2d4b2a;
  --color-glaucous-green-900: #213a1e;
  --color-glaucous-green-950: #122410;
  --color-grape-taffy: #f0daff;
  --color-grape-taffy-50: #f6e9ff;
  --color-grape-taffy-100: #f0daff;
  --color-grape-taffy-200: #dbcae6;
  --color-grape-taffy-300: #c6b4d3;
  --color-grape-taffy-400: #a995b7;
  --color-grape-taffy-500: #8f7b9c;
  --color-grape-taffy-600: #756282;
  --color-grape-taffy-700: #5f4d6a;
  --color-grape-taffy-800: #4b3b54;
  --color-grape-taffy-900: #3a2d42;
  --color-grape-taffy-950: #241b2a;
  --color-ghost-white: #f6f8ff;
  --color-ghost-white-50: #f6f8ff;
  --color-ghost-white-100: #eceef2;
  --color-ghost-white-200: #d8d9de;
  --color-ghost-white-300: #c0c2c8;
  --color-ghost-white-400: #a0a2a8;
  --color-ghost-white-500: #85868d;
  --color-ghost-white-600: #6a6b71;
  --color-ghost-white-700: #53555a;
  --color-ghost-white-800: #414247;
  --color-ghost-white-900: #323337;
  --color-ghost-white-950: #1e1f22;
  --color-halo: #dec396;
  --color-halo-50: #fff7eb;
  --color-halo-100: #feedd2;
  --color-halo-200: #eddaba;
  --color-halo-300: #dec396;
  --color-halo-400: #bba379;
  --color-halo-500: #9f865b;
  --color-halo-600: #836a41;
  --color-halo-700: #69532d;
  --color-halo-800: #53401e;
  --color-halo-900: #403013;
  --color-halo-950: #291d08;
}