Sweet Dreams to Bitter Liquorice Color Palette

About this palette

Sweet Dreams to Bitter Liquorice is a 4-color muted palette: #E5D1EB (Sweet Dreams), #526769 (Silent Night), #C29FA2 (Coca Mocha), #21291A (Bitter Liquorice). It mixes purple, gray, red tones and feels balanced overall. The strongest text pairing is #E5D1EB on #21291A with a contrast ratio of 10.49:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sweet Dreams	rgb(229, 209, 235)	hsl(286, 39%, 87%)
Silent Night	rgb(82, 103, 105)	hsl(185, 12%, 37%)
Coca Mocha	rgb(194, 159, 162)	hsl(355, 22%, 69%)
Bitter Liquorice	rgb(33, 41, 26)	hsl(92, 22%, 13%)

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.49:1 Very good#E5D1EB on #21291A
Aa10.49:1 Very good#21291A on #E5D1EB
Aa6.28:1 Good#C29FA2 on #21291A
Aa6.28:1 Good#21291A on #C29FA2
Aa4.18:1 Poor#E5D1EB on #526769
Aa4.18:1 Poor#526769 on #E5D1EB

Color blindness preview

CSS variables

/* Sweet Dreams to Bitter Liquorice — https://swatchly.xyz/palette/e5d1eb-526769-c29fa2-21291a */
:root {
  --sweet-dreams: #e5d1eb;
  --silent-night: #526769;
  --coca-mocha: #c29fa2;
  --bitter-liquorice: #21291a;
}

Tailwind CSS v4

/* Sweet Dreams to Bitter Liquorice — https://swatchly.xyz/palette/e5d1eb-526769-c29fa2-21291a */
@theme {
  --color-sweet-dreams: #e5d1eb;
  --color-sweet-dreams-50: #fcf2ff;
  --color-sweet-dreams-100: #f4e8f8;
  --color-sweet-dreams-200: #e5d1eb;
  --color-sweet-dreams-300: #ccbbd1;
  --color-sweet-dreams-400: #ad9bb3;
  --color-sweet-dreams-500: #927f97;
  --color-sweet-dreams-600: #76657c;
  --color-sweet-dreams-700: #5f4f63;
  --color-sweet-dreams-800: #4a3d4e;
  --color-sweet-dreams-900: #3a2e3d;
  --color-sweet-dreams-950: #241c27;
  --color-silent-night: #526769;
  --color-silent-night-50: #ebf8f9;
  --color-silent-night-100: #deedee;
  --color-silent-night-200: #c6d8da;
  --color-silent-night-300: #acc0c2;
  --color-silent-night-400: #8aa0a2;
  --color-silent-night-500: #6d8385;
  --color-silent-night-600: #526769;
  --color-silent-night-700: #405253;
  --color-silent-night-800: #304041;
  --color-silent-night-900: #243233;
  --color-silent-night-950: #151f20;
  --color-coca-mocha: #c29fa2;
  --color-coca-mocha-50: #fff5f6;
  --color-coca-mocha-100: #ffe9eb;
  --color-coca-mocha-200: #f0d5d7;
  --color-coca-mocha-300: #ddbfc1;
  --color-coca-mocha-400: #c29fa2;
  --color-coca-mocha-500: #a48285;
  --color-coca-mocha-600: #87676a;
  --color-coca-mocha-700: #6d5053;
  --color-coca-mocha-800: #563d3f;
  --color-coca-mocha-900: #422d2f;
  --color-coca-mocha-950: #291b1c;
  --color-bitter-liquorice: #21291a;
  --color-bitter-liquorice-50: #f1f8ec;
  --color-bitter-liquorice-100: #e7eee1;
  --color-bitter-liquorice-200: #d3dbcc;
  --color-bitter-liquorice-300: #bbc4b4;
  --color-bitter-liquorice-400: #9ba593;
  --color-bitter-liquorice-500: #818b79;
  --color-bitter-liquorice-600: #697261;
  --color-bitter-liquorice-700: #545d4d;
  --color-bitter-liquorice-800: #434a3c;
  --color-bitter-liquorice-900: #353b2f;
  --color-bitter-liquorice-950: #21291a;
}