Tamed Beauty to Wreath color palette

D5BAD2Tamed Beauty 172B2ASwamp Thing 5A5F4DTree of Life E6F8F4Melting Glacier A994A0Nirvana 748767Wreath

Open in generator Export PNG, PDF, ASE…

About this palette

Tamed Beauty to Wreath is a 6-color muted palette: #D5BAD2 (Tamed Beauty), #172B2A (Swamp Thing), #5A5F4D (Tree of Life), #E6F8F4 (Melting Glacier), #A994A0 (Nirvana), #748767 (Wreath). It mixes pink, gray, white, green tones and feels cool overall. The strongest text pairing is #172B2A on #E6F8F4 with a contrast ratio of 13.49:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tamed Beauty	rgb(213, 186, 210)	hsl(307, 24%, 78%)
Swamp Thing	rgb(23, 43, 42)	hsl(177, 30%, 13%)
Tree of Life	rgb(90, 95, 77)	hsl(77, 10%, 34%)
Melting Glacier	rgb(230, 248, 244)	hsl(167, 56%, 94%)
Nirvana	rgb(169, 148, 160)	hsl(326, 11%, 62%)
Wreath	rgb(116, 135, 103)	hsl(96, 13%, 47%)

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.

Aa13.49:1 Super#172B2A on #E6F8F4
Aa13.49:1 Super#E6F8F4 on #172B2A
Aa8.33:1 Very good#D5BAD2 on #172B2A
Aa8.33:1 Very good#172B2A on #D5BAD2
Aa6.01:1 Good#5A5F4D on #E6F8F4
Aa6.01:1 Good#E6F8F4 on #5A5F4D
Aa5.25:1 Good#172B2A on #A994A0
Aa5.25:1 Good#A994A0 on #172B2A

Color blindness preview

CSS variables

/* Tamed Beauty to Wreath — https://swatchly.xyz/palette/d5bad2-172b2a-5a5f4d-e6f8f4-a994a0-748767 */
:root {
  --tamed-beauty: #d5bad2;
  --swamp-thing: #172b2a;
  --tree-of-life: #5a5f4d;
  --melting-glacier: #e6f8f4;
  --nirvana: #a994a0;
  --wreath: #748767;
}

Tailwind CSS v4

/* Tamed Beauty to Wreath — https://swatchly.xyz/palette/d5bad2-172b2a-5a5f4d-e6f8f4-a994a0-748767 */
@theme {
  --color-tamed-beauty: #d5bad2;
  --color-tamed-beauty-50: #fff2fd;
  --color-tamed-beauty-100: #f8e7f6;
  --color-tamed-beauty-200: #e7d3e4;
  --color-tamed-beauty-300: #d5bad2;
  --color-tamed-beauty-400: #b49bb1;
  --color-tamed-beauty-500: #987f95;
  --color-tamed-beauty-600: #7c647a;
  --color-tamed-beauty-700: #644e61;
  --color-tamed-beauty-800: #4e3c4d;
  --color-tamed-beauty-900: #3d2d3b;
  --color-tamed-beauty-950: #261b25;
  --color-swamp-thing: #172b2a;
  --color-swamp-thing-50: #ebf8f7;
  --color-swamp-thing-100: #e0efee;
  --color-swamp-thing-200: #cadcdb;
  --color-swamp-thing-300: #b1c6c4;
  --color-swamp-thing-400: #90a7a5;
  --color-swamp-thing-500: #768d8c;
  --color-swamp-thing-600: #5e7472;
  --color-swamp-thing-700: #4a5e5d;
  --color-swamp-thing-800: #3a4c4b;
  --color-swamp-thing-900: #2d3d3c;
  --color-swamp-thing-950: #172b2a;
  --color-tree-of-life: #5a5f4d;
  --color-tree-of-life-50: #f3f7eb;
  --color-tree-of-life-100: #e9ede0;
  --color-tree-of-life-200: #d7dbcc;
  --color-tree-of-life-300: #c1c6b5;
  --color-tree-of-life-400: #a3a895;
  --color-tree-of-life-500: #898e7b;
  --color-tree-of-life-600: #6f7562;
  --color-tree-of-life-700: #5a5f4d;
  --color-tree-of-life-800: #464a3b;
  --color-tree-of-life-900: #35392c;
  --color-tree-of-life-950: #21241a;
  --color-melting-glacier: #e6f8f4;
  --color-melting-glacier-50: #e6f8f4;
  --color-melting-glacier-100: #e1edea;
  --color-melting-glacier-200: #cddad7;
  --color-melting-glacier-300: #b5c4c1;
  --color-melting-glacier-400: #95a5a1;
  --color-melting-glacier-500: #7a8a86;
  --color-melting-glacier-600: #60706c;
  --color-melting-glacier-700: #4b5956;
  --color-melting-glacier-800: #394543;
  --color-melting-glacier-900: #2b3533;
  --color-melting-glacier-950: #1a211f;
  --color-nirvana: #a994a0;
  --color-nirvana-50: #fceff6;
  --color-nirvana-100: #f2e3eb;
  --color-nirvana-200: #decdd7;
  --color-nirvana-300: #c8b5c0;
  --color-nirvana-400: #a994a0;
  --color-nirvana-500: #8e7a86;
  --color-nirvana-600: #74616c;
  --color-nirvana-700: #5e4d56;
  --color-nirvana-800: #4a3b44;
  --color-nirvana-900: #3a2e35;
  --color-nirvana-950: #251c21;
  --color-wreath: #748767;
  --color-wreath-50: #edf9e5;
  --color-wreath-100: #e1eed8;
  --color-wreath-200: #cadac0;
  --color-wreath-300: #b1c3a6;
  --color-wreath-400: #90a383;
  --color-wreath-500: #748767;
  --color-wreath-600: #5c6d4f;
  --color-wreath-700: #47573c;
  --color-wreath-800: #37452d;
  --color-wreath-900: #2a3521;
  --color-wreath-950: #192113;
}