Sweet Dreams to Paying Mantis Color Palette

About this palette

Sweet Dreams to Paying Mantis is a 5-color muted palette: #E6D3E3 (Sweet Dreams), #2A3E4B (Depths of the Nile), #B29D8E (Sombrero), #4B6779 (Silent Night), #739778 (Paying Mantis). It mixes gray, blue, green tones and feels cool overall. The strongest text pairing is #E6D3E3 on #2A3E4B with a contrast ratio of 7.83:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sweet Dreams	rgb(230, 211, 227)	hsl(309, 28%, 86%)
Depths of the Nile	rgb(42, 62, 75)	hsl(204, 28%, 23%)
Sombrero	rgb(178, 157, 142)	hsl(25, 19%, 63%)
Silent Night	rgb(75, 103, 121)	hsl(203, 23%, 38%)
Paying Mantis	rgb(115, 151, 120)	hsl(128, 15%, 52%)

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.83:1 Very good#E6D3E3 on #2A3E4B
Aa7.83:1 Very good#2A3E4B on #E6D3E3
Aa4.29:1 Poor#2A3E4B on #B29D8E
Aa4.29:1 Poor#B29D8E on #2A3E4B
Aa4.21:1 Poor#E6D3E3 on #4B6779
Aa4.21:1 Poor#4B6779 on #E6D3E3
Aa3.40:1 Poor#2A3E4B on #739778
Aa3.40:1 Poor#739778 on #2A3E4B

Color blindness preview

CSS variables

/* Sweet Dreams to Paying Mantis — https://swatchly.xyz/palette/e6d3e3-2a3e4b-b29d8e-4b6779-739778 */
:root {
  --sweet-dreams: #e6d3e3;
  --depths-of-the-nile: #2a3e4b;
  --sombrero: #b29d8e;
  --silent-night: #4b6779;
  --paying-mantis: #739778;
}

Tailwind CSS v4

/* Sweet Dreams to Paying Mantis — https://swatchly.xyz/palette/e6d3e3-2a3e4b-b29d8e-4b6779-739778 */
@theme {
  --color-sweet-dreams: #e6d3e3;
  --color-sweet-dreams-50: #fdf3fc;
  --color-sweet-dreams-100: #f5e9f3;
  --color-sweet-dreams-200: #e6d3e3;
  --color-sweet-dreams-300: #cdbdca;
  --color-sweet-dreams-400: #ae9dab;
  --color-sweet-dreams-500: #928190;
  --color-sweet-dreams-600: #776774;
  --color-sweet-dreams-700: #5f505d;
  --color-sweet-dreams-800: #4a3e49;
  --color-sweet-dreams-900: #3a2f38;
  --color-sweet-dreams-950: #241c23;
  --color-depths-of-the-nile: #2a3e4b;
  --color-depths-of-the-nile-50: #ebf7ff;
  --color-depths-of-the-nile-100: #dfeef8;
  --color-depths-of-the-nile-200: #c9dae6;
  --color-depths-of-the-nile-300: #afc3d0;
  --color-depths-of-the-nile-400: #8ca2b1;
  --color-depths-of-the-nile-500: #6f8694;
  --color-depths-of-the-nile-600: #556a78;
  --color-depths-of-the-nile-700: #3f525e;
  --color-depths-of-the-nile-800: #2a3e4b;
  --color-depths-of-the-nile-900: #222f38;
  --color-depths-of-the-nile-950: #131c22;
  --color-sombrero: #b29d8e;
  --color-sombrero-50: #fff3ea;
  --color-sombrero-100: #f6e8de;
  --color-sombrero-200: #e5d4c8;
  --color-sombrero-300: #d0bdb0;
  --color-sombrero-400: #b29d8e;
  --color-sombrero-500: #968273;
  --color-sombrero-600: #7b685a;
  --color-sombrero-700: #635145;
  --color-sombrero-800: #4e3f34;
  --color-sombrero-900: #3d3027;
  --color-sombrero-950: #261d17;
  --color-silent-night: #4b6779;
  --color-silent-night-50: #ebf7ff;
  --color-silent-night-100: #d9edfa;
  --color-silent-night-200: #c0d8e8;
  --color-silent-night-300: #a6c0d2;
  --color-silent-night-400: #83a0b3;
  --color-silent-night-500: #668396;
  --color-silent-night-600: #4b6779;
  --color-silent-night-700: #395261;
  --color-silent-night-800: #2b404d;
  --color-silent-night-900: #20313d;
  --color-silent-night-950: #121f27;
  --color-paying-mantis: #739778;
  --color-paying-mantis-50: #e8fdea;
  --color-paying-mantis-100: #def5e0;
  --color-paying-mantis-200: #c8e3cb;
  --color-paying-mantis-300: #b0cfb3;
  --color-paying-mantis-400: #8fb193;
  --color-paying-mantis-500: #739778;
  --color-paying-mantis-600: #587b5d;
  --color-paying-mantis-700: #426247;
  --color-paying-mantis-800: #314d35;
  --color-paying-mantis-900: #233b27;
  --color-paying-mantis-950: #142517;
}