Frozen Forest to Dark Prom Queen color palette

C9E5B9Frozen Forest 96B77FFoliage 5F8747Homegrown 9449BFFuchsia Pheromone 63357CGalactic Grapevine 28162EDark Prom Queen

Open in generator Export PNG, PDF, ASE…

About this palette

Frozen Forest to Dark Prom Queen is a 6-color cool palette: #C9E5B9 (Frozen Forest), #96B77F (Foliage), #5F8747 (Homegrown), #9449BF (Fuchsia Pheromone), #63357C (Galactic Grapevine), #28162E (Dark Prom Queen). It mixes green, purple tones and feels cool overall. The strongest text pairing is #C9E5B9 on #28162E with a contrast ratio of 12.37:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Frozen Forest	rgb(201, 229, 185)	hsl(98, 46%, 81%)
Foliage	rgb(150, 183, 127)	hsl(95, 28%, 61%)
Homegrown	rgb(95, 135, 71)	hsl(98, 31%, 40%)
Fuchsia Pheromone	rgb(148, 73, 191)	hsl(278, 48%, 52%)
Galactic Grapevine	rgb(99, 53, 124)	hsl(279, 40%, 35%)
Dark Prom Queen	rgb(40, 22, 46)	hsl(285, 35%, 13%)

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.37:1 Super#C9E5B9 on #28162E
Aa12.37:1 Super#28162E on #C9E5B9
Aa7.53:1 Very good#96B77F on #28162E
Aa7.53:1 Very good#28162E on #96B77F
Aa6.60:1 Good#C9E5B9 on #63357C
Aa6.60:1 Good#63357C on #C9E5B9
Aa4.05:1 Poor#5F8747 on #28162E
Aa4.05:1 Poor#28162E on #5F8747

Color blindness preview

CSS variables

/* Frozen Forest to Dark Prom Queen — https://swatchly.xyz/palette/c9e5b9-96b77f-5f8747-9449bf-63357c-28162e */
:root {
  --frozen-forest: #c9e5b9;
  --foliage: #96b77f;
  --homegrown: #5f8747;
  --fuchsia-pheromone: #9449bf;
  --galactic-grapevine: #63357c;
  --dark-prom-queen: #28162e;
}

Tailwind CSS v4

/* Frozen Forest to Dark Prom Queen — https://swatchly.xyz/palette/c9e5b9-96b77f-5f8747-9449bf-63357c-28162e */
@theme {
  --color-frozen-forest: #c9e5b9;
  --color-frozen-forest-50: #eefde5;
  --color-frozen-forest-100: #e3f4da;
  --color-frozen-forest-200: #c9e5b9;
  --color-frozen-forest-300: #b5cca8;
  --color-frozen-forest-400: #93ad85;
  --color-frozen-forest-500: #779168;
  --color-frozen-forest-600: #5d754e;
  --color-frozen-forest-700: #475d3a;
  --color-frozen-forest-800: #36492a;
  --color-frozen-forest-900: #28381e;
  --color-frozen-forest-950: #182310;
  --color-foliage: #96b77f;
  --color-foliage-50: #eeffe3;
  --color-foliage-100: #e3f8d6;
  --color-foliage-200: #cfe7bf;
  --color-foliage-300: #b8d3a5;
  --color-foliage-400: #96b77f;
  --color-foliage-500: #7a9963;
  --color-foliage-600: #5e7c48;
  --color-foliage-700: #476332;
  --color-foliage-800: #354d22;
  --color-foliage-900: #273b17;
  --color-foliage-950: #16240a;
  --color-homegrown: #5f8747;
  --color-homegrown-50: #e3fcd5;
  --color-homegrown-100: #d4f1c5;
  --color-homegrown-200: #bbdda8;
  --color-homegrown-300: #9fc58a;
  --color-homegrown-400: #7ca565;
  --color-homegrown-500: #5f8747;
  --color-homegrown-600: #496e31;
  --color-homegrown-700: #375821;
  --color-homegrown-800: #294615;
  --color-homegrown-900: #1e370d;
  --color-homegrown-950: #112305;
  --color-fuchsia-pheromone: #9449bf;
  --color-fuchsia-pheromone-50: #f9f2ff;
  --color-fuchsia-pheromone-100: #f4e6ff;
  --color-fuchsia-pheromone-200: #eaccff;
  --color-fuchsia-pheromone-300: #deadff;
  --color-fuchsia-pheromone-400: #c982f5;
  --color-fuchsia-pheromone-500: #af64dc;
  --color-fuchsia-pheromone-600: #9449bf;
  --color-fuchsia-pheromone-700: #7932a0;
  --color-fuchsia-pheromone-800: #612183;
  --color-fuchsia-pheromone-900: #4c1469;
  --color-fuchsia-pheromone-950: #310846;
  --color-galactic-grapevine: #63357c;
  --color-galactic-grapevine-50: #faf2ff;
  --color-galactic-grapevine-100: #f4e4ff;
  --color-galactic-grapevine-200: #e9c6ff;
  --color-galactic-grapevine-300: #d5aaef;
  --color-galactic-grapevine-400: #b687d2;
  --color-galactic-grapevine-500: #9969b4;
  --color-galactic-grapevine-600: #7b4e95;
  --color-galactic-grapevine-700: #63357c;
  --color-galactic-grapevine-800: #4d2a60;
  --color-galactic-grapevine-900: #3c1e4c;
  --color-galactic-grapevine-950: #261131;
  --color-dark-prom-queen: #28162e;
  --color-dark-prom-queen-50: #fbf1ff;
  --color-dark-prom-queen-100: #f4e5f9;
  --color-dark-prom-queen-200: #e2d0e8;
  --color-dark-prom-queen-300: #cdb9d4;
  --color-dark-prom-queen-400: #ae98b6;
  --color-dark-prom-queen-500: #937d9a;
  --color-dark-prom-queen-600: #78637f;
  --color-dark-prom-queen-700: #604d66;
  --color-dark-prom-queen-800: #4b3b51;
  --color-dark-prom-queen-900: #3a2c3f;
  --color-dark-prom-queen-950: #28162e;
}