Plantation to Pastel Smirk color palette

465848Plantation 6A8C76Thyme and Place 2C372CAztec 9FBCA7Salvia E2EDE4Pastel Smirk

About this palette

Plantation to Pastel Smirk is a 5-color muted palette: #465848 (Plantation), #6A8C76 (Thyme and Place), #2C372C (Aztec), #9FBCA7 (Salvia), #E2EDE4 (Pastel Smirk). It mixes gray, green, white tones and feels cool overall. The strongest text pairing is #2C372C on #E2EDE4 with a contrast ratio of 10.34:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Plantation	rgb(70, 88, 72)	hsl(127, 11%, 31%)
Thyme and Place	rgb(106, 140, 118)	hsl(141, 14%, 48%)
Aztec	rgb(44, 55, 44)	hsl(120, 11%, 19%)
Salvia	rgb(159, 188, 167)	hsl(137, 18%, 68%)
Pastel Smirk	rgb(226, 237, 228)	hsl(131, 23%, 91%)

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.34:1 Very good#2C372C on #E2EDE4
Aa10.34:1 Very good#E2EDE4 on #2C372C
Aa6.35:1 Good#465848 on #E2EDE4
Aa6.35:1 Good#E2EDE4 on #465848
Aa6.05:1 Good#2C372C on #9FBCA7
Aa6.05:1 Good#9FBCA7 on #2C372C
Aa3.72:1 Poor#465848 on #9FBCA7
Aa3.72:1 Poor#9FBCA7 on #465848

Color blindness preview

CSS variables

/* Plantation to Pastel Smirk — https://swatchly.xyz/palette/465848-6a8c76-2c372c-9fbca7-e2ede4 */
:root {
  --plantation: #465848;
  --thyme-and-place: #6a8c76;
  --aztec: #2c372c;
  --salvia: #9fbca7;
  --pastel-smirk: #e2ede4;
}

Tailwind CSS v4

/* Plantation to Pastel Smirk — https://swatchly.xyz/palette/465848-6a8c76-2c372c-9fbca7-e2ede4 */
@theme {
  --color-plantation: #465848;
  --color-plantation-50: #edf9ee;
  --color-plantation-100: #e2efe3;
  --color-plantation-200: #ccdcce;
  --color-plantation-300: #b4c5b5;
  --color-plantation-400: #93a695;
  --color-plantation-500: #778a79;
  --color-plantation-600: #5d6f5f;
  --color-plantation-700: #465848;
  --color-plantation-800: #364538;
  --color-plantation-900: #29352a;
  --color-plantation-950: #182119;
  --color-thyme-and-place: #6a8c76;
  --color-thyme-and-place-50: #e6fbed;
  --color-thyme-and-place-100: #daf1e1;
  --color-thyme-and-place-200: #c2ddcb;
  --color-thyme-and-place-300: #a8c7b3;
  --color-thyme-and-place-400: #86a892;
  --color-thyme-and-place-500: #6a8c76;
  --color-thyme-and-place-600: #51725d;
  --color-thyme-and-place-700: #3e5b48;
  --color-thyme-and-place-800: #2e4837;
  --color-thyme-and-place-900: #22382a;
  --color-thyme-and-place-950: #132319;
  --color-aztec: #2c372c;
  --color-aztec-50: #f0f8f0;
  --color-aztec-100: #e5eee5;
  --color-aztec-200: #d1dbd0;
  --color-aztec-300: #b9c5b9;
  --color-aztec-400: #99a699;
  --color-aztec-500: #7e8b7e;
  --color-aztec-600: #647064;
  --color-aztec-700: #4e594e;
  --color-aztec-800: #3c463c;
  --color-aztec-900: #2c372c;
  --color-aztec-950: #1c221c;
  --color-salvia: #9fbca7;
  --color-salvia-50: #e2f4e6;
  --color-salvia-100: #d4e8d9;
  --color-salvia-200: #bbd3c2;
  --color-salvia-300: #9fbca7;
  --color-salvia-400: #839f8b;
  --color-salvia-500: #6a8672;
  --color-salvia-600: #536d5b;
  --color-salvia-700: #405847;
  --color-salvia-800: #324638;
  --color-salvia-900: #26382b;
  --color-salvia-950: #16231a;
  --color-pastel-smirk: #e2ede4;
  --color-pastel-smirk-50: #f0f6f1;
  --color-pastel-smirk-100: #e2ede4;
  --color-pastel-smirk-200: #d1d9d2;
  --color-pastel-smirk-300: #bac3bb;
  --color-pastel-smirk-400: #9aa49c;
  --color-pastel-smirk-500: #7f8981;
  --color-pastel-smirk-600: #656e67;
  --color-pastel-smirk-700: #4f5851;
  --color-pastel-smirk-800: #3d453f;
  --color-pastel-smirk-900: #2e3530;
  --color-pastel-smirk-950: #1c211d;
}