Midnight Pines to Heart Potion color palette

20250CMidnight Pines 354769Forlorn Cruise ADC6FFNight Snow F7F5CFMoon Glow 87668CSunshone Plum A984A9Heart Potion

Open in generator Export PNG, PDF, ASE…

About this palette

Midnight Pines to Heart Potion is a 6-color cool palette: #20250C (Midnight Pines), #354769 (Forlorn Cruise), #ADC6FF (Night Snow), #F7F5CF (Moon Glow), #87668C (Sunshone Plum), #A984A9 (Heart Potion). It mixes green, blue, white, purple, pink tones and feels cool overall. The strongest text pairing is #20250C on #F7F5CF with a contrast ratio of 14.21:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Pines	rgb(32, 37, 12)	hsl(72, 51%, 10%)
Forlorn Cruise	rgb(53, 71, 105)	hsl(219, 33%, 31%)
Night Snow	rgb(173, 198, 255)	hsl(222, 100%, 84%)
Moon Glow	rgb(247, 245, 207)	hsl(57, 71%, 89%)
Sunshone Plum	rgb(135, 102, 140)	hsl(292, 16%, 47%)
Heart Potion	rgb(169, 132, 169)	hsl(300, 18%, 59%)

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.

Aa14.21:1 Super#20250C on #F7F5CF
Aa14.21:1 Super#F7F5CF on #20250C
Aa9.24:1 Very good#20250C on #ADC6FF
Aa9.24:1 Very good#ADC6FF on #20250C
Aa8.38:1 Very good#354769 on #F7F5CF
Aa8.38:1 Very good#F7F5CF on #354769
Aa5.45:1 Good#354769 on #ADC6FF
Aa5.45:1 Good#ADC6FF on #354769

Color blindness preview

CSS variables

/* Midnight Pines to Heart Potion — https://swatchly.xyz/palette/20250c-354769-adc6ff-f7f5cf-87668c-a984a9 */
:root {
  --midnight-pines: #20250c;
  --forlorn-cruise: #354769;
  --night-snow: #adc6ff;
  --moon-glow: #f7f5cf;
  --sunshone-plum: #87668c;
  --heart-potion: #a984a9;
}

Tailwind CSS v4

/* Midnight Pines to Heart Potion — https://swatchly.xyz/palette/20250c-354769-adc6ff-f7f5cf-87668c-a984a9 */
@theme {
  --color-midnight-pines: #20250c;
  --color-midnight-pines-50: #f3f8e6;
  --color-midnight-pines-100: #e9eedb;
  --color-midnight-pines-200: #d5dbc4;
  --color-midnight-pines-300: #bec5ab;
  --color-midnight-pines-400: #9ea589;
  --color-midnight-pines-500: #848b6e;
  --color-midnight-pines-600: #6a7155;
  --color-midnight-pines-700: #545a41;
  --color-midnight-pines-800: #424732;
  --color-midnight-pines-900: #343825;
  --color-midnight-pines-950: #20250c;
  --color-forlorn-cruise: #354769;
  --color-forlorn-cruise-50: #f0f5ff;
  --color-forlorn-cruise-100: #e1ecff;
  --color-forlorn-cruise-200: #c7d8f7;
  --color-forlorn-cruise-300: #b0c3e5;
  --color-forlorn-cruise-400: #90a4c9;
  --color-forlorn-cruise-500: #7589af;
  --color-forlorn-cruise-600: #5c7094;
  --color-forlorn-cruise-700: #485a7b;
  --color-forlorn-cruise-800: #354769;
  --color-forlorn-cruise-900: #293750;
  --color-forlorn-cruise-950: #182234;
  --color-night-snow: #adc6ff;
  --color-night-snow-50: #f5f8ff;
  --color-night-snow-100: #e8efff;
  --color-night-snow-200: #cddcff;
  --color-night-snow-300: #adc6ff;
  --color-night-snow-400: #8fa5da;
  --color-night-snow-500: #7289be;
  --color-night-snow-600: #576da0;
  --color-night-snow-700: #425583;
  --color-night-snow-800: #31426a;
  --color-night-snow-900: #243153;
  --color-night-snow-950: #141e36;
  --color-moon-glow: #f7f5cf;
  --color-moon-glow-50: #f7f5cf;
  --color-moon-glow-100: #ecebd3;
  --color-moon-glow-200: #d9d8bc;
  --color-moon-glow-300: #c3c2a2;
  --color-moon-glow-400: #a5a381;
  --color-moon-glow-500: #8a8865;
  --color-moon-glow-600: #706e4d;
  --color-moon-glow-700: #595739;
  --color-moon-glow-800: #464429;
  --color-moon-glow-900: #36341d;
  --color-moon-glow-950: #212010;
  --color-sunshone-plum: #87668c;
  --color-sunshone-plum-50: #fdf0ff;
  --color-sunshone-plum-100: #fbe4fe;
  --color-sunshone-plum-200: #ebd0ef;
  --color-sunshone-plum-300: #d8b9dc;
  --color-sunshone-plum-400: #bb9ac0;
  --color-sunshone-plum-500: #a17fa6;
  --color-sunshone-plum-600: #87668c;
  --color-sunshone-plum-700: #6d4f72;
  --color-sunshone-plum-800: #563c5a;
  --color-sunshone-plum-900: #432d47;
  --color-sunshone-plum-950: #2b1a2d;
  --color-heart-potion: #a984a9;
  --color-heart-potion-50: #fff3ff;
  --color-heart-potion-100: #ffe7fe;
  --color-heart-potion-200: #f0d4ef;
  --color-heart-potion-300: #debedd;
  --color-heart-potion-400: #c29ec2;
  --color-heart-potion-500: #a984a9;
  --color-heart-potion-600: #8b688b;
  --color-heart-potion-700: #705070;
  --color-heart-potion-800: #593c59;
  --color-heart-potion-900: #442c45;
  --color-heart-potion-950: #2b1a2b;
}