Hello Summer to Midnight Velvet color palette

5FBDF8Hello Summer C9CEFFInnocent Snowdrop 434A86Queen of the Night Shift 46819FZenith 2F2141Midnight Velvet

Open in generator Export PNG, PDF, ASE…

About this palette

Hello Summer to Midnight Velvet is a 5-color cool palette: #5FBDF8 (Hello Summer), #C9CEFF (Innocent Snowdrop), #434A86 (Queen of the Night Shift), #46819F (Zenith), #2F2141 (Midnight Velvet). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #C9CEFF on #2F2141 with a contrast ratio of 9.72:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hello Summer	rgb(95, 189, 248)	hsl(203, 92%, 67%)
Innocent Snowdrop	rgb(201, 206, 255)	hsl(234, 100%, 89%)
Queen of the Night Shift	rgb(67, 74, 134)	hsl(234, 33%, 39%)
Zenith	rgb(70, 129, 159)	hsl(200, 39%, 45%)
Midnight Velvet	rgb(47, 33, 65)	hsl(266, 33%, 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.

Aa9.72:1 Very good#C9CEFF on #2F2141
Aa9.72:1 Very good#2F2141 on #C9CEFF
Aa7.15:1 Very good#5FBDF8 on #2F2141
Aa7.15:1 Very good#2F2141 on #5FBDF8
Aa5.37:1 Good#C9CEFF on #434A86
Aa5.37:1 Good#434A86 on #C9CEFF
Aa3.95:1 Poor#5FBDF8 on #434A86
Aa3.95:1 Poor#434A86 on #5FBDF8

Color blindness preview

CSS variables

/* Hello Summer to Midnight Velvet — https://swatchly.xyz/palette/5fbdf8-c9ceff-434a86-46819f-2f2141 */
:root {
  --hello-summer: #5fbdf8;
  --innocent-snowdrop: #c9ceff;
  --queen-of-the-night-shift: #434a86;
  --zenith: #46819f;
  --midnight-velvet: #2f2141;
}

Tailwind CSS v4

/* Hello Summer to Midnight Velvet — https://swatchly.xyz/palette/5fbdf8-c9ceff-434a86-46819f-2f2141 */
@theme {
  --color-hello-summer: #5fbdf8;
  --color-hello-summer-50: #ddf1ff;
  --color-hello-summer-100: #c4e7ff;
  --color-hello-summer-200: #94d4ff;
  --color-hello-summer-300: #5fbdf8;
  --color-hello-summer-400: #429fd8;
  --color-hello-summer-500: #1e86be;
  --color-hello-summer-600: #006d9f;
  --color-hello-summer-700: #005781;
  --color-hello-summer-800: #004567;
  --color-hello-summer-900: #003753;
  --color-hello-summer-950: #002236;
  --color-innocent-snowdrop: #c9ceff;
  --color-innocent-snowdrop-50: #eff0ff;
  --color-innocent-snowdrop-100: #e2e5ff;
  --color-innocent-snowdrop-200: #c9ceff;
  --color-innocent-snowdrop-300: #b5b9e3;
  --color-innocent-snowdrop-400: #969ac7;
  --color-innocent-snowdrop-500: #7c7fac;
  --color-innocent-snowdrop-600: #636690;
  --color-innocent-snowdrop-700: #4e5177;
  --color-innocent-snowdrop-800: #3c3f60;
  --color-innocent-snowdrop-900: #2e304c;
  --color-innocent-snowdrop-950: #1c1d31;
  --color-queen-of-the-night-shift: #434a86;
  --color-queen-of-the-night-shift-50: #f2f5ff;
  --color-queen-of-the-night-shift-100: #e6eaff;
  --color-queen-of-the-night-shift-200: #cbd4ff;
  --color-queen-of-the-night-shift-300: #b0bbf6;
  --color-queen-of-the-night-shift-400: #8f9ada;
  --color-queen-of-the-night-shift-500: #737dbe;
  --color-queen-of-the-night-shift-600: #59629f;
  --color-queen-of-the-night-shift-700: #434a86;
  --color-queen-of-the-night-shift-800: #343a69;
  --color-queen-of-the-night-shift-900: #272c53;
  --color-queen-of-the-night-shift-950: #171a36;
  --color-zenith: #46819f;
  --color-zenith-50: #e5f6ff;
  --color-zenith-100: #caecff;
  --color-zenith-200: #a9d8f1;
  --color-zenith-300: #8bc0dc;
  --color-zenith-400: #659fbd;
  --color-zenith-500: #46819f;
  --color-zenith-600: #306884;
  --color-zenith-700: #1f536c;
  --color-zenith-800: #134258;
  --color-zenith-900: #0a3446;
  --color-zenith-950: #04212e;
  --color-midnight-velvet: #2f2141;
  --color-midnight-velvet-50: #f7f3ff;
  --color-midnight-velvet-100: #f0e6ff;
  --color-midnight-velvet-200: #ddd1f0;
  --color-midnight-velvet-300: #c7badd;
  --color-midnight-velvet-400: #a697be;
  --color-midnight-velvet-500: #897aa0;
  --color-midnight-velvet-600: #6d5e82;
  --color-midnight-velvet-700: #544766;
  --color-midnight-velvet-800: #3f344e;
  --color-midnight-velvet-900: #2f2141;
  --color-midnight-velvet-950: #1a1423;
}