Sweet Dreams to Horizon Color Palette

About this palette

Sweet Dreams to Horizon is a 5-color muted, cool palette: #E4D0E5 (Sweet Dreams), #4B3832 (Film Noir), #634B61 (Grape Fizz), #A0C3AC (Meadow Morn), #5E8F98 (Horizon). It mixes pink, gray, purple, green, turquoise tones and feels cool overall. The strongest text pairing is #E4D0E5 on #4B3832 with a contrast ratio of 7.56:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sweet Dreams	rgb(228, 208, 229)	hsl(297, 29%, 86%)
Film Noir	rgb(75, 56, 50)	hsl(14, 20%, 25%)
Grape Fizz	rgb(99, 75, 97)	hsl(305, 14%, 34%)
Meadow Morn	rgb(160, 195, 172)	hsl(141, 23%, 70%)
Horizon	rgb(94, 143, 152)	hsl(189, 24%, 48%)

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.56:1 Very good#E4D0E5 on #4B3832
Aa7.56:1 Very good#4B3832 on #E4D0E5
Aa5.70:1 Good#4B3832 on #A0C3AC
Aa5.70:1 Good#A0C3AC on #4B3832
Aa5.33:1 Good#E4D0E5 on #634B61
Aa5.33:1 Good#634B61 on #E4D0E5
Aa4.02:1 Poor#634B61 on #A0C3AC
Aa4.02:1 Poor#A0C3AC on #634B61

Color blindness preview

CSS variables

/* Sweet Dreams to Horizon — https://swatchly.xyz/palette/e4d0e5-4b3832-634b61-a0c3ac-5e8f98 */
:root {
  --sweet-dreams: #e4d0e5;
  --film-noir: #4b3832;
  --grape-fizz: #634b61;
  --meadow-morn: #a0c3ac;
  --horizon: #5e8f98;
}

Tailwind CSS v4

/* Sweet Dreams to Horizon — https://swatchly.xyz/palette/e4d0e5-4b3832-634b61-a0c3ac-5e8f98 */
@theme {
  --color-sweet-dreams: #e4d0e5;
  --color-sweet-dreams-50: #fcf1fd;
  --color-sweet-dreams-100: #f3e6f4;
  --color-sweet-dreams-200: #e4d0e5;
  --color-sweet-dreams-300: #cbbbcc;
  --color-sweet-dreams-400: #ad9bae;
  --color-sweet-dreams-500: #917f92;
  --color-sweet-dreams-600: #766577;
  --color-sweet-dreams-700: #5f4f60;
  --color-sweet-dreams-800: #4b3d4b;
  --color-sweet-dreams-900: #3a2e3a;
  --color-sweet-dreams-950: #241c25;
  --color-film-noir: #4b3832;
  --color-film-noir-50: #fff2ee;
  --color-film-noir-100: #f7e7e3;
  --color-film-noir-200: #e5d3cd;
  --color-film-noir-300: #cfbbb4;
  --color-film-noir-400: #b09a93;
  --color-film-noir-500: #947e77;
  --color-film-noir-600: #77635c;
  --color-film-noir-700: #5e4c46;
  --color-film-noir-800: #4b3832;
  --color-film-noir-900: #382b27;
  --color-film-noir-950: #231a17;
  --color-grape-fizz: #634b61;
  --color-grape-fizz-50: #fff0fd;
  --color-grape-fizz-100: #f7e5f5;
  --color-grape-fizz-200: #e5d0e3;
  --color-grape-fizz-300: #d0b8cd;
  --color-grape-fizz-400: #b197af;
  --color-grape-fizz-500: #967c93;
  --color-grape-fizz-600: #7a6278;
  --color-grape-fizz-700: #634b61;
  --color-grape-fizz-800: #4d3a4c;
  --color-grape-fizz-900: #3c2c3b;
  --color-grape-fizz-950: #261a25;
  --color-meadow-morn: #a0c3ac;
  --color-meadow-morn-50: #e2f7e9;
  --color-meadow-morn-100: #d5eddd;
  --color-meadow-morn-200: #bdd9c6;
  --color-meadow-morn-300: #a0c3ac;
  --color-meadow-morn-400: #83a58f;
  --color-meadow-morn-500: #698a75;
  --color-meadow-morn-600: #51715d;
  --color-meadow-morn-700: #3e5b49;
  --color-meadow-morn-800: #2f4838;
  --color-meadow-morn-900: #23392b;
  --color-meadow-morn-950: #14231a;
  --color-horizon: #5e8f98;
  --color-horizon-50: #e2faff;
  --color-horizon-100: #d2f2f8;
  --color-horizon-200: #badfe6;
  --color-horizon-300: #9fc9d1;
  --color-horizon-400: #7baab3;
  --color-horizon-500: #5e8f98;
  --color-horizon-600: #45747d;
  --color-horizon-700: #315d65;
  --color-horizon-800: #224950;
  --color-horizon-900: #17383e;
  --color-horizon-950: #0b2327;
}