Start generating

Thyme and Place to Rosy Brown color palette

6C8765Thyme and Place4E5A6BStorm Rising9BAC9BRooftop GardenE0C6C7Perfume Cloud2C3745Total EclipseB48C8ARosy Brown
Open in generator Export PNG, PDF, ASE…

About this palette

Thyme and Place to Rosy Brown is a 6-color muted palette: #6C8765 (Thyme and Place), #4E5A6B (Storm Rising), #9BAC9B (Rooftop Garden), #E0C6C7 (Perfume Cloud), #2C3745 (Total Eclipse), #B48C8A (Rosy Brown). It mixes green, gray, red tones and feels balanced overall. The strongest text pairing is #E0C6C7 on #2C3745 with a contrast ratio of 7.51:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Thyme and Placergb(108, 135, 101)hsl(108, 14%, 46%)
Storm Risingrgb(78, 90, 107)hsl(215, 16%, 36%)
Rooftop Gardenrgb(155, 172, 155)hsl(120, 9%, 64%)
Perfume Cloudrgb(224, 198, 199)hsl(358, 30%, 83%)
Total Eclipsergb(44, 55, 69)hsl(214, 22%, 22%)
Rosy Brownrgb(180, 140, 138)hsl(3, 22%, 62%)

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.51:1 Very good#E0C6C7 on #2C3745
  • Aa7.51:1 Very good#2C3745 on #E0C6C7
  • Aa5.04:1 Good#9BAC9B on #2C3745
  • Aa5.04:1 Good#2C3745 on #9BAC9B
  • Aa4.36:1 Poor#4E5A6B on #E0C6C7
  • Aa4.36:1 Poor#E0C6C7 on #4E5A6B
  • Aa4.06:1 Poor#2C3745 on #B48C8A
  • Aa4.06:1 Poor#B48C8A on #2C3745

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Thyme and Place to Rosy Brown — https://swatchly.xyz/palette/6c8765-4e5a6b-9bac9b-e0c6c7-2c3745-b48c8a */
:root {
  --thyme-and-place: #6c8765;
  --storm-rising: #4e5a6b;
  --rooftop-garden: #9bac9b;
  --perfume-cloud: #e0c6c7;
  --total-eclipse: #2c3745;
  --rosy-brown: #b48c8a;
}

Tailwind CSS v4

/* Thyme and Place to Rosy Brown — https://swatchly.xyz/palette/6c8765-4e5a6b-9bac9b-e0c6c7-2c3745-b48c8a */
@theme {
  --color-thyme-and-place: #6c8765;
  --color-thyme-and-place-50: #e9fae4;
  --color-thyme-and-place-100: #dcefd7;
  --color-thyme-and-place-200: #c4dbbe;
  --color-thyme-and-place-300: #aac4a4;
  --color-thyme-and-place-400: #88a481;
  --color-thyme-and-place-500: #6c8765;
  --color-thyme-and-place-600: #546e4e;
  --color-thyme-and-place-700: #41583b;
  --color-thyme-and-place-800: #31452c;
  --color-thyme-and-place-900: #253621;
  --color-thyme-and-place-950: #162213;
  --color-storm-rising: #4e5a6b;
  --color-storm-rising-50: #eff6ff;
  --color-storm-rising-100: #e3ecf9;
  --color-storm-rising-200: #cfd9e8;
  --color-storm-rising-300: #b8c3d4;
  --color-storm-rising-400: #98a5b7;
  --color-storm-rising-500: #7d8a9c;
  --color-storm-rising-600: #647082;
  --color-storm-rising-700: #4e5a6b;
  --color-storm-rising-800: #3c4654;
  --color-storm-rising-900: #2d3642;
  --color-storm-rising-950: #1b212a;
  --color-rooftop-garden: #9bac9b;
  --color-rooftop-garden-50: #f0faf0;
  --color-rooftop-garden-100: #e7f1e6;
  --color-rooftop-garden-200: #d2dfd2;
  --color-rooftop-garden-300: #bbcabb;
  --color-rooftop-garden-400: #9bac9b;
  --color-rooftop-garden-500: #7f8f7f;
  --color-rooftop-garden-600: #647464;
  --color-rooftop-garden-700: #4e5c4e;
  --color-rooftop-garden-800: #3b483b;
  --color-rooftop-garden-900: #2c372c;
  --color-rooftop-garden-950: #1a221a;
  --color-perfume-cloud: #e0c6c7;
  --color-perfume-cloud-50: #faeaea;
  --color-perfume-cloud-100: #f0dede;
  --color-perfume-cloud-200: #e0c6c7;
  --color-perfume-cloud-300: #c9b2b3;
  --color-perfume-cloud-400: #ac9495;
  --color-perfume-cloud-500: #927b7c;
  --color-perfume-cloud-600: #796263;
  --color-perfume-cloud-700: #624e4f;
  --color-perfume-cloud-800: #4f3d3e;
  --color-perfume-cloud-900: #3d2e2f;
  --color-perfume-cloud-950: #271c1d;
  --color-total-eclipse: #2c3745;
  --color-total-eclipse-50: #eff6ff;
  --color-total-eclipse-100: #e3ecf7;
  --color-total-eclipse-200: #ced9e6;
  --color-total-eclipse-300: #b6c2d1;
  --color-total-eclipse-400: #97a3b4;
  --color-total-eclipse-500: #7c8999;
  --color-total-eclipse-600: #636f7e;
  --color-total-eclipse-700: #4e5967;
  --color-total-eclipse-800: #3c4653;
  --color-total-eclipse-900: #2c3745;
  --color-total-eclipse-950: #1c222a;
  --color-rosy-brown: #b48c8a;
  --color-rosy-brown-50: #ffedeb;
  --color-rosy-brown-100: #fbdedc;
  --color-rosy-brown-200: #e9c7c5;
  --color-rosy-brown-300: #d3aeac;
  --color-rosy-brown-400: #b48c8a;
  --color-rosy-brown-500: #997371;
  --color-rosy-brown-600: #7f5b59;
  --color-rosy-brown-700: #674746;
  --color-rosy-brown-800: #533736;
  --color-rosy-brown-900: #422a29;
  --color-rosy-brown-950: #2b1a19;
}

Similar palettes