Midnight Velvet to Galaxea color palette

341F3BMidnight Velvet 62425FGrape Fizz 00679EWavy Navy 0A1B45Midnight Mirage 100719Crow 333465Galaxea

Open in generator Export PNG, PDF, ASE…

About this palette

Midnight Velvet to Galaxea is a 6-color dark, cool palette: #341F3B (Midnight Velvet), #62425F (Grape Fizz), #00679E (Wavy Navy), #0A1B45 (Midnight Mirage), #100719 (Crow), #333465 (Galaxea). It mixes purple, blue, black tones and feels cool overall. The strongest text pairing is #00679E on #100719 with a contrast ratio of 3.22:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Velvet	rgb(52, 31, 59)	hsl(285, 31%, 18%)
Grape Fizz	rgb(98, 66, 95)	hsl(306, 20%, 32%)
Wavy Navy	rgb(0, 103, 158)	hsl(201, 100%, 31%)
Midnight Mirage	rgb(10, 27, 69)	hsl(223, 75%, 15%)
Crow	rgb(16, 7, 25)	hsl(270, 56%, 6%)
Galaxea	rgb(51, 52, 101)	hsl(239, 33%, 30%)

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.

Aa3.22:1 Poor#00679E on #100719
Aa3.22:1 Poor#100719 on #00679E

Color blindness preview

CSS variables

/* Midnight Velvet to Galaxea — https://swatchly.xyz/palette/341f3b-62425f-00679e-0a1b45-100719-333465 */
:root {
  --midnight-velvet: #341f3b;
  --grape-fizz: #62425f;
  --wavy-navy: #00679e;
  --midnight-mirage: #0a1b45;
  --crow: #100719;
  --galaxea: #333465;
}

Tailwind CSS v4

/* Midnight Velvet to Galaxea — https://swatchly.xyz/palette/341f3b-62425f-00679e-0a1b45-100719-333465 */
@theme {
  --color-midnight-velvet: #341f3b;
  --color-midnight-velvet-50: #fbf1ff;
  --color-midnight-velvet-100: #f5e4fb;
  --color-midnight-velvet-200: #e3cfea;
  --color-midnight-velvet-300: #ceb8d6;
  --color-midnight-velvet-400: #b097b8;
  --color-midnight-velvet-500: #977e9f;
  --color-midnight-velvet-600: #7d6585;
  --color-midnight-velvet-700: #67516f;
  --color-midnight-velvet-800: #55415b;
  --color-midnight-velvet-900: #45344b;
  --color-midnight-velvet-950: #341f3b;
  --color-grape-fizz: #62425f;
  --color-grape-fizz-50: #fff0fd;
  --color-grape-fizz-100: #fbe2f8;
  --color-grape-fizz-200: #e9cce5;
  --color-grape-fizz-300: #d3b2cf;
  --color-grape-fizz-400: #b491b0;
  --color-grape-fizz-500: #977493;
  --color-grape-fizz-600: #7a5977;
  --color-grape-fizz-700: #62425f;
  --color-grape-fizz-800: #4c334a;
  --color-grape-fizz-900: #3b2739;
  --color-grape-fizz-950: #251724;
  --color-wavy-navy: #00679e;
  --color-wavy-navy-50: #edf7ff;
  --color-wavy-navy-100: #d6edff;
  --color-wavy-navy-200: #abdaff;
  --color-wavy-navy-300: #7dc3f8;
  --color-wavy-navy-400: #53a2db;
  --color-wavy-navy-500: #3084bd;
  --color-wavy-navy-600: #00679e;
  --color-wavy-navy-700: #00527f;
  --color-wavy-navy-800: #004064;
  --color-wavy-navy-900: #00314f;
  --color-wavy-navy-950: #001f34;
  --color-midnight-mirage: #0a1b45;
  --color-midnight-mirage-50: #f0f5ff;
  --color-midnight-mirage-100: #e2ebff;
  --color-midnight-mirage-200: #c4d8ff;
  --color-midnight-mirage-300: #aac1ef;
  --color-midnight-mirage-400: #89a1d4;
  --color-midnight-mirage-500: #6d85b8;
  --color-midnight-mirage-600: #546b9b;
  --color-midnight-mirage-700: #3f547f;
  --color-midnight-mirage-800: #2f4167;
  --color-midnight-mirage-900: #233151;
  --color-midnight-mirage-950: #0a1b45;
  --color-crow: #100719;
  --color-crow-50: #f8f2ff;
  --color-crow-100: #efe7f9;
  --color-crow-200: #dcd3e7;
  --color-crow-300: #c6bcd3;
  --color-crow-400: #a79cb5;
  --color-crow-500: #877c95;
  --color-crow-600: #695e75;
  --color-crow-700: #4e4559;
  --color-crow-800: #373040;
  --color-crow-900: #241e2a;
  --color-crow-950: #100719;
  --color-galaxea: #333465;
  --color-galaxea-50: #f3f4ff;
  --color-galaxea-100: #e7eaff;
  --color-galaxea-200: #cfd4ff;
  --color-galaxea-300: #b6bbee;
  --color-galaxea-400: #9499d0;
  --color-galaxea-500: #787cb3;
  --color-galaxea-600: #5d6094;
  --color-galaxea-700: #474977;
  --color-galaxea-800: #333465;
  --color-galaxea-900: #272949;
  --color-galaxea-950: #17182f;
}