Icy Plains to Midnight Velvet color palette

C8D8FFIcy Plains 96B4FEWondrous Wisteria 468CDABlue Jay 6A5490Passion Flower 00496ASeafarer 2C1D43Midnight Velvet

Open in generator Export PNG, PDF, ASE…

About this palette

Icy Plains to Midnight Velvet is a 6-color cool, gradient palette: #C8D8FF (Icy Plains), #96B4FE (Wondrous Wisteria), #468CDA (Blue Jay), #6A5490 (Passion Flower), #00496A (Seafarer), #2C1D43 (Midnight Velvet). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #C8D8FF on #2C1D43 with a contrast ratio of 10.79:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Icy Plains	rgb(200, 216, 255)	hsl(223, 100%, 89%)
Wondrous Wisteria	rgb(150, 180, 254)	hsl(223, 98%, 79%)
Blue Jay	rgb(70, 140, 218)	hsl(212, 67%, 56%)
Passion Flower	rgb(106, 84, 144)	hsl(262, 26%, 45%)
Seafarer	rgb(0, 73, 106)	hsl(199, 100%, 21%)
Midnight Velvet	rgb(44, 29, 67)	hsl(264, 40%, 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.

Aa10.79:1 Very good#C8D8FF on #2C1D43
Aa10.79:1 Very good#2C1D43 on #C8D8FF
Aa7.52:1 Very good#96B4FE on #2C1D43
Aa7.52:1 Very good#2C1D43 on #96B4FE
Aa6.81:1 Good#C8D8FF on #00496A
Aa6.81:1 Good#00496A on #C8D8FF
Aa4.75:1 Good#96B4FE on #00496A
Aa4.75:1 Good#00496A on #96B4FE

Color blindness preview

CSS variables

/* Icy Plains to Midnight Velvet — https://swatchly.xyz/palette/c8d8ff-96b4fe-468cda-6a5490-00496a-2c1d43 */
:root {
  --icy-plains: #c8d8ff;
  --wondrous-wisteria: #96b4fe;
  --blue-jay: #468cda;
  --passion-flower: #6a5490;
  --seafarer: #00496a;
  --midnight-velvet: #2c1d43;
}

Tailwind CSS v4

/* Icy Plains to Midnight Velvet — https://swatchly.xyz/palette/c8d8ff-96b4fe-468cda-6a5490-00496a-2c1d43 */
@theme {
  --color-icy-plains: #c8d8ff;
  --color-icy-plains-50: #f2f6ff;
  --color-icy-plains-100: #e4ecff;
  --color-icy-plains-200: #c8d8ff;
  --color-icy-plains-300: #b4c1e2;
  --color-icy-plains-400: #93a2c5;
  --color-icy-plains-500: #7886aa;
  --color-icy-plains-600: #5e6b8d;
  --color-icy-plains-700: #495573;
  --color-icy-plains-800: #37425c;
  --color-icy-plains-900: #293249;
  --color-icy-plains-950: #181f2f;
  --color-wondrous-wisteria: #96b4fe;
  --color-wondrous-wisteria-50: #e9f0ff;
  --color-wondrous-wisteria-100: #d8e4ff;
  --color-wondrous-wisteria-200: #b9ceff;
  --color-wondrous-wisteria-300: #96b4fe;
  --color-wondrous-wisteria-400: #7a96dd;
  --color-wondrous-wisteria-500: #617cc2;
  --color-wondrous-wisteria-600: #4b64a5;
  --color-wondrous-wisteria-700: #394f8a;
  --color-wondrous-wisteria-800: #2b3d72;
  --color-wondrous-wisteria-900: #20305d;
  --color-wondrous-wisteria-950: #111d3d;
  --color-blue-jay: #468cda;
  --color-blue-jay-50: #eff7ff;
  --color-blue-jay-100: #e0eeff;
  --color-blue-jay-200: #bfdcff;
  --color-blue-jay-300: #98c7ff;
  --color-blue-jay-400: #65a8f4;
  --color-blue-jay-500: #468cda;
  --color-blue-jay-600: #2a70bb;
  --color-blue-jay-700: #13589c;
  --color-blue-jay-800: #024480;
  --color-blue-jay-900: #003465;
  --color-blue-jay-950: #002042;
  --color-passion-flower: #6a5490;
  --color-passion-flower-50: #f7f3ff;
  --color-passion-flower-100: #ece4ff;
  --color-passion-flower-200: #dac9fe;
  --color-passion-flower-300: #c3afea;
  --color-passion-flower-400: #a38dcc;
  --color-passion-flower-500: #8670ae;
  --color-passion-flower-600: #6a5490;
  --color-passion-flower-700: #544175;
  --color-passion-flower-800: #42325e;
  --color-passion-flower-900: #34254b;
  --color-passion-flower-950: #201631;
  --color-seafarer: #00496a;
  --color-seafarer-50: #ebf7ff;
  --color-seafarer-100: #d7efff;
  --color-seafarer-200: #b1defc;
  --color-seafarer-300: #95c9ea;
  --color-seafarer-400: #70aace;
  --color-seafarer-500: #528eb3;
  --color-seafarer-600: #387396;
  --color-seafarer-700: #245c7c;
  --color-seafarer-800: #00496a;
  --color-seafarer-900: #0b384f;
  --color-seafarer-950: #042334;
  --color-midnight-velvet: #2c1d43;
  --color-midnight-velvet-50: #f7f3ff;
  --color-midnight-velvet-100: #eee7ff;
  --color-midnight-velvet-200: #dcd0f5;
  --color-midnight-velvet-300: #c6b9e2;
  --color-midnight-velvet-400: #a898c6;
  --color-midnight-velvet-500: #8e7eac;
  --color-midnight-velvet-600: #756691;
  --color-midnight-velvet-700: #5f5179;
  --color-midnight-velvet-800: #4d4064;
  --color-midnight-velvet-900: #3e3252;
  --color-midnight-velvet-950: #2c1d43;
}