Sweet Dreams to Batch Brew color palette

E4D2E6Sweet Dreams A2ADC3Lost in Time 78869CTempest 3E634DHerbes de Provence 3E3B2CBatch Brew

About this palette

Sweet Dreams to Batch Brew is a 5-color muted, gradient palette: #E4D2E6 (Sweet Dreams), #A2ADC3 (Lost in Time), #78869C (Tempest), #3E634D (Herbes de Provence), #3E3B2C (Batch Brew). It mixes gray, blue, green tones and feels cool overall. The strongest text pairing is #E4D2E6 on #3E3B2C with a contrast ratio of 7.85:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sweet Dreams	rgb(228, 210, 230)	hsl(294, 29%, 86%)
Lost in Time	rgb(162, 173, 195)	hsl(220, 22%, 70%)
Tempest	rgb(120, 134, 156)	hsl(217, 15%, 54%)
Herbes de Provence	rgb(62, 99, 77)	hsl(144, 23%, 32%)
Batch Brew	rgb(62, 59, 44)	hsl(50, 17%, 21%)

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.85:1 Very good#E4D2E6 on #3E3B2C
Aa7.85:1 Very good#3E3B2C on #E4D2E6
Aa4.98:1 Good#A2ADC3 on #3E3B2C
Aa4.98:1 Good#3E3B2C on #A2ADC3
Aa4.73:1 Good#E4D2E6 on #3E634D
Aa4.73:1 Good#3E634D on #E4D2E6
Aa3.05:1 Poor#78869C on #3E3B2C
Aa3.05:1 Poor#3E3B2C on #78869C

Color blindness preview

CSS variables

/* Sweet Dreams to Batch Brew — https://swatchly.xyz/palette/e4d2e6-a2adc3-78869c-3e634d-3e3b2c */
:root {
  --sweet-dreams: #e4d2e6;
  --lost-in-time: #a2adc3;
  --tempest: #78869c;
  --herbes-de-provence: #3e634d;
  --batch-brew: #3e3b2c;
}

Tailwind CSS v4

/* Sweet Dreams to Batch Brew — https://swatchly.xyz/palette/e4d2e6-a2adc3-78869c-3e634d-3e3b2c */
@theme {
  --color-sweet-dreams: #e4d2e6;
  --color-sweet-dreams-50: #fcf2fd;
  --color-sweet-dreams-100: #f3e8f4;
  --color-sweet-dreams-200: #e4d2e6;
  --color-sweet-dreams-300: #cbbccd;
  --color-sweet-dreams-400: #ac9cae;
  --color-sweet-dreams-500: #918093;
  --color-sweet-dreams-600: #766677;
  --color-sweet-dreams-700: #5e5060;
  --color-sweet-dreams-800: #4a3e4b;
  --color-sweet-dreams-900: #392f3a;
  --color-sweet-dreams-950: #241c25;
  --color-lost-in-time: #a2adc3;
  --color-lost-in-time-50: #f6f9ff;
  --color-lost-in-time-100: #ebf1ff;
  --color-lost-in-time-200: #d8e0f0;
  --color-lost-in-time-300: #c2cbdd;
  --color-lost-in-time-400: #a2adc3;
  --color-lost-in-time-500: #858fa4;
  --color-lost-in-time-600: #697387;
  --color-lost-in-time-700: #515a6d;
  --color-lost-in-time-800: #3e4656;
  --color-lost-in-time-900: #2e3442;
  --color-lost-in-time-950: #1b1f29;
  --color-tempest: #78869c;
  --color-tempest-50: #eff5ff;
  --color-tempest-100: #e2ecfb;
  --color-tempest-200: #ccd8ea;
  --color-tempest-300: #b4c1d5;
  --color-tempest-400: #94a2b7;
  --color-tempest-500: #78869c;
  --color-tempest-600: #5f6c81;
  --color-tempest-700: #495568;
  --color-tempest-800: #384253;
  --color-tempest-900: #2a3341;
  --color-tempest-950: #191f29;
  --color-herbes-de-provence: #3e634d;
  --color-herbes-de-provence-50: #e5fced;
  --color-herbes-de-provence-100: #d9f3e2;
  --color-herbes-de-provence-200: #c3e1ce;
  --color-herbes-de-provence-300: #aaccb7;
  --color-herbes-de-provence-400: #89ae97;
  --color-herbes-de-provence-500: #6d947c;
  --color-herbes-de-provence-600: #547963;
  --color-herbes-de-provence-700: #3e634d;
  --color-herbes-de-provence-800: #2f4e3b;
  --color-herbes-de-provence-900: #223c2d;
  --color-herbes-de-provence-950: #13261b;
  --color-batch-brew: #3e3b2c;
  --color-batch-brew-50: #f7f5eb;
  --color-batch-brew-100: #eeebe0;
  --color-batch-brew-200: #dad8ca;
  --color-batch-brew-300: #c3c0b0;
  --color-batch-brew-400: #a29f8e;
  --color-batch-brew-500: #868271;
  --color-batch-brew-600: #6a6757;
  --color-batch-brew-700: #524f41;
  --color-batch-brew-800: #3e3b2c;
  --color-batch-brew-900: #2f2d23;
  --color-batch-brew-950: #1c1b14;
}