Midnight Dreams to Hippy color palette

07212CMidnight Dreams 5F2C56Pretty in Prune A5458EGrape Riot A38500Captain Kirk 49CCE1Sea Serpent E8E783Hippy

Open in generator Export PNG, PDF, ASE…

About this palette

Midnight Dreams to Hippy is a 6-color warm palette: #07212C (Midnight Dreams), #5F2C56 (Pretty in Prune), #A5458E (Grape Riot), #A38500 (Captain Kirk), #49CCE1 (Sea Serpent), #E8E783 (Hippy). It mixes blue, purple, pink, yellow, turquoise tones and feels warm overall. The strongest text pairing is #07212C on #E8E783 with a contrast ratio of 12.82:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Dreams	rgb(7, 33, 44)	hsl(198, 73%, 10%)
Pretty in Prune	rgb(95, 44, 86)	hsl(311, 37%, 27%)
Grape Riot	rgb(165, 69, 142)	hsl(314, 41%, 46%)
Captain Kirk	rgb(163, 133, 0)	hsl(49, 100%, 32%)
Sea Serpent	rgb(73, 204, 225)	hsl(188, 72%, 58%)
Hippy	rgb(232, 231, 131)	hsl(59, 69%, 71%)

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.

Aa12.82:1 Super#07212C on #E8E783
Aa12.82:1 Super#E8E783 on #07212C
Aa8.72:1 Very good#07212C on #49CCE1
Aa8.72:1 Very good#49CCE1 on #07212C
Aa8.17:1 Very good#5F2C56 on #E8E783
Aa8.17:1 Very good#E8E783 on #5F2C56
Aa5.56:1 Good#5F2C56 on #49CCE1
Aa5.56:1 Good#49CCE1 on #5F2C56

Color blindness preview

CSS variables

/* Midnight Dreams to Hippy — https://swatchly.xyz/palette/07212c-5f2c56-a5458e-a38500-49cce1-e8e783 */
:root {
  --midnight-dreams: #07212c;
  --pretty-in-prune: #5f2c56;
  --grape-riot: #a5458e;
  --captain-kirk: #a38500;
  --sea-serpent: #49cce1;
  --hippy: #e8e783;
}

Tailwind CSS v4

/* Midnight Dreams to Hippy — https://swatchly.xyz/palette/07212c-5f2c56-a5458e-a38500-49cce1-e8e783 */
@theme {
  --color-midnight-dreams: #07212c;
  --color-midnight-dreams-50: #eaf8ff;
  --color-midnight-dreams-100: #dceff8;
  --color-midnight-dreams-200: #c6dbe7;
  --color-midnight-dreams-300: #acc5d2;
  --color-midnight-dreams-400: #8ba6b4;
  --color-midnight-dreams-500: #6f8b98;
  --color-midnight-dreams-600: #55707d;
  --color-midnight-dreams-700: #405864;
  --color-midnight-dreams-800: #30454f;
  --color-midnight-dreams-900: #23343d;
  --color-midnight-dreams-950: #07212c;
  --color-pretty-in-prune: #5f2c56;
  --color-pretty-in-prune-50: #fff0fb;
  --color-pretty-in-prune-100: #ffe1f8;
  --color-pretty-in-prune-200: #f5c7ea;
  --color-pretty-in-prune-300: #e2aed6;
  --color-pretty-in-prune-400: #c58cb8;
  --color-pretty-in-prune-500: #a9709d;
  --color-pretty-in-prune-600: #8c5681;
  --color-pretty-in-prune-700: #724168;
  --color-pretty-in-prune-800: #5f2c56;
  --color-pretty-in-prune-900: #472441;
  --color-pretty-in-prune-950: #2e1429;
  --color-grape-riot: #a5458e;
  --color-grape-riot-50: #fff0fa;
  --color-grape-riot-100: #ffe2f6;
  --color-grape-riot-200: #ffc3ed;
  --color-grape-riot-300: #f9a1e0;
  --color-grape-riot-400: #de7dc4;
  --color-grape-riot-500: #c260a9;
  --color-grape-riot-600: #a5458e;
  --color-grape-riot-700: #883074;
  --color-grape-riot-800: #6d205c;
  --color-grape-riot-900: #571448;
  --color-grape-riot-950: #39092f;
  --color-captain-kirk: #a38500;
  --color-captain-kirk-50: #fff5d7;
  --color-captain-kirk-100: #feebb0;
  --color-captain-kirk-200: #eed890;
  --color-captain-kirk-300: #dbc16c;
  --color-captain-kirk-400: #bea13c;
  --color-captain-kirk-500: #a38500;
  --color-captain-kirk-600: #836b00;
  --color-captain-kirk-700: #685400;
  --color-captain-kirk-800: #524200;
  --color-captain-kirk-900: #3f3200;
  --color-captain-kirk-950: #281f00;
  --color-sea-serpent: #49cce1;
  --color-sea-serpent-50: #d4f8ff;
  --color-sea-serpent-100: #aff3ff;
  --color-sea-serpent-200: #85e1f1;
  --color-sea-serpent-300: #49cce1;
  --color-sea-serpent-400: #23adc1;
  --color-sea-serpent-500: #0091a3;
  --color-sea-serpent-600: #007584;
  --color-sea-serpent-700: #005e6a;
  --color-sea-serpent-800: #004a54;
  --color-sea-serpent-900: #003a42;
  --color-sea-serpent-950: #00242a;
  --color-hippy: #e8e783;
  --color-hippy-50: #feffd3;
  --color-hippy-100: #f7f7c1;
  --color-hippy-200: #e8e783;
  --color-hippy-300: #cece7f;
  --color-hippy-400: #aead4f;
  --color-hippy-500: #928f26;
  --color-hippy-600: #757300;
  --color-hippy-700: #5c5a00;
  --color-hippy-800: #474500;
  --color-hippy-900: #363500;
  --color-hippy-950: #222100;
}