Midnight Velvet to Skydive color palette

2C1F3AMidnight Velvet D0E6C5Endive 558950The Legend of Green 74473ACappuccino 70BEDDSkydive

About this palette

Midnight Velvet to Skydive is a 5-color cool palette: #2C1F3A (Midnight Velvet), #D0E6C5 (Endive), #558950 (The Legend of Green), #74473A (Cappuccino), #70BEDD (Skydive). It mixes purple, green, red, blue tones and feels cool overall. The strongest text pairing is #2C1F3A on #D0E6C5 with a contrast ratio of 11.59:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Velvet	rgb(44, 31, 58)	hsl(269, 30%, 17%)
Endive	rgb(208, 230, 197)	hsl(100, 40%, 84%)
The Legend of Green	rgb(85, 137, 80)	hsl(115, 26%, 43%)
Cappuccino	rgb(116, 71, 58)	hsl(13, 33%, 34%)
Skydive	rgb(112, 190, 221)	hsl(197, 62%, 65%)

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.59:1 Very good#2C1F3A on #D0E6C5
Aa11.59:1 Very good#D0E6C5 on #2C1F3A
Aa7.40:1 Very good#2C1F3A on #70BEDD
Aa7.40:1 Very good#70BEDD on #2C1F3A
Aa5.84:1 Good#D0E6C5 on #74473A
Aa5.84:1 Good#74473A on #D0E6C5
Aa3.73:1 Poor#74473A on #70BEDD
Aa3.73:1 Poor#70BEDD on #74473A

Color blindness preview

CSS variables

/* Midnight Velvet to Skydive — https://swatchly.xyz/palette/2c1f3a-d0e6c5-558950-74473a-70bedd */
:root {
  --midnight-velvet: #2c1f3a;
  --endive: #d0e6c5;
  --the-legend-of-green: #558950;
  --cappuccino: #74473a;
  --skydive: #70bedd;
}

Tailwind CSS v4

/* Midnight Velvet to Skydive — https://swatchly.xyz/palette/2c1f3a-d0e6c5-558950-74473a-70bedd */
@theme {
  --color-midnight-velvet: #2c1f3a;
  --color-midnight-velvet-50: #f8f2ff;
  --color-midnight-velvet-100: #f0e6fd;
  --color-midnight-velvet-200: #ddd2ec;
  --color-midnight-velvet-300: #c7bad8;
  --color-midnight-velvet-400: #a99abb;
  --color-midnight-velvet-500: #8f80a1;
  --color-midnight-velvet-600: #756787;
  --color-midnight-velvet-700: #60526f;
  --color-midnight-velvet-800: #4d415b;
  --color-midnight-velvet-900: #3e344a;
  --color-midnight-velvet-950: #2c1f3a;
  --color-endive: #d0e6c5;
  --color-endive-50: #f2feed;
  --color-endive-100: #e8f5e2;
  --color-endive-200: #d0e6c5;
  --color-endive-300: #bbcdb2;
  --color-endive-400: #99ad8f;
  --color-endive-500: #7c9072;
  --color-endive-600: #617458;
  --color-endive-700: #4b5c42;
  --color-endive-800: #394831;
  --color-endive-900: #2b3724;
  --color-endive-950: #192215;
  --color-the-legend-of-green: #558950;
  --color-the-legend-of-green-50: #defdda;
  --color-the-legend-of-green-100: #cef2ca;
  --color-the-legend-of-green-200: #b4dfaf;
  --color-the-legend-of-green-300: #97c792;
  --color-the-legend-of-green-400: #72a76d;
  --color-the-legend-of-green-500: #558950;
  --color-the-legend-of-green-600: #3f703a;
  --color-the-legend-of-green-700: #2d5a2a;
  --color-the-legend-of-green-800: #20471d;
  --color-the-legend-of-green-900: #173814;
  --color-the-legend-of-green-950: #0c240a;
  --color-cappuccino: #74473a;
  --color-cappuccino-50: #fff2ee;
  --color-cappuccino-100: #ffe5dd;
  --color-cappuccino-200: #f5cdc1;
  --color-cappuccino-300: #e2b5a7;
  --color-cappuccino-400: #c59485;
  --color-cappuccino-500: #a9786a;
  --color-cappuccino-600: #8c5e50;
  --color-cappuccino-700: #74473a;
  --color-cappuccino-800: #5b372d;
  --color-cappuccino-900: #482920;
  --color-cappuccino-950: #2e1812;
  --color-skydive: #70bedd;
  --color-skydive-50: #d6f3ff;
  --color-skydive-100: #b8eaff;
  --color-skydive-200: #98d5ef;
  --color-skydive-300: #70bedd;
  --color-skydive-400: #54a1be;
  --color-skydive-500: #3888a5;
  --color-skydive-600: #1d6f8a;
  --color-skydive-700: #065a73;
  --color-skydive-800: #00475d;
  --color-skydive-900: #00394a;
  --color-skydive-950: #002330;
}