Midnight Dreams to Carona color palette

002438Midnight Dreams 47316FHer Highness D6E376Succulent Lime 76985ABavarian Green A06100Embarrassed Frog F8A43ACarona

Open in generator Export PNG, PDF, ASE…

About this palette

Midnight Dreams to Carona is a 6-color earthy palette: #002438 (Midnight Dreams), #47316F (Her Highness), #D6E376 (Succulent Lime), #76985A (Bavarian Green), #A06100 (Embarrassed Frog), #F8A43A (Carona). It mixes blue, purple, green, brown, orange tones and feels balanced overall. The strongest text pairing is #002438 on #D6E376 with a contrast ratio of 11.54:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Dreams	rgb(0, 36, 56)	hsl(201, 100%, 11%)
Her Highness	rgb(71, 49, 111)	hsl(261, 39%, 31%)
Succulent Lime	rgb(214, 227, 118)	hsl(67, 66%, 68%)
Bavarian Green	rgb(118, 152, 90)	hsl(93, 26%, 47%)
Embarrassed Frog	rgb(160, 97, 0)	hsl(36, 100%, 31%)
Carona	rgb(248, 164, 58)	hsl(33, 93%, 60%)

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.54:1 Very good#002438 on #D6E376
Aa11.54:1 Very good#D6E376 on #002438
Aa7.91:1 Very good#002438 on #F8A43A
Aa7.91:1 Very good#F8A43A on #002438
Aa7.80:1 Very good#47316F on #D6E376
Aa7.80:1 Very good#D6E376 on #47316F
Aa5.35:1 Good#47316F on #F8A43A
Aa5.35:1 Good#F8A43A on #47316F

Color blindness preview

CSS variables

/* Midnight Dreams to Carona — https://swatchly.xyz/palette/002438-47316f-d6e376-76985a-a06100-f8a43a */
:root {
  --midnight-dreams: #002438;
  --her-highness: #47316f;
  --succulent-lime: #d6e376;
  --bavarian-green: #76985a;
  --embarrassed-frog: #a06100;
  --carona: #f8a43a;
}

Tailwind CSS v4

/* Midnight Dreams to Carona — https://swatchly.xyz/palette/002438-47316f-d6e376-76985a-a06100-f8a43a */
@theme {
  --color-midnight-dreams: #002438;
  --color-midnight-dreams-50: #ecf7ff;
  --color-midnight-dreams-100: #d8efff;
  --color-midnight-dreams-200: #c0dcf0;
  --color-midnight-dreams-300: #a6c6dc;
  --color-midnight-dreams-400: #83a7bf;
  --color-midnight-dreams-500: #678ca4;
  --color-midnight-dreams-600: #4e7189;
  --color-midnight-dreams-700: #3a5b70;
  --color-midnight-dreams-800: #2b475a;
  --color-midnight-dreams-900: #1f3747;
  --color-midnight-dreams-950: #002438;
  --color-her-highness: #47316f;
  --color-her-highness-50: #f6f3ff;
  --color-her-highness-100: #ede7ff;
  --color-her-highness-200: #dccfff;
  --color-her-highness-300: #c6b5f3;
  --color-her-highness-400: #a793d7;
  --color-her-highness-500: #8c77bb;
  --color-her-highness-600: #715c9d;
  --color-her-highness-700: #594681;
  --color-her-highness-800: #47316f;
  --color-her-highness-900: #362752;
  --color-her-highness-950: #211735;
  --color-succulent-lime: #d6e376;
  --color-succulent-lime-50: #f4fcc4;
  --color-succulent-lime-100: #eaf3b4;
  --color-succulent-lime-200: #d6e376;
  --color-succulent-lime-300: #c0cb71;
  --color-succulent-lime-400: #a0ab43;
  --color-succulent-lime-500: #858f16;
  --color-succulent-lime-600: #6b7300;
  --color-succulent-lime-700: #545b00;
  --color-succulent-lime-800: #414700;
  --color-succulent-lime-900: #323700;
  --color-succulent-lime-950: #1f2200;
  --color-bavarian-green: #76985a;
  --color-bavarian-green-50: #eafedb;
  --color-bavarian-green-100: #dff6ce;
  --color-bavarian-green-200: #cae5b6;
  --color-bavarian-green-300: #b2d09b;
  --color-bavarian-green-400: #91b377;
  --color-bavarian-green-500: #76985a;
  --color-bavarian-green-600: #5b7c40;
  --color-bavarian-green-700: #46632b;
  --color-bavarian-green-800: #344e1c;
  --color-bavarian-green-900: #263c11;
  --color-bavarian-green-950: #162507;
  --color-embarrassed-frog: #a06100;
  --color-embarrassed-frog-50: #fff3e7;
  --color-embarrassed-frog-100: #ffe8d1;
  --color-embarrassed-frog-200: #ffd0a0;
  --color-embarrassed-frog-300: #f1b77b;
  --color-embarrassed-frog-400: #d69751;
  --color-embarrassed-frog-500: #bc7b2d;
  --color-embarrassed-frog-600: #a06100;
  --color-embarrassed-frog-700: #804c00;
  --color-embarrassed-frog-800: #643b00;
  --color-embarrassed-frog-900: #4e2d00;
  --color-embarrassed-frog-950: #321b00;
  --color-carona: #f8a43a;
  --color-carona-50: #ffeedc;
  --color-carona-100: #ffe0bf;
  --color-carona-200: #ffc484;
  --color-carona-300: #f8a43a;
  --color-carona-400: #d68711;
  --color-carona-500: #b46f00;
  --color-carona-600: #925900;
  --color-carona-700: #764700;
  --color-carona-800: #5e3700;
  --color-carona-900: #4a2b00;
  --color-carona-950: #2f1900;
}