Pitch-Black Forests to Puffy Cloud color palette

00352BPitch-Black Forests 854C66Grape Kiss B6778CPrehistoric Pink E2B771Harvest Gold D3E2FFPuffy Cloud

Open in generator Export PNG, PDF, ASE…

About this palette

Pitch-Black Forests to Puffy Cloud is a 5-color warm, vintage palette: #00352B (Pitch-Black Forests), #854C66 (Grape Kiss), #B6778C (Prehistoric Pink), #E2B771 (Harvest Gold), #D3E2FF (Puffy Cloud). It mixes turquoise, red, pink, yellow, blue tones and feels warm overall. The strongest text pairing is #00352B on #D3E2FF with a contrast ratio of 10.42:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pitch-Black Forests	rgb(0, 53, 43)	hsl(169, 100%, 10%)
Grape Kiss	rgb(133, 76, 102)	hsl(333, 27%, 41%)
Prehistoric Pink	rgb(182, 119, 140)	hsl(340, 30%, 59%)
Harvest Gold	rgb(226, 183, 113)	hsl(37, 66%, 66%)
Puffy Cloud	rgb(211, 226, 255)	hsl(220, 100%, 91%)

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.

Aa10.42:1 Very good#00352B on #D3E2FF
Aa10.42:1 Very good#D3E2FF on #00352B
Aa7.28:1 Very good#00352B on #E2B771
Aa7.28:1 Very good#E2B771 on #00352B
Aa4.99:1 Good#854C66 on #D3E2FF
Aa4.99:1 Good#D3E2FF on #854C66
Aa3.89:1 Poor#00352B on #B6778C
Aa3.89:1 Poor#B6778C on #00352B

Color blindness preview

CSS variables

/* Pitch-Black Forests to Puffy Cloud — https://swatchly.xyz/palette/00352b-854c66-b6778c-e2b771-d3e2ff */
:root {
  --pitch-black-forests: #00352b;
  --grape-kiss: #854c66;
  --prehistoric-pink: #b6778c;
  --harvest-gold: #e2b771;
  --puffy-cloud: #d3e2ff;
}

Tailwind CSS v4

/* Pitch-Black Forests to Puffy Cloud — https://swatchly.xyz/palette/00352b-854c66-b6778c-e2b771-d3e2ff */
@theme {
  --color-pitch-black-forests: #00352b;
  --color-pitch-black-forests-50: #e1fcf4;
  --color-pitch-black-forests-100: #d5f3ea;
  --color-pitch-black-forests-200: #bce1d6;
  --color-pitch-black-forests-300: #a2cbbf;
  --color-pitch-black-forests-400: #7dab9f;
  --color-pitch-black-forests-500: #5f8f82;
  --color-pitch-black-forests-600: #457267;
  --color-pitch-black-forests-700: #305a4f;
  --color-pitch-black-forests-800: #21443c;
  --color-pitch-black-forests-900: #00352b;
  --color-pitch-black-forests-950: #0a1f1a;
  --color-grape-kiss: #854c66;
  --color-grape-kiss-50: #fff1f6;
  --color-grape-kiss-100: #ffdfec;
  --color-grape-kiss-200: #f6c3d8;
  --color-grape-kiss-300: #e1a8c0;
  --color-grape-kiss-400: #c2859f;
  --color-grape-kiss-500: #a36882;
  --color-grape-kiss-600: #854c66;
  --color-grape-kiss-700: #6b3b51;
  --color-grape-kiss-800: #562c3f;
  --color-grape-kiss-900: #442131;
  --color-grape-kiss-950: #2c131f;
  --color-prehistoric-pink: #b6778c;
  --color-prehistoric-pink-50: #fff3f6;
  --color-prehistoric-pink-100: #ffe6ed;
  --color-prehistoric-pink-200: #fdcbda;
  --color-prehistoric-pink-300: #ecb3c5;
  --color-prehistoric-pink-400: #d092a6;
  --color-prehistoric-pink-500: #b6778c;
  --color-prehistoric-pink-600: #985c70;
  --color-prehistoric-pink-700: #7c4659;
  --color-prehistoric-pink-800: #633445;
  --color-prehistoric-pink-900: #4e2634;
  --color-prehistoric-pink-950: #321520;
  --color-harvest-gold: #e2b771;
  --color-harvest-gold-50: #fff2de;
  --color-harvest-gold-100: #ffe6bf;
  --color-harvest-gold-200: #f1d09d;
  --color-harvest-gold-300: #e2b771;
  --color-harvest-gold-400: #c19856;
  --color-harvest-gold-500: #a57d36;
  --color-harvest-gold-600: #896319;
  --color-harvest-gold-700: #704d00;
  --color-harvest-gold-800: #583c00;
  --color-harvest-gold-900: #452e00;
  --color-harvest-gold-950: #2c1c00;
  --color-puffy-cloud: #d3e2ff;
  --color-puffy-cloud-50: #e4edff;
  --color-puffy-cloud-100: #d3e2ff;
  --color-puffy-cloud-200: #c4d0e6;
  --color-puffy-cloud-300: #aebbd4;
  --color-puffy-cloud-400: #909db8;
  --color-puffy-cloud-500: #76849e;
  --color-puffy-cloud-600: #5e6b83;
  --color-puffy-cloud-700: #4a556c;
  --color-puffy-cloud-800: #384256;
  --color-puffy-cloud-900: #2a3343;
  --color-puffy-cloud-950: #191f2b;
}