Clear Sky to Midnight Velvet Color Palette

About this palette

Clear Sky to Midnight Velvet is a 5-color cool, vintage palette: #8BCCFF (Clear Sky), #3A9ADC (Homeworld), #7F7922 (Olive), #543F00 (Pineapple), #2D1B40 (Midnight Velvet). It mixes blue, yellow, brown, purple tones and feels cool overall. The strongest text pairing is #8BCCFF on #2D1B40 with a contrast ratio of 9.07:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Clear Sky	rgb(139, 204, 255)	hsl(206, 100%, 77%)
Homeworld	rgb(58, 154, 220)	hsl(204, 70%, 55%)
Olive	rgb(127, 121, 34)	hsl(56, 58%, 32%)
Pineapple	rgb(84, 63, 0)	hsl(45, 100%, 16%)
Midnight Velvet	rgb(45, 27, 64)	hsl(269, 41%, 18%)

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.07:1 Very good#8BCCFF on #2D1B40
Aa9.07:1 Very good#2D1B40 on #8BCCFF
Aa5.83:1 Good#8BCCFF on #543F00
Aa5.83:1 Good#543F00 on #8BCCFF
Aa5.09:1 Good#3A9ADC on #2D1B40
Aa5.09:1 Good#2D1B40 on #3A9ADC
Aa3.47:1 Poor#7F7922 on #2D1B40
Aa3.47:1 Poor#2D1B40 on #7F7922

Color blindness preview

CSS variables

/* Clear Sky to Midnight Velvet — https://swatchly.xyz/palette/8bccff-3a9adc-7f7922-543f00-2d1b40 */
:root {
  --clear-sky: #8bccff;
  --homeworld: #3a9adc;
  --olive: #7f7922;
  --pineapple: #543f00;
  --midnight-velvet: #2d1b40;
}

Tailwind CSS v4

/* Clear Sky to Midnight Velvet — https://swatchly.xyz/palette/8bccff-3a9adc-7f7922-543f00-2d1b40 */
@theme {
  --color-clear-sky: #8bccff;
  --color-clear-sky-50: #f0f8ff;
  --color-clear-sky-100: #def0ff;
  --color-clear-sky-200: #b9e0ff;
  --color-clear-sky-300: #8bccff;
  --color-clear-sky-400: #6eabda;
  --color-clear-sky-500: #4f8fbf;
  --color-clear-sky-600: #3473a1;
  --color-clear-sky-700: #1f5b85;
  --color-clear-sky-800: #10476b;
  --color-clear-sky-900: #063655;
  --color-clear-sky-950: #012137;
  --color-homeworld: #3a9adc;
  --color-homeworld-50: #f1f9ff;
  --color-homeworld-100: #e2f2ff;
  --color-homeworld-200: #c0e3ff;
  --color-homeworld-300: #96d1ff;
  --color-homeworld-400: #5fb4f3;
  --color-homeworld-500: #3a9adc;
  --color-homeworld-600: #0f7cbc;
  --color-homeworld-700: #006298;
  --color-homeworld-800: #004c77;
  --color-homeworld-900: #003a5c;
  --color-homeworld-950: #00233b;
  --color-olive: #7f7922;
  --color-olive-50: #faf8cb;
  --color-olive-100: #f3f0bf;
  --color-olive-200: #e2dfa4;
  --color-olive-300: #ceca87;
  --color-olive-400: #b1ad5f;
  --color-olive-500: #989240;
  --color-olive-600: #7f7922;
  --color-olive-700: #666003;
  --color-olive-800: #4f4b00;
  --color-olive-900: #3d3900;
  --color-olive-950: #262300;
  --color-pineapple: #543f00;
  --color-pineapple-50: #fff4dc;
  --color-pineapple-100: #f9eac7;
  --color-pineapple-200: #e8d6ad;
  --color-pineapple-300: #d3bf90;
  --color-pineapple-400: #b59f6b;
  --color-pineapple-500: #9a834d;
  --color-pineapple-600: #7f6934;
  --color-pineapple-700: #665321;
  --color-pineapple-800: #543f00;
  --color-pineapple-900: #3f310a;
  --color-pineapple-950: #281e03;
  --color-midnight-velvet: #2d1b40;
  --color-midnight-velvet-50: #f8f2ff;
  --color-midnight-velvet-100: #f0e6ff;
  --color-midnight-velvet-200: #dfd0f4;
  --color-midnight-velvet-300: #c9b8e0;
  --color-midnight-velvet-400: #ab98c4;
  --color-midnight-velvet-500: #917daa;
  --color-midnight-velvet-600: #77648f;
  --color-midnight-velvet-700: #614f76;
  --color-midnight-velvet-800: #4e3e61;
  --color-midnight-velvet-900: #3e314f;
  --color-midnight-velvet-950: #2d1b40;
}