Tamed Beauty to Fennelly Color Palette

About this palette

Tamed Beauty to Fennelly is a 5-color muted, cool palette: #D3BED2 (Tamed Beauty), #3C6E63 (Deep Pool Teal), #3C303C (Professor Plum), #728054 (Bonsai), #9A9D80 (Fennelly). It mixes pink, turquoise, gray, green tones and feels cool overall. The strongest text pairing is #D3BED2 on #3C303C with a contrast ratio of 7.18:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tamed Beauty	rgb(211, 190, 210)	hsl(303, 19%, 79%)
Deep Pool Teal	rgb(60, 110, 99)	hsl(167, 29%, 33%)
Professor Plum	rgb(60, 48, 60)	hsl(300, 11%, 21%)
Bonsai	rgb(114, 128, 84)	hsl(79, 21%, 42%)
Fennelly	rgb(154, 157, 128)	hsl(66, 13%, 56%)

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.

Aa7.18:1 Very good#D3BED2 on #3C303C
Aa7.18:1 Very good#3C303C on #D3BED2
Aa4.47:1 Poor#3C303C on #9A9D80
Aa4.47:1 Poor#9A9D80 on #3C303C
Aa3.35:1 Poor#D3BED2 on #3C6E63
Aa3.35:1 Poor#3C6E63 on #D3BED2

Color blindness preview

CSS variables

/* Tamed Beauty to Fennelly — https://swatchly.xyz/palette/d3bed2-3c6e63-3c303c-728054-9a9d80 */
:root {
  --tamed-beauty: #d3bed2;
  --deep-pool-teal: #3c6e63;
  --professor-plum: #3c303c;
  --bonsai: #728054;
  --fennelly: #9a9d80;
}

Tailwind CSS v4

/* Tamed Beauty to Fennelly — https://swatchly.xyz/palette/d3bed2-3c6e63-3c303c-728054-9a9d80 */
@theme {
  --color-tamed-beauty: #d3bed2;
  --color-tamed-beauty-50: #fff3fe;
  --color-tamed-beauty-100: #f7eaf6;
  --color-tamed-beauty-200: #e5d6e5;
  --color-tamed-beauty-300: #d3bed2;
  --color-tamed-beauty-400: #b29eb1;
  --color-tamed-beauty-500: #958295;
  --color-tamed-beauty-600: #7a6779;
  --color-tamed-beauty-700: #615060;
  --color-tamed-beauty-800: #4c3d4b;
  --color-tamed-beauty-900: #3a2e3a;
  --color-tamed-beauty-950: #251c24;
  --color-deep-pool-teal: #3c6e63;
  --color-deep-pool-teal-50: #e0fdf5;
  --color-deep-pool-teal-100: #d1f2e9;
  --color-deep-pool-teal-200: #b7ded4;
  --color-deep-pool-teal-300: #9ac7bc;
  --color-deep-pool-teal-400: #75a79b;
  --color-deep-pool-teal-500: #588a7e;
  --color-deep-pool-teal-600: #3c6e63;
  --color-deep-pool-teal-700: #2c584e;
  --color-deep-pool-teal-800: #1f453d;
  --color-deep-pool-teal-900: #15362f;
  --color-deep-pool-teal-950: #0a221d;
  --color-professor-plum: #3c303c;
  --color-professor-plum-50: #fbf2fa;
  --color-professor-plum-100: #f1e8f1;
  --color-professor-plum-200: #dfd3df;
  --color-professor-plum-300: #c9bcc9;
  --color-professor-plum-400: #ab9dab;
  --color-professor-plum-500: #908290;
  --color-professor-plum-600: #756875;
  --color-professor-plum-700: #5e525e;
  --color-professor-plum-800: #4b404a;
  --color-professor-plum-900: #3c303c;
  --color-professor-plum-950: #251e25;
  --color-bonsai: #728054;
  --color-bonsai-50: #eef7dc;
  --color-bonsai-100: #e1eccd;
  --color-bonsai-200: #cad7b2;
  --color-bonsai-300: #b1be95;
  --color-bonsai-400: #8f9d71;
  --color-bonsai-500: #728054;
  --color-bonsai-600: #5b683e;
  --color-bonsai-700: #47532e;
  --color-bonsai-800: #374121;
  --color-bonsai-900: #2b3317;
  --color-bonsai-950: #1a200c;
  --color-fennelly: #9a9d80;
  --color-fennelly-50: #f2f4e3;
  --color-fennelly-100: #e7e9d5;
  --color-fennelly-200: #d2d5bd;
  --color-fennelly-300: #babda3;
  --color-fennelly-400: #9a9d80;
  --color-fennelly-500: #808367;
  --color-fennelly-600: #676a4f;
  --color-fennelly-700: #52543c;
  --color-fennelly-800: #40422d;
  --color-fennelly-900: #323322;
  --color-fennelly-950: #1f2013;
}