Savoy Blue to Midnight Velvet color palette

5A63C6Savoy Blue 3C5200Deep Forestial Escapade 90A66CGreen Tea Mochi EEBCE4Rosecco 2C2645Midnight Velvet

Open in generator Export PNG, PDF, ASE…

About this palette

Savoy Blue to Midnight Velvet is a 5-color cool palette: #5A63C6 (Savoy Blue), #3C5200 (Deep Forestial Escapade), #90A66C (Green Tea Mochi), #EEBCE4 (Rosecco), #2C2645 (Midnight Velvet). It mixes purple, green, pink tones and feels cool overall. The strongest text pairing is #EEBCE4 on #2C2645 with a contrast ratio of 8.81:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Savoy Blue	rgb(90, 99, 198)	hsl(235, 49%, 56%)
Deep Forestial Escapade	rgb(60, 82, 0)	hsl(76, 100%, 16%)
Green Tea Mochi	rgb(144, 166, 108)	hsl(83, 25%, 54%)
Rosecco	rgb(238, 188, 228)	hsl(312, 60%, 84%)
Midnight Velvet	rgb(44, 38, 69)	hsl(252, 29%, 21%)

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.

Aa8.81:1 Very good#EEBCE4 on #2C2645
Aa8.81:1 Very good#2C2645 on #EEBCE4
Aa5.40:1 Good#3C5200 on #EEBCE4
Aa5.40:1 Good#EEBCE4 on #3C5200
Aa5.34:1 Good#90A66C on #2C2645
Aa5.34:1 Good#2C2645 on #90A66C
Aa3.28:1 Poor#3C5200 on #90A66C
Aa3.28:1 Poor#90A66C on #3C5200

Color blindness preview

CSS variables

/* Savoy Blue to Midnight Velvet — https://swatchly.xyz/palette/5a63c6-3c5200-90a66c-eebce4-2c2645 */
:root {
  --savoy-blue: #5a63c6;
  --deep-forestial-escapade: #3c5200;
  --green-tea-mochi: #90a66c;
  --rosecco: #eebce4;
  --midnight-velvet: #2c2645;
}

Tailwind CSS v4

/* Savoy Blue to Midnight Velvet — https://swatchly.xyz/palette/5a63c6-3c5200-90a66c-eebce4-2c2645 */
@theme {
  --color-savoy-blue: #5a63c6;
  --color-savoy-blue-50: #f2f5ff;
  --color-savoy-blue-100: #e6ebff;
  --color-savoy-blue-200: #ced6ff;
  --color-savoy-blue-300: #b3beff;
  --color-savoy-blue-400: #8d9afe;
  --color-savoy-blue-500: #727ee3;
  --color-savoy-blue-600: #5a63c6;
  --color-savoy-blue-700: #454ca6;
  --color-savoy-blue-800: #353988;
  --color-savoy-blue-900: #272a6d;
  --color-savoy-blue-950: #171949;
  --color-deep-forestial-escapade: #3c5200;
  --color-deep-forestial-escapade-50: #ecfdd4;
  --color-deep-forestial-escapade-100: #e1f3c6;
  --color-deep-forestial-escapade-200: #cbe1aa;
  --color-deep-forestial-escapade-300: #b5cd8f;
  --color-deep-forestial-escapade-400: #96af6a;
  --color-deep-forestial-escapade-500: #7b954d;
  --color-deep-forestial-escapade-600: #637b34;
  --color-deep-forestial-escapade-700: #4e6421;
  --color-deep-forestial-escapade-800: #3c5200;
  --color-deep-forestial-escapade-900: #2e3f07;
  --color-deep-forestial-escapade-950: #1c2801;
  --color-green-tea-mochi: #90a66c;
  --color-green-tea-mochi-50: #ecfad7;
  --color-green-tea-mochi-100: #e0efc9;
  --color-green-tea-mochi-200: #cadcaf;
  --color-green-tea-mochi-300: #b1c592;
  --color-green-tea-mochi-400: #90a66c;
  --color-green-tea-mochi-500: #768b52;
  --color-green-tea-mochi-600: #5d713a;
  --color-green-tea-mochi-700: #495a28;
  --color-green-tea-mochi-800: #38471b;
  --color-green-tea-mochi-900: #2b3711;
  --color-green-tea-mochi-950: #1a2307;
  --color-rosecco: #eebce4;
  --color-rosecco-50: #ffe6fa;
  --color-rosecco-100: #fad7f2;
  --color-rosecco-200: #eebce4;
  --color-rosecco-300: #d5aacc;
  --color-rosecco-400: #b98bb0;
  --color-rosecco-500: #9e7196;
  --color-rosecco-600: #84587c;
  --color-rosecco-700: #6c4565;
  --color-rosecco-800: #573551;
  --color-rosecco-900: #44273f;
  --color-rosecco-950: #2c1728;
  --color-midnight-velvet: #2c2645;
  --color-midnight-velvet-50: #f5f4ff;
  --color-midnight-velvet-100: #ebe8ff;
  --color-midnight-velvet-200: #d7d3f1;
  --color-midnight-velvet-300: #c1bcde;
  --color-midnight-velvet-400: #a09bc0;
  --color-midnight-velvet-500: #837ea3;
  --color-midnight-velvet-600: #686285;
  --color-midnight-velvet-700: #504b6a;
  --color-midnight-velvet-800: #3c3852;
  --color-midnight-velvet-900: #2c2645;
  --color-midnight-velvet-950: #1a1726;
}