Start generating

Scented Spring to Midnight Dreams color palette

E7D7FFScented Spring76C9FCNevermind NirvanaB39400Faint Gold685F92Wizard’s Potion4C3F00Alligator Gladiator01243AMidnight Dreams
Open in generator Export PNG, PDF, ASE…

About this palette

Scented Spring to Midnight Dreams is a 6-color cool palette: #E7D7FF (Scented Spring), #76C9FC (Nevermind Nirvana), #B39400 (Faint Gold), #685F92 (Wizard’s Potion), #4C3F00 (Alligator Gladiator), #01243A (Midnight Dreams). It mixes purple, blue, yellow, brown tones and feels cool overall. The strongest text pairing is #E7D7FF on #01243A with a contrast ratio of 11.84:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Scented Springrgb(231, 215, 255)hsl(264, 100%, 92%)
Nevermind Nirvanargb(118, 201, 252)hsl(203, 96%, 73%)
Faint Goldrgb(179, 148, 0)hsl(50, 100%, 35%)
Wizard’s Potionrgb(104, 95, 146)hsl(251, 21%, 47%)
Alligator Gladiatorrgb(76, 63, 0)hsl(50, 100%, 15%)
Midnight Dreamsrgb(1, 36, 58)hsl(203, 97%, 12%)

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.84:1 Very good#E7D7FF on #01243A
  • Aa11.84:1 Very good#01243A on #E7D7FF
  • Aa8.77:1 Very good#76C9FC on #01243A
  • Aa8.77:1 Very good#01243A on #76C9FC
  • Aa7.71:1 Very good#E7D7FF on #4C3F00
  • Aa7.71:1 Very good#4C3F00 on #E7D7FF
  • Aa5.71:1 Good#76C9FC on #4C3F00
  • Aa5.71:1 Good#4C3F00 on #76C9FC

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Scented Spring to Midnight Dreams — https://swatchly.xyz/palette/e7d7ff-76c9fc-b39400-685f92-4c3f00-01243a */
:root {
  --scented-spring: #e7d7ff;
  --nevermind-nirvana: #76c9fc;
  --faint-gold: #b39400;
  --wizard-s-potion: #685f92;
  --alligator-gladiator: #4c3f00;
  --midnight-dreams: #01243a;
}

Tailwind CSS v4

/* Scented Spring to Midnight Dreams — https://swatchly.xyz/palette/e7d7ff-76c9fc-b39400-685f92-4c3f00-01243a */
@theme {
  --color-scented-spring: #e7d7ff;
  --color-scented-spring-50: #fbf9ff;
  --color-scented-spring-100: #f5efff;
  --color-scented-spring-200: #e7d7ff;
  --color-scented-spring-300: #cdc1e1;
  --color-scented-spring-400: #ad9fc3;
  --color-scented-spring-500: #9182a6;
  --color-scented-spring-600: #756689;
  --color-scented-spring-700: #5c4f6f;
  --color-scented-spring-800: #483c57;
  --color-scented-spring-900: #372e44;
  --color-scented-spring-950: #221b2c;
  --color-nevermind-nirvana: #76c9fc;
  --color-nevermind-nirvana-50: #e9f6ff;
  --color-nevermind-nirvana-100: #d4eeff;
  --color-nevermind-nirvana-200: #a9ddff;
  --color-nevermind-nirvana-300: #76c9fc;
  --color-nevermind-nirvana-400: #5aa9d9;
  --color-nevermind-nirvana-500: #388ebe;
  --color-nevermind-nirvana-600: #1873a0;
  --color-nevermind-nirvana-700: #005b84;
  --color-nevermind-nirvana-800: #004768;
  --color-nevermind-nirvana-900: #003752;
  --color-nevermind-nirvana-950: #002235;
  --color-faint-gold: #b39400;
  --color-faint-gold-50: #fff1c2;
  --color-faint-gold-100: #f9e59f;
  --color-faint-gold-200: #e7cf7a;
  --color-faint-gold-300: #d2b652;
  --color-faint-gold-400: #b39400;
  --color-faint-gold-500: #957b00;
  --color-faint-gold-600: #796300;
  --color-faint-gold-700: #614f00;
  --color-faint-gold-800: #4d3e00;
  --color-faint-gold-900: #3c3000;
  --color-faint-gold-950: #271e00;
  --color-wizard-s-potion: #685f92;
  --color-wizard-s-potion-50: #f5f4ff;
  --color-wizard-s-potion-100: #eae7ff;
  --color-wizard-s-potion-200: #d6d0fb;
  --color-wizard-s-potion-300: #beb7e8;
  --color-wizard-s-potion-400: #9f96cb;
  --color-wizard-s-potion-500: #837aaf;
  --color-wizard-s-potion-600: #685f92;
  --color-wizard-s-potion-700: #524a77;
  --color-wizard-s-potion-800: #403960;
  --color-wizard-s-potion-900: #312b4c;
  --color-wizard-s-potion-950: #1e1a31;
  --color-alligator-gladiator: #4c3f00;
  --color-alligator-gladiator-50: #fdf6d6;
  --color-alligator-gladiator-100: #f4ecc8;
  --color-alligator-gladiator-200: #e2d8ae;
  --color-alligator-gladiator-300: #cdc191;
  --color-alligator-gladiator-400: #aea16b;
  --color-alligator-gladiator-500: #92854e;
  --color-alligator-gladiator-600: #776a34;
  --color-alligator-gladiator-700: #5f5321;
  --color-alligator-gladiator-800: #4c3f00;
  --color-alligator-gladiator-900: #39300a;
  --color-alligator-gladiator-950: #241d04;
  --color-midnight-dreams: #01243a;
  --color-midnight-dreams-50: #ecf7ff;
  --color-midnight-dreams-100: #d9eeff;
  --color-midnight-dreams-200: #c0dcf1;
  --color-midnight-dreams-300: #a6c6de;
  --color-midnight-dreams-400: #83a6c1;
  --color-midnight-dreams-500: #688ba6;
  --color-midnight-dreams-600: #4f718b;
  --color-midnight-dreams-700: #3b5a72;
  --color-midnight-dreams-800: #2b475c;
  --color-midnight-dreams-900: #203849;
  --color-midnight-dreams-950: #01243a;
}

Similar palettes