Quiet Thicket to Deep Forest color palette

AFAC8FQuiet Thicket 686A83Heron 5F435EGrape Fizz 8B95ABSilverfish D1B2CCPurple Poodle 38463BDeep Forest

Open in generator Export PNG, PDF, ASE…

About this palette

Quiet Thicket to Deep Forest is a 6-color muted palette: #AFAC8F (Quiet Thicket), #686A83 (Heron), #5F435E (Grape Fizz), #8B95AB (Silverfish), #D1B2CC (Purple Poodle), #38463B (Deep Forest). It mixes yellow, purple, gray, pink tones and feels balanced overall. The strongest text pairing is #D1B2CC on #38463B with a contrast ratio of 5.20:1, and 1 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Quiet Thicket	rgb(175, 172, 143)	hsl(54, 17%, 62%)
Heron	rgb(104, 106, 131)	hsl(236, 11%, 46%)
Grape Fizz	rgb(95, 67, 94)	hsl(302, 17%, 32%)
Silverfish	rgb(139, 149, 171)	hsl(221, 16%, 61%)
Purple Poodle	rgb(209, 178, 204)	hsl(310, 25%, 76%)
Deep Forest	rgb(56, 70, 59)	hsl(133, 11%, 25%)

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.

Aa5.20:1 Good#D1B2CC on #38463B
Aa5.20:1 Good#38463B on #D1B2CC
Aa4.47:1 Poor#5F435E on #D1B2CC
Aa4.47:1 Poor#D1B2CC on #5F435E
Aa4.33:1 Poor#AFAC8F on #38463B
Aa4.33:1 Poor#38463B on #AFAC8F
Aa3.72:1 Poor#AFAC8F on #5F435E
Aa3.72:1 Poor#5F435E on #AFAC8F

Color blindness preview

CSS variables

/* Quiet Thicket to Deep Forest — https://swatchly.xyz/palette/afac8f-686a83-5f435e-8b95ab-d1b2cc-38463b */
:root {
  --quiet-thicket: #afac8f;
  --heron: #686a83;
  --grape-fizz: #5f435e;
  --silverfish: #8b95ab;
  --purple-poodle: #d1b2cc;
  --deep-forest: #38463b;
}

Tailwind CSS v4

/* Quiet Thicket to Deep Forest — https://swatchly.xyz/palette/afac8f-686a83-5f435e-8b95ab-d1b2cc-38463b */
@theme {
  --color-quiet-thicket: #afac8f;
  --color-quiet-thicket-50: #fbf9e9;
  --color-quiet-thicket-100: #f3f1df;
  --color-quiet-thicket-200: #e1dfca;
  --color-quiet-thicket-300: #cccab2;
  --color-quiet-thicket-400: #afac8f;
  --color-quiet-thicket-500: #928f73;
  --color-quiet-thicket-600: #767358;
  --color-quiet-thicket-700: #5d5a42;
  --color-quiet-thicket-800: #484630;
  --color-quiet-thicket-900: #373523;
  --color-quiet-thicket-950: #212013;
  --color-heron: #686a83;
  --color-heron-50: #f3f4ff;
  --color-heron-100: #e8eafc;
  --color-heron-200: #d4d6eb;
  --color-heron-300: #bdbfd7;
  --color-heron-400: #9da0b9;
  --color-heron-500: #82849e;
  --color-heron-600: #686a83;
  --color-heron-700: #52546a;
  --color-heron-800: #3f4154;
  --color-heron-900: #303142;
  --color-heron-950: #1d1e2a;
  --color-grape-fizz: #5f435e;
  --color-grape-fizz-50: #fff0fe;
  --color-grape-fizz-100: #f9e3f7;
  --color-grape-fizz-200: #e6cde5;
  --color-grape-fizz-300: #d0b4cf;
  --color-grape-fizz-400: #b192af;
  --color-grape-fizz-500: #947592;
  --color-grape-fizz-600: #775b76;
  --color-grape-fizz-700: #5f435e;
  --color-grape-fizz-800: #4a3449;
  --color-grape-fizz-900: #392739;
  --color-grape-fizz-950: #241724;
  --color-silverfish: #8b95ab;
  --color-silverfish-50: #eaf1ff;
  --color-silverfish-100: #dde5f4;
  --color-silverfish-200: #c6cfe1;
  --color-silverfish-300: #adb6cb;
  --color-silverfish-400: #8b95ab;
  --color-silverfish-500: #727c91;
  --color-silverfish-600: #5b6478;
  --color-silverfish-700: #485061;
  --color-silverfish-800: #383f4e;
  --color-silverfish-900: #2b313e;
  --color-silverfish-950: #1b1f29;
  --color-purple-poodle: #d1b2cc;
  --color-purple-poodle-50: #ffedfc;
  --color-purple-poodle-100: #f6e1f2;
  --color-purple-poodle-200: #e4cce0;
  --color-purple-poodle-300: #d1b2cc;
  --color-purple-poodle-400: #b194ac;
  --color-purple-poodle-500: #967992;
  --color-purple-poodle-600: #7b6077;
  --color-purple-poodle-700: #644b60;
  --color-purple-poodle-800: #4f3a4c;
  --color-purple-poodle-900: #3e2c3b;
  --color-purple-poodle-950: #271a25;
  --color-deep-forest: #38463b;
  --color-deep-forest-50: #eff8f0;
  --color-deep-forest-100: #e4eee6;
  --color-deep-forest-200: #cfdbd1;
  --color-deep-forest-300: #b7c5ba;
  --color-deep-forest-400: #97a69a;
  --color-deep-forest-500: #7b8b7e;
  --color-deep-forest-600: #617064;
  --color-deep-forest-700: #4b594e;
  --color-deep-forest-800: #38463b;
  --color-deep-forest-900: #2c352e;
  --color-deep-forest-950: #1a211b;
}