Start generating

Pitch-Black Forests to Grape Fizz color palette

00372EPitch-Black ForestsFEF3FFWalkie ChalkieC2C188Kiss a Frog55907BHighlands9EA368Willow Leaf6A4666Grape Fizz
Open in generator Export PNG, PDF, ASE…

About this palette

Pitch-Black Forests to Grape Fizz is a 6-color vintage palette: #00372E (Pitch-Black Forests), #FEF3FF (Walkie Chalkie), #C2C188 (Kiss a Frog), #55907B (Highlands), #9EA368 (Willow Leaf), #6A4666 (Grape Fizz). It mixes turquoise, white, yellow, green, purple tones and feels warm overall. The strongest text pairing is #00372E on #FEF3FF with a contrast ratio of 12.28:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Pitch-Black Forestsrgb(0, 55, 46)hsl(170, 100%, 11%)
Walkie Chalkiergb(254, 243, 255)hsl(295, 100%, 98%)
Kiss a Frogrgb(194, 193, 136)hsl(59, 32%, 65%)
Highlandsrgb(85, 144, 123)hsl(159, 26%, 45%)
Willow Leafrgb(158, 163, 104)hsl(65, 24%, 52%)
Grape Fizzrgb(106, 70, 102)hsl(307, 20%, 35%)

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.28:1 Super#00372E on #FEF3FF
  • Aa12.28:1 Super#FEF3FF on #00372E
  • Aa7.27:1 Very good#FEF3FF on #6A4666
  • Aa7.27:1 Very good#6A4666 on #FEF3FF
  • Aa7.11:1 Very good#00372E on #C2C188
  • Aa7.11:1 Very good#C2C188 on #00372E
  • Aa4.98:1 Good#00372E on #9EA368
  • Aa4.98:1 Good#9EA368 on #00372E

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Pitch-Black Forests to Grape Fizz — https://swatchly.xyz/palette/00372e-fef3ff-c2c188-55907b-9ea368-6a4666 */
:root {
  --pitch-black-forests: #00372e;
  --walkie-chalkie: #fef3ff;
  --kiss-a-frog: #c2c188;
  --highlands: #55907b;
  --willow-leaf: #9ea368;
  --grape-fizz: #6a4666;
}

Tailwind CSS v4

/* Pitch-Black Forests to Grape Fizz — https://swatchly.xyz/palette/00372e-fef3ff-c2c188-55907b-9ea368-6a4666 */
@theme {
  --color-pitch-black-forests: #00372e;
  --color-pitch-black-forests-50: #e1fcf5;
  --color-pitch-black-forests-100: #d4f3eb;
  --color-pitch-black-forests-200: #bce1d7;
  --color-pitch-black-forests-300: #a1cbc1;
  --color-pitch-black-forests-400: #7daca0;
  --color-pitch-black-forests-500: #5f9084;
  --color-pitch-black-forests-600: #457469;
  --color-pitch-black-forests-700: #305b52;
  --color-pitch-black-forests-800: #21463e;
  --color-pitch-black-forests-900: #00372e;
  --color-pitch-black-forests-950: #0a201c;
  --color-walkie-chalkie: #fef3ff;
  --color-walkie-chalkie-50: #fef3ff;
  --color-walkie-chalkie-100: #f1eaf1;
  --color-walkie-chalkie-200: #ded6de;
  --color-walkie-chalkie-300: #c7bec8;
  --color-walkie-chalkie-400: #a89ea9;
  --color-walkie-chalkie-500: #8c838d;
  --color-walkie-chalkie-600: #716872;
  --color-walkie-chalkie-700: #5a525b;
  --color-walkie-chalkie-800: #474048;
  --color-walkie-chalkie-900: #373037;
  --color-walkie-chalkie-950: #221e22;
  --color-kiss-a-frog: #c2c188;
  --color-kiss-a-frog-50: #f6f6d5;
  --color-kiss-a-frog-100: #ecebc7;
  --color-kiss-a-frog-200: #d8d7ac;
  --color-kiss-a-frog-300: #c2c188;
  --color-kiss-a-frog-400: #a3a26c;
  --color-kiss-a-frog-500: #898750;
  --color-kiss-a-frog-600: #6f6d38;
  --color-kiss-a-frog-700: #585726;
  --color-kiss-a-frog-800: #464418;
  --color-kiss-a-frog-900: #36350f;
  --color-kiss-a-frog-950: #222106;
  --color-highlands: #55907b;
  --color-highlands-50: #dcfdf0;
  --color-highlands-100: #cef4e5;
  --color-highlands-200: #b4e1cf;
  --color-highlands-300: #98cbb7;
  --color-highlands-400: #73ac97;
  --color-highlands-500: #55907b;
  --color-highlands-600: #3c7562;
  --color-highlands-700: #295e4d;
  --color-highlands-800: #1b4a3b;
  --color-highlands-900: #113a2d;
  --color-highlands-950: #07251b;
  --color-willow-leaf: #9ea368;
  --color-willow-leaf-50: #f4f7d5;
  --color-willow-leaf-100: #e9edc7;
  --color-willow-leaf-200: #d5d9ac;
  --color-willow-leaf-300: #bec38f;
  --color-willow-leaf-400: #9ea368;
  --color-willow-leaf-500: #84884e;
  --color-willow-leaf-600: #6a6e36;
  --color-willow-leaf-700: #545824;
  --color-willow-leaf-800: #424516;
  --color-willow-leaf-900: #33350d;
  --color-willow-leaf-950: #202105;
  --color-grape-fizz: #6a4666;
  --color-grape-fizz-50: #fff0fd;
  --color-grape-fizz-100: #fde2f9;
  --color-grape-fizz-200: #eccce7;
  --color-grape-fizz-300: #d7b3d2;
  --color-grape-fizz-400: #b992b4;
  --color-grape-fizz-500: #9e7799;
  --color-grape-fizz-600: #825d7d;
  --color-grape-fizz-700: #6a4666;
  --color-grape-fizz-800: #533650;
  --color-grape-fizz-900: #41293e;
  --color-grape-fizz-950: #291827;
}

Similar palettes