Hot Chocolate to Crystal color palette

5F3C43Hot Chocolate 5A5538Olive Bark 4E8D88Highlands 6C6F52Herbal Whispers A9A9C3Lost in Time ADD8D5Crystal

Open in generator Export PNG, PDF, ASE…

About this palette

Hot Chocolate to Crystal is a 6-color muted, vintage palette: #5F3C43 (Hot Chocolate), #5A5538 (Olive Bark), #4E8D88 (Highlands), #6C6F52 (Herbal Whispers), #A9A9C3 (Lost in Time), #ADD8D5 (Crystal). It mixes red, brown, turquoise, green, purple tones and feels balanced overall. The strongest text pairing is #5F3C43 on #ADD8D5 with a contrast ratio of 6.12:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hot Chocolate	rgb(95, 60, 67)	hsl(348, 23%, 30%)
Olive Bark	rgb(90, 85, 56)	hsl(51, 23%, 29%)
Highlands	rgb(78, 141, 136)	hsl(175, 29%, 43%)
Herbal Whispers	rgb(108, 111, 82)	hsl(66, 15%, 38%)
Lost in Time	rgb(169, 169, 195)	hsl(240, 18%, 71%)
Crystal	rgb(173, 216, 213)	hsl(176, 36%, 76%)

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.

Aa6.12:1 Good#5F3C43 on #ADD8D5
Aa6.12:1 Good#ADD8D5 on #5F3C43
Aa4.86:1 Good#5A5538 on #ADD8D5
Aa4.86:1 Good#ADD8D5 on #5A5538
Aa4.13:1 Poor#5F3C43 on #A9A9C3
Aa4.13:1 Poor#A9A9C3 on #5F3C43
Aa3.36:1 Poor#6C6F52 on #ADD8D5
Aa3.36:1 Poor#ADD8D5 on #6C6F52

Color blindness preview

CSS variables

/* Hot Chocolate to Crystal — https://swatchly.xyz/palette/5f3c43-5a5538-4e8d88-6c6f52-a9a9c3-add8d5 */
:root {
  --hot-chocolate: #5f3c43;
  --olive-bark: #5a5538;
  --highlands: #4e8d88;
  --herbal-whispers: #6c6f52;
  --lost-in-time: #a9a9c3;
  --crystal: #add8d5;
}

Tailwind CSS v4

/* Hot Chocolate to Crystal — https://swatchly.xyz/palette/5f3c43-5a5538-4e8d88-6c6f52-a9a9c3-add8d5 */
@theme {
  --color-hot-chocolate: #5f3c43;
  --color-hot-chocolate-50: #fff1f3;
  --color-hot-chocolate-100: #ffe3e8;
  --color-hot-chocolate-200: #eeced3;
  --color-hot-chocolate-300: #dcb7bd;
  --color-hot-chocolate-400: #bf989e;
  --color-hot-chocolate-500: #a47d84;
  --color-hot-chocolate-600: #89646b;
  --color-hot-chocolate-700: #714f55;
  --color-hot-chocolate-800: #5f3c43;
  --color-hot-chocolate-900: #482f34;
  --color-hot-chocolate-950: #2f1c20;
  --color-olive-bark: #5a5538;
  --color-olive-bark-50: #f9f6e3;
  --color-olive-bark-100: #efecd7;
  --color-olive-bark-200: #dcd8c0;
  --color-olive-bark-300: #c6c2a6;
  --color-olive-bark-400: #a7a284;
  --color-olive-bark-500: #8c8668;
  --color-olive-bark-600: #716c4f;
  --color-olive-bark-700: #5a5538;
  --color-olive-bark-800: #46422b;
  --color-olive-bark-900: #36331f;
  --color-olive-bark-950: #221f11;
  --color-highlands: #4e8d88;
  --color-highlands-50: #d9fdf9;
  --color-highlands-100: #cbf2ee;
  --color-highlands-200: #afdfdb;
  --color-highlands-300: #92c9c4;
  --color-highlands-400: #6ca9a4;
  --color-highlands-500: #4e8d88;
  --color-highlands-600: #35736e;
  --color-highlands-700: #235c58;
  --color-highlands-800: #154945;
  --color-highlands-900: #0b3936;
  --color-highlands-950: #042422;
  --color-herbal-whispers: #6c6f52;
  --color-herbal-whispers-50: #f5f7e5;
  --color-herbal-whispers-100: #ebedd9;
  --color-herbal-whispers-200: #d7dac2;
  --color-herbal-whispers-300: #c1c4a9;
  --color-herbal-whispers-400: #a2a587;
  --color-herbal-whispers-500: #868a6c;
  --color-herbal-whispers-600: #6c6f52;
  --color-herbal-whispers-700: #55583e;
  --color-herbal-whispers-800: #43452e;
  --color-herbal-whispers-900: #333522;
  --color-herbal-whispers-950: #1f2113;
  --color-lost-in-time: #a9a9c3;
  --color-lost-in-time-50: #f8f8ff;
  --color-lost-in-time-100: #efefff;
  --color-lost-in-time-200: #ddddf0;
  --color-lost-in-time-300: #c7c7dd;
  --color-lost-in-time-400: #a9a9c3;
  --color-lost-in-time-500: #8c8ca5;
  --color-lost-in-time-600: #706f87;
  --color-lost-in-time-700: #58576d;
  --color-lost-in-time-800: #434356;
  --color-lost-in-time-900: #333242;
  --color-lost-in-time-950: #1e1e29;
  --color-crystal: #add8d5;
  --color-crystal-50: #dbf5f3;
  --color-crystal-100: #cdeae8;
  --color-crystal-200: #add8d5;
  --color-crystal-300: #9dc2bf;
  --color-crystal-400: #7ca5a2;
  --color-crystal-500: #628b88;
  --color-crystal-600: #4a716f;
  --color-crystal-700: #385b59;
  --color-crystal-800: #294947;
  --color-crystal-900: #1d3837;
  --color-crystal-950: #102322;
}