Quiet Jade to Pitch-Black Forests Color Palette

About this palette

Quiet Jade to Pitch-Black Forests is a 5-color cool, earthy, vintage palette: #B5E4C9 (Quiet Jade), #79452C (Peanut), #AE5C29 (Autumnal), #B0B3EB (Wondrous Wisteria), #152E1D (Pitch-Black Forests). It mixes green, brown, purple tones and feels cool overall. The strongest text pairing is #B5E4C9 on #152E1D with a contrast ratio of 10.35:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Quiet Jade	rgb(181, 228, 201)	hsl(146, 47%, 80%)
Peanut	rgb(121, 69, 44)	hsl(19, 47%, 32%)
Autumnal	rgb(174, 92, 41)	hsl(23, 62%, 42%)
Wondrous Wisteria	rgb(176, 179, 235)	hsl(237, 60%, 81%)
Pitch-Black Forests	rgb(21, 46, 29)	hsl(139, 37%, 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.

Aa10.35:1 Very good#B5E4C9 on #152E1D
Aa10.35:1 Very good#152E1D on #B5E4C9
Aa7.29:1 Very good#B0B3EB on #152E1D
Aa7.29:1 Very good#152E1D on #B0B3EB
Aa5.52:1 Good#B5E4C9 on #79452C
Aa5.52:1 Good#79452C on #B5E4C9
Aa3.89:1 Poor#79452C on #B0B3EB
Aa3.89:1 Poor#B0B3EB on #79452C

Color blindness preview

CSS variables

/* Quiet Jade to Pitch-Black Forests — https://swatchly.xyz/palette/b5e4c9-79452c-ae5c29-b0b3eb-152e1d */
:root {
  --quiet-jade: #b5e4c9;
  --peanut: #79452c;
  --autumnal: #ae5c29;
  --wondrous-wisteria: #b0b3eb;
  --pitch-black-forests: #152e1d;
}

Tailwind CSS v4

/* Quiet Jade to Pitch-Black Forests — https://swatchly.xyz/palette/b5e4c9-79452c-ae5c29-b0b3eb-152e1d */
@theme {
  --color-quiet-jade: #b5e4c9;
  --color-quiet-jade-50: #e2fced;
  --color-quiet-jade-100: #d6f3e2;
  --color-quiet-jade-200: #b5e4c9;
  --color-quiet-jade-300: #a4cbb5;
  --color-quiet-jade-400: #82ad94;
  --color-quiet-jade-500: #659279;
  --color-quiet-jade-600: #4c775f;
  --color-quiet-jade-700: #385f4a;
  --color-quiet-jade-800: #284b39;
  --color-quiet-jade-900: #1c3a2b;
  --color-quiet-jade-950: #0f2419;
  --color-peanut: #79452c;
  --color-peanut-50: #fff2ec;
  --color-peanut-100: #ffe5d9;
  --color-peanut-200: #faccb7;
  --color-peanut-300: #e7b39c;
  --color-peanut-400: #ca9278;
  --color-peanut-500: #af765c;
  --color-peanut-600: #915c43;
  --color-peanut-700: #79452c;
  --color-peanut-800: #5f3521;
  --color-peanut-900: #4b2817;
  --color-peanut-950: #30170b;
  --color-autumnal: #ae5c29;
  --color-autumnal-50: #fff2ec;
  --color-autumnal-100: #ffe8db;
  --color-autumnal-200: #ffd0b6;
  --color-autumnal-300: #fdb289;
  --color-autumnal-400: #e39163;
  --color-autumnal-500: #ca7645;
  --color-autumnal-600: #ae5c29;
  --color-autumnal-700: #904510;
  --color-autumnal-800: #743200;
  --color-autumnal-900: #5a2500;
  --color-autumnal-950: #3a1600;
  --color-wondrous-wisteria: #b0b3eb;
  --color-wondrous-wisteria-50: #eeefff;
  --color-wondrous-wisteria-100: #e1e3ff;
  --color-wondrous-wisteria-200: #c9ccf9;
  --color-wondrous-wisteria-300: #b0b3eb;
  --color-wondrous-wisteria-400: #9395ca;
  --color-wondrous-wisteria-500: #797bb0;
  --color-wondrous-wisteria-600: #616294;
  --color-wondrous-wisteria-700: #4d4e7a;
  --color-wondrous-wisteria-800: #3c3c63;
  --color-wondrous-wisteria-900: #2e2f50;
  --color-wondrous-wisteria-950: #1c1c34;
  --color-pitch-black-forests: #152e1d;
  --color-pitch-black-forests-50: #eafaed;
  --color-pitch-black-forests-100: #def1e3;
  --color-pitch-black-forests-200: #c8decd;
  --color-pitch-black-forests-300: #afc8b5;
  --color-pitch-black-forests-400: #8eaa95;
  --color-pitch-black-forests-500: #74907b;
  --color-pitch-black-forests-600: #5c7763;
  --color-pitch-black-forests-700: #48614f;
  --color-pitch-black-forests-800: #394f3f;
  --color-pitch-black-forests-900: #2c4032;
  --color-pitch-black-forests-950: #152e1d;
}