Widowmaker to Frozen Forest color palette

99A5FDWidowmaker AF855EIced Coffee 5755A0Ultrapurple Merge 734100Hazelnut Chocolate D2E8BDFrozen Forest

Open in generator Export PNG, PDF, ASE…

About this palette

Widowmaker to Frozen Forest is a 5-color cool, earthy, vintage palette: #99A5FD (Widowmaker), #AF855E (Iced Coffee), #5755A0 (Ultrapurple Merge), #734100 (Hazelnut Chocolate), #D2E8BD (Frozen Forest). It mixes purple, orange, brown, green tones and feels cool overall. The strongest text pairing is #734100 on #D2E8BD with a contrast ratio of 6.45:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Widowmaker	rgb(153, 165, 253)	hsl(233, 96%, 80%)
Iced Coffee	rgb(175, 133, 94)	hsl(29, 34%, 53%)
Ultrapurple Merge	rgb(87, 85, 160)	hsl(242, 31%, 48%)
Hazelnut Chocolate	rgb(115, 65, 0)	hsl(34, 100%, 23%)
Frozen Forest	rgb(210, 232, 189)	hsl(91, 48%, 83%)

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.

Aa6.45:1 Good#734100 on #D2E8BD
Aa6.45:1 Good#D2E8BD on #734100
Aa4.99:1 Good#5755A0 on #D2E8BD
Aa4.99:1 Good#D2E8BD on #5755A0
Aa3.68:1 Poor#99A5FD on #734100
Aa3.68:1 Poor#734100 on #99A5FD

Color blindness preview

CSS variables

/* Widowmaker to Frozen Forest — https://swatchly.xyz/palette/99a5fd-af855e-5755a0-734100-d2e8bd */
:root {
  --widowmaker: #99a5fd;
  --iced-coffee: #af855e;
  --ultrapurple-merge: #5755a0;
  --hazelnut-chocolate: #734100;
  --frozen-forest: #d2e8bd;
}

Tailwind CSS v4

/* Widowmaker to Frozen Forest — https://swatchly.xyz/palette/99a5fd-af855e-5755a0-734100-d2e8bd */
@theme {
  --color-widowmaker: #99a5fd;
  --color-widowmaker-50: #f8f9ff;
  --color-widowmaker-100: #eef1ff;
  --color-widowmaker-200: #d7deff;
  --color-widowmaker-300: #bdc7ff;
  --color-widowmaker-400: #99a5fd;
  --color-widowmaker-500: #7d87dc;
  --color-widowmaker-600: #616abc;
  --color-widowmaker-700: #4b519c;
  --color-widowmaker-800: #383d7f;
  --color-widowmaker-900: #292d64;
  --color-widowmaker-950: #181a41;
  --color-iced-coffee: #af855e;
  --color-iced-coffee-50: #fff5ec;
  --color-iced-coffee-100: #ffead8;
  --color-iced-coffee-200: #f6d5b8;
  --color-iced-coffee-300: #e4bf9e;
  --color-iced-coffee-400: #c9a07b;
  --color-iced-coffee-500: #af855e;
  --color-iced-coffee-600: #916943;
  --color-iced-coffee-700: #76522e;
  --color-iced-coffee-800: #5e3e1e;
  --color-iced-coffee-900: #492e13;
  --color-iced-coffee-950: #2f1b08;
  --color-ultrapurple-merge: #5755a0;
  --color-ultrapurple-merge-50: #f3f4ff;
  --color-ultrapurple-merge-100: #e8e9ff;
  --color-ultrapurple-merge-200: #d3d6ff;
  --color-ultrapurple-merge-300: #bbbeff;
  --color-ultrapurple-merge-400: #9d9eec;
  --color-ultrapurple-merge-500: #8384d3;
  --color-ultrapurple-merge-600: #6b6bb7;
  --color-ultrapurple-merge-700: #5755a0;
  --color-ultrapurple-merge-800: #434181;
  --color-ultrapurple-merge-900: #333167;
  --color-ultrapurple-merge-950: #1f1d45;
  --color-hazelnut-chocolate: #734100;
  --color-hazelnut-chocolate-50: #fff3e8;
  --color-hazelnut-chocolate-100: #ffe6d1;
  --color-hazelnut-chocolate-200: #f9cda5;
  --color-hazelnut-chocolate-300: #e5b386;
  --color-hazelnut-chocolate-400: #c7915e;
  --color-hazelnut-chocolate-500: #aa743f;
  --color-hazelnut-chocolate-600: #8c5925;
  --color-hazelnut-chocolate-700: #734100;
  --color-hazelnut-chocolate-800: #593304;
  --color-hazelnut-chocolate-900: #472600;
  --color-hazelnut-chocolate-950: #2d1600;
  --color-frozen-forest: #d2e8bd;
  --color-frozen-forest-50: #f4ffe9;
  --color-frozen-forest-100: #eaf7de;
  --color-frozen-forest-200: #d2e8bd;
  --color-frozen-forest-300: #bdceac;
  --color-frozen-forest-400: #9aae87;
  --color-frozen-forest-500: #7e916a;
  --color-frozen-forest-600: #63754f;
  --color-frozen-forest-700: #4c5d3a;
  --color-frozen-forest-800: #39482a;
  --color-frozen-forest-900: #2b381e;
  --color-frozen-forest-950: #1a2310;
}