Pitch-Black Forests to Wave Color Palette

About this palette

Pitch-Black Forests to Wave is a 4-color vintage palette: #132E1C (Pitch-Black Forests), #B9706F (Morocco), #654042 (Wild Thing), #9BCFDD (Wave). It mixes green, red, brown, blue tones and feels balanced overall. The strongest text pairing is #132E1C on #9BCFDD with a contrast ratio of 8.61:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pitch-Black Forests	rgb(19, 46, 28)	hsl(140, 42%, 13%)
Morocco	rgb(185, 112, 111)	hsl(1, 35%, 58%)
Wild Thing	rgb(101, 64, 66)	hsl(357, 22%, 32%)
Wave	rgb(155, 207, 221)	hsl(193, 49%, 74%)

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.

Aa8.61:1 Very good#132E1C on #9BCFDD
Aa8.61:1 Very good#9BCFDD on #132E1C
Aa5.23:1 Good#654042 on #9BCFDD
Aa5.23:1 Good#9BCFDD on #654042
Aa3.91:1 Poor#132E1C on #B9706F
Aa3.91:1 Poor#B9706F on #132E1C

Color blindness preview

CSS variables

/* Pitch-Black Forests to Wave — https://swatchly.xyz/palette/132e1c-b9706f-654042-9bcfdd */
:root {
  --pitch-black-forests: #132e1c;
  --morocco: #b9706f;
  --wild-thing: #654042;
  --wave: #9bcfdd;
}

Tailwind CSS v4

/* Pitch-Black Forests to Wave — https://swatchly.xyz/palette/132e1c-b9706f-654042-9bcfdd */
@theme {
  --color-pitch-black-forests: #132e1c;
  --color-pitch-black-forests-50: #e9fbed;
  --color-pitch-black-forests-100: #ddf1e2;
  --color-pitch-black-forests-200: #c7dfcd;
  --color-pitch-black-forests-300: #aec9b5;
  --color-pitch-black-forests-400: #8daa94;
  --color-pitch-black-forests-500: #73917a;
  --color-pitch-black-forests-600: #5a7762;
  --color-pitch-black-forests-700: #47614e;
  --color-pitch-black-forests-800: #374f3e;
  --color-pitch-black-forests-900: #2b4031;
  --color-pitch-black-forests-950: #132e1c;
  --color-morocco: #b9706f;
  --color-morocco-50: #fff2f1;
  --color-morocco-100: #ffe4e3;
  --color-morocco-200: #ffc9c7;
  --color-morocco-300: #f1aeac;
  --color-morocco-400: #d58c8b;
  --color-morocco-500: #b9706f;
  --color-morocco-600: #9b5656;
  --color-morocco-700: #7f4141;
  --color-morocco-800: #663030;
  --color-morocco-900: #512324;
  --color-morocco-950: #351414;
  --color-wild-thing: #654042;
  --color-wild-thing-50: #fff1f2;
  --color-wild-thing-100: #ffe4e4;
  --color-wild-thing-200: #f0cecf;
  --color-wild-thing-300: #deb8b9;
  --color-wild-thing-400: #c2999b;
  --color-wild-thing-500: #a97f81;
  --color-wild-thing-600: #8e6668;
  --color-wild-thing-700: #775254;
  --color-wild-thing-800: #654042;
  --color-wild-thing-900: #4e3133;
  --color-wild-thing-950: #331e1f;
  --color-wave: #9bcfdd;
  --color-wave-50: #ebfbff;
  --color-wave-100: #d5f4fd;
  --color-wave-200: #bde2ed;
  --color-wave-300: #9bcfdd;
  --color-wave-400: #7eaebb;
  --color-wave-500: #60929f;
  --color-wave-600: #457683;
  --color-wave-700: #315e69;
  --color-wave-800: #214953;
  --color-wave-900: #163841;
  --color-wave-950: #0a2329;
}