Icy Plains to Fly-by-Night Color Palette

About this palette

Icy Plains to Fly-by-Night is a 5-color cool, monochromatic, gradient palette: #CCD7FF (Icy Plains), #9495E9 (Perrywinkle), #5960C9 (Savoy Blue), #3D2FAC (Bluebell), #15194B (Fly-by-Night). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #CCD7FF on #15194B with a contrast ratio of 11.58:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Icy Plains	rgb(204, 215, 255)	hsl(227, 100%, 90%)
Perrywinkle	rgb(148, 149, 233)	hsl(239, 66%, 75%)
Savoy Blue	rgb(89, 96, 201)	hsl(236, 51%, 57%)
Bluebell	rgb(61, 47, 172)	hsl(247, 57%, 43%)
Fly-by-Night	rgb(21, 25, 75)	hsl(236, 56%, 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.

Aa11.58:1 Very good#CCD7FF on #15194B
Aa11.58:1 Very good#15194B on #CCD7FF
Aa6.69:1 Good#CCD7FF on #3D2FAC
Aa6.69:1 Good#3D2FAC on #CCD7FF
Aa6.08:1 Good#9495E9 on #15194B
Aa6.08:1 Good#15194B on #9495E9
Aa3.74:1 Poor#CCD7FF on #5960C9
Aa3.74:1 Poor#5960C9 on #CCD7FF

Color blindness preview

CSS variables

/* Icy Plains to Fly-by-Night — https://swatchly.xyz/palette/ccd7ff-9495e9-5960c9-3d2fac-15194b */
:root {
  --icy-plains: #ccd7ff;
  --perrywinkle: #9495e9;
  --savoy-blue: #5960c9;
  --bluebell: #3d2fac;
  --fly-by-night: #15194b;
}

Tailwind CSS v4

/* Icy Plains to Fly-by-Night — https://swatchly.xyz/palette/ccd7ff-9495e9-5960c9-3d2fac-15194b */
@theme {
  --color-icy-plains: #ccd7ff;
  --color-icy-plains-50: #f3f6ff;
  --color-icy-plains-100: #e6ebff;
  --color-icy-plains-200: #ccd7ff;
  --color-icy-plains-300: #b7c1e2;
  --color-icy-plains-400: #97a1c5;
  --color-icy-plains-500: #7b85a9;
  --color-icy-plains-600: #616a8d;
  --color-icy-plains-700: #4c5473;
  --color-icy-plains-800: #3a415c;
  --color-icy-plains-900: #2c3148;
  --color-icy-plains-950: #1a1e2f;
  --color-perrywinkle: #9495e9;
  --color-perrywinkle-50: #f2f3ff;
  --color-perrywinkle-100: #e6e8ff;
  --color-perrywinkle-200: #cfd2ff;
  --color-perrywinkle-300: #b5b7ff;
  --color-perrywinkle-400: #9495e9;
  --color-perrywinkle-500: #7a7acb;
  --color-perrywinkle-600: #6160ad;
  --color-perrywinkle-700: #4c4a90;
  --color-perrywinkle-800: #3b3876;
  --color-perrywinkle-900: #2d2a5e;
  --color-perrywinkle-950: #1b193f;
  --color-savoy-blue: #5960c9;
  --color-savoy-blue-50: #f2f4ff;
  --color-savoy-blue-100: #e6eaff;
  --color-savoy-blue-200: #ced6ff;
  --color-savoy-blue-300: #b2bdff;
  --color-savoy-blue-400: #8c99ff;
  --color-savoy-blue-500: #717be7;
  --color-savoy-blue-600: #5960c9;
  --color-savoy-blue-700: #4549a8;
  --color-savoy-blue-800: #34378a;
  --color-savoy-blue-900: #27286f;
  --color-savoy-blue-950: #17174b;
  --color-bluebell: #3d2fac;
  --color-bluebell-50: #f3f4ff;
  --color-bluebell-100: #e7eaff;
  --color-bluebell-200: #ced4ff;
  --color-bluebell-300: #b5bdff;
  --color-bluebell-400: #9299ff;
  --color-bluebell-500: #7678f9;
  --color-bluebell-600: #5f5ddb;
  --color-bluebell-700: #4c47bd;
  --color-bluebell-800: #3d2fac;
  --color-bluebell-900: #2e2683;
  --color-bluebell-950: #1c155a;
  --color-fly-by-night: #15194b;
  --color-fly-by-night-50: #f2f5ff;
  --color-fly-by-night-100: #e5eaff;
  --color-fly-by-night-200: #cbd5ff;
  --color-fly-by-night-300: #b1bef4;
  --color-fly-by-night-400: #909ed9;
  --color-fly-by-night-500: #7582be;
  --color-fly-by-night-600: #5c68a0;
  --color-fly-by-night-700: #485285;
  --color-fly-by-night-800: #373f6c;
  --color-fly-by-night-900: #293057;
  --color-fly-by-night-950: #15194b;
}