Midnight Mirage to Coral Kiss color palette

001D45Midnight Mirage 344800Treetop Cathedral 8932ABPleasant Purple 6E9E00Green Thumb EEAB00Groovy Giraffe FFE0C4Coral Kiss

Open in generator Export PNG, PDF, ASE…

About this palette

Midnight Mirage to Coral Kiss is a 6-color cool palette: #001D45 (Midnight Mirage), #344800 (Treetop Cathedral), #8932AB (Pleasant Purple), #6E9E00 (Green Thumb), #EEAB00 (Groovy Giraffe), #FFE0C4 (Coral Kiss). It mixes blue, green, purple, yellow, orange tones and feels cool overall. The strongest text pairing is #001D45 on #FFE0C4 with a contrast ratio of 13.25:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Mirage	rgb(0, 29, 69)	hsl(215, 100%, 14%)
Treetop Cathedral	rgb(52, 72, 0)	hsl(77, 100%, 14%)
Pleasant Purple	rgb(137, 50, 171)	hsl(283, 55%, 43%)
Green Thumb	rgb(110, 158, 0)	hsl(78, 100%, 31%)
Groovy Giraffe	rgb(238, 171, 0)	hsl(43, 100%, 47%)
Coral Kiss	rgb(255, 224, 196)	hsl(28, 100%, 88%)

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.

Aa13.25:1 Super#001D45 on #FFE0C4
Aa13.25:1 Super#FFE0C4 on #001D45
Aa8.29:1 Very good#001D45 on #EEAB00
Aa8.29:1 Very good#EEAB00 on #001D45
Aa8.06:1 Very good#344800 on #FFE0C4
Aa8.06:1 Very good#FFE0C4 on #344800
Aa5.38:1 Good#8932AB on #FFE0C4
Aa5.38:1 Good#FFE0C4 on #8932AB

Color blindness preview

CSS variables

/* Midnight Mirage to Coral Kiss — https://swatchly.xyz/palette/001d45-344800-8932ab-6e9e00-eeab00-ffe0c4 */
:root {
  --midnight-mirage: #001d45;
  --treetop-cathedral: #344800;
  --pleasant-purple: #8932ab;
  --green-thumb: #6e9e00;
  --groovy-giraffe: #eeab00;
  --coral-kiss: #ffe0c4;
}

Tailwind CSS v4

/* Midnight Mirage to Coral Kiss — https://swatchly.xyz/palette/001d45-344800-8932ab-6e9e00-eeab00-ffe0c4 */
@theme {
  --color-midnight-mirage: #001d45;
  --color-midnight-mirage-50: #eff6ff;
  --color-midnight-mirage-100: #dfecff;
  --color-midnight-mirage-200: #bfdaff;
  --color-midnight-mirage-300: #a4c3ef;
  --color-midnight-mirage-400: #81a4d4;
  --color-midnight-mirage-500: #6588b8;
  --color-midnight-mirage-600: #4c6d9b;
  --color-midnight-mirage-700: #38567f;
  --color-midnight-mirage-800: #294367;
  --color-midnight-mirage-900: #1d3351;
  --color-midnight-mirage-950: #001d45;
  --color-treetop-cathedral: #344800;
  --color-treetop-cathedral-50: #edfcd7;
  --color-treetop-cathedral-100: #e2f3c9;
  --color-treetop-cathedral-200: #cce0af;
  --color-treetop-cathedral-300: #b4ca91;
  --color-treetop-cathedral-400: #93ab6c;
  --color-treetop-cathedral-500: #778f4e;
  --color-treetop-cathedral-600: #5d7335;
  --color-treetop-cathedral-700: #485b22;
  --color-treetop-cathedral-800: #344800;
  --color-treetop-cathedral-900: #29370b;
  --color-treetop-cathedral-950: #182204;
  --color-pleasant-purple: #8932ab;
  --color-pleasant-purple-50: #faf1ff;
  --color-pleasant-purple-100: #f5e1ff;
  --color-pleasant-purple-200: #ebc2ff;
  --color-pleasant-purple-300: #e09cff;
  --color-pleasant-purple-400: #c571e9;
  --color-pleasant-purple-500: #a751ca;
  --color-pleasant-purple-600: #8932ab;
  --color-pleasant-purple-700: #6f228c;
  --color-pleasant-purple-800: #591472;
  --color-pleasant-purple-900: #470a5c;
  --color-pleasant-purple-950: #2e043d;
  --color-green-thumb: #6e9e00;
  --color-green-thumb-50: #eaffd3;
  --color-green-thumb-100: #dafbb2;
  --color-green-thumb-200: #c4ea92;
  --color-green-thumb-300: #abd670;
  --color-green-thumb-400: #89b93f;
  --color-green-thumb-500: #6e9e00;
  --color-green-thumb-600: #587f00;
  --color-green-thumb-700: #456500;
  --color-green-thumb-800: #354f00;
  --color-green-thumb-900: #273c00;
  --color-green-thumb-950: #172500;
  --color-groovy-giraffe: #eeab00;
  --color-groovy-giraffe-50: #ffefd4;
  --color-groovy-giraffe-100: #ffe1af;
  --color-groovy-giraffe-200: #fcc769;
  --color-groovy-giraffe-300: #eeab00;
  --color-groovy-giraffe-400: #c88f00;
  --color-groovy-giraffe-500: #a77700;
  --color-groovy-giraffe-600: #886000;
  --color-groovy-giraffe-700: #6d4c00;
  --color-groovy-giraffe-800: #563c00;
  --color-groovy-giraffe-900: #442e00;
  --color-groovy-giraffe-950: #2b1c00;
  --color-coral-kiss: #ffe0c4;
  --color-coral-kiss-50: #ffeede;
  --color-coral-kiss-100: #ffe0c4;
  --color-coral-kiss-200: #e6cfba;
  --color-coral-kiss-300: #d2b8a1;
  --color-coral-kiss-400: #b59980;
  --color-coral-kiss-500: #9b7f65;
  --color-coral-kiss-600: #80654d;
  --color-coral-kiss-700: #68503a;
  --color-coral-kiss-800: #523e2a;
  --color-coral-kiss-900: #402f1e;
  --color-coral-kiss-950: #291c10;
}