Start generating

Chocolate Temptation to Water color palette

956D5BChocolate TemptationA690B3Wizard’s Brew445C47Muddy OliveA9C7D5Cloudy Valley3D2F3CVoodooD8F1FFWater
Open in generator Export PNG, PDF, ASE…

About this palette

Chocolate Temptation to Water is a 6-color muted palette: #956D5B (Chocolate Temptation), #A690B3 (Wizard’s Brew), #445C47 (Muddy Olive), #A9C7D5 (Cloudy Valley), #3D2F3C (Voodoo), #D8F1FF (Water). It mixes brown, purple, green, blue, gray, white tones and feels cool overall. The strongest text pairing is #3D2F3C on #D8F1FF with a contrast ratio of 10.74:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Chocolate Temptationrgb(149, 109, 91)hsl(19, 24%, 47%)
Wizard’s Brewrgb(166, 144, 179)hsl(278, 19%, 63%)
Muddy Olivergb(68, 92, 71)hsl(128, 15%, 31%)
Cloudy Valleyrgb(169, 199, 213)hsl(199, 34%, 75%)
Voodoorgb(61, 47, 60)hsl(304, 13%, 21%)
Waterrgb(216, 241, 255)hsl(202, 100%, 92%)

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.74:1 Very good#3D2F3C on #D8F1FF
  • Aa10.74:1 Very good#D8F1FF on #3D2F3C
  • Aa7.07:1 Very good#A9C7D5 on #3D2F3C
  • Aa7.07:1 Very good#3D2F3C on #A9C7D5
  • Aa6.26:1 Good#445C47 on #D8F1FF
  • Aa6.26:1 Good#D8F1FF on #445C47
  • Aa4.35:1 Poor#A690B3 on #3D2F3C
  • Aa4.35:1 Poor#3D2F3C on #A690B3

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Chocolate Temptation to Water — https://swatchly.xyz/palette/956d5b-a690b3-445c47-a9c7d5-3d2f3c-d8f1ff */
:root {
  --chocolate-temptation: #956d5b;
  --wizard-s-brew: #a690b3;
  --muddy-olive: #445c47;
  --cloudy-valley: #a9c7d5;
  --voodoo: #3d2f3c;
  --water: #d8f1ff;
}

Tailwind CSS v4

/* Chocolate Temptation to Water — https://swatchly.xyz/palette/956d5b-a690b3-445c47-a9c7d5-3d2f3c-d8f1ff */
@theme {
  --color-chocolate-temptation: #956d5b;
  --color-chocolate-temptation-50: #fff2ec;
  --color-chocolate-temptation-100: #ffe8de;
  --color-chocolate-temptation-200: #f5d4c6;
  --color-chocolate-temptation-300: #e3beae;
  --color-chocolate-temptation-400: #c8a08e;
  --color-chocolate-temptation-500: #af8673;
  --color-chocolate-temptation-600: #956d5b;
  --color-chocolate-temptation-700: #795544;
  --color-chocolate-temptation-800: #614132;
  --color-chocolate-temptation-900: #4c3024;
  --color-chocolate-temptation-950: #311d14;
  --color-wizard-s-brew: #a690b3;
  --color-wizard-s-brew-50: #f8eeff;
  --color-wizard-s-brew-100: #f0e0f9;
  --color-wizard-s-brew-200: #dccae7;
  --color-wizard-s-brew-300: #c5b1d1;
  --color-wizard-s-brew-400: #a690b3;
  --color-wizard-s-brew-500: #8c7698;
  --color-wizard-s-brew-600: #725e7e;
  --color-wizard-s-brew-700: #5c4a66;
  --color-wizard-s-brew-800: #493952;
  --color-wizard-s-brew-900: #392c41;
  --color-wizard-s-brew-950: #251b2a;
  --color-muddy-olive: #445c47;
  --color-muddy-olive-50: #ebfaec;
  --color-muddy-olive-100: #dff1e1;
  --color-muddy-olive-200: #c9decb;
  --color-muddy-olive-300: #b1c8b3;
  --color-muddy-olive-400: #90a993;
  --color-muddy-olive-500: #748e77;
  --color-muddy-olive-600: #5a735d;
  --color-muddy-olive-700: #445c47;
  --color-muddy-olive-800: #344837;
  --color-muddy-olive-900: #273729;
  --color-muddy-olive-950: #172318;
  --color-cloudy-valley: #a9c7d5;
  --color-cloudy-valley-50: #eaf8ff;
  --color-cloudy-valley-100: #dceff8;
  --color-cloudy-valley-200: #c6dce7;
  --color-cloudy-valley-300: #a9c7d5;
  --color-cloudy-valley-400: #8ba7b4;
  --color-cloudy-valley-500: #6f8c99;
  --color-cloudy-valley-600: #56717d;
  --color-cloudy-valley-700: #415a65;
  --color-cloudy-valley-800: #304650;
  --color-cloudy-valley-900: #23363e;
  --color-cloudy-valley-950: #142127;
  --color-voodoo: #3d2f3c;
  --color-voodoo-50: #fcf1fb;
  --color-voodoo-100: #f2e7f1;
  --color-voodoo-200: #e0d3df;
  --color-voodoo-300: #cbbbc9;
  --color-voodoo-400: #ac9cab;
  --color-voodoo-500: #918190;
  --color-voodoo-600: #776775;
  --color-voodoo-700: #5f515e;
  --color-voodoo-800: #4b3f4a;
  --color-voodoo-900: #3d2f3c;
  --color-voodoo-950: #251e25;
  --color-water: #d8f1ff;
  --color-water-50: #edf8ff;
  --color-water-100: #d8f1ff;
  --color-water-200: #cadce6;
  --color-water-300: #b1c5d1;
  --color-water-400: #90a6b3;
  --color-water-500: #748a97;
  --color-water-600: #5a707c;
  --color-water-700: #455963;
  --color-water-800: #34454f;
  --color-water-900: #27353d;
  --color-water-950: #162127;
}

Similar palettes