Satin Deep Black to Sweet Dreams Color Palette

About this palette

Satin Deep Black to Sweet Dreams is a 4-color muted, gradient palette: #141F1F (Satin Deep Black), #5D5039 (Volcanic Island), #91869A (Hatoba Pigeon), #E6CEE6 (Sweet Dreams). It mixes gray, brown, pink tones and feels balanced overall. The strongest text pairing is #141F1F on #E6CEE6 with a contrast ratio of 11.51:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Satin Deep Black	rgb(20, 31, 31)	hsl(180, 22%, 10%)
Volcanic Island	rgb(93, 80, 57)	hsl(38, 24%, 29%)
Hatoba Pigeon	rgb(145, 134, 154)	hsl(273, 9%, 56%)
Sweet Dreams	rgb(230, 206, 230)	hsl(300, 32%, 85%)

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.

Aa11.51:1 Very good#141F1F on #E6CEE6
Aa11.51:1 Very good#E6CEE6 on #141F1F
Aa5.37:1 Good#5D5039 on #E6CEE6
Aa5.37:1 Good#E6CEE6 on #5D5039
Aa4.88:1 Good#141F1F on #91869A
Aa4.88:1 Good#91869A on #141F1F

Color blindness preview

CSS variables

/* Satin Deep Black to Sweet Dreams — https://swatchly.xyz/palette/141f1f-5d5039-91869a-e6cee6 */
:root {
  --satin-deep-black: #141f1f;
  --volcanic-island: #5d5039;
  --hatoba-pigeon: #91869a;
  --sweet-dreams: #e6cee6;
}

Tailwind CSS v4

/* Satin Deep Black to Sweet Dreams — https://swatchly.xyz/palette/141f1f-5d5039-91869a-e6cee6 */
@theme {
  --color-satin-deep-black: #141f1f;
  --color-satin-deep-black-50: #eff7f7;
  --color-satin-deep-black-100: #e4eded;
  --color-satin-deep-black-200: #cfdada;
  --color-satin-deep-black-300: #b8c4c4;
  --color-satin-deep-black-400: #97a5a4;
  --color-satin-deep-black-500: #7b8989;
  --color-satin-deep-black-600: #616e6e;
  --color-satin-deep-black-700: #4b5656;
  --color-satin-deep-black-800: #394343;
  --color-satin-deep-black-900: #2a3232;
  --color-satin-deep-black-950: #141f1f;
  --color-volcanic-island: #5d5039;
  --color-volcanic-island-50: #fdf4e5;
  --color-volcanic-island-100: #f4ead9;
  --color-volcanic-island-200: #e1d5c2;
  --color-volcanic-island-300: #cbbea8;
  --color-volcanic-island-400: #ac9e85;
  --color-volcanic-island-500: #908269;
  --color-volcanic-island-600: #746750;
  --color-volcanic-island-700: #5d5039;
  --color-volcanic-island-800: #483e2c;
  --color-volcanic-island-900: #382f20;
  --color-volcanic-island-950: #231d12;
  --color-hatoba-pigeon: #91869a;
  --color-hatoba-pigeon-50: #faf3ff;
  --color-hatoba-pigeon-100: #f1eaf7;
  --color-hatoba-pigeon-200: #dfd6e6;
  --color-hatoba-pigeon-300: #cac0d2;
  --color-hatoba-pigeon-400: #aca1b4;
  --color-hatoba-pigeon-500: #91869a;
  --color-hatoba-pigeon-600: #756b7e;
  --color-hatoba-pigeon-700: #5d5465;
  --color-hatoba-pigeon-800: #494150;
  --color-hatoba-pigeon-900: #38313e;
  --color-hatoba-pigeon-950: #231e27;
  --color-sweet-dreams: #e6cee6;
  --color-sweet-dreams-50: #fdf0fd;
  --color-sweet-dreams-100: #f4e5f4;
  --color-sweet-dreams-200: #e6cee6;
  --color-sweet-dreams-300: #cdb9cd;
  --color-sweet-dreams-400: #af99af;
  --color-sweet-dreams-500: #947e94;
  --color-sweet-dreams-600: #786479;
  --color-sweet-dreams-700: #614e61;
  --color-sweet-dreams-800: #4c3c4c;
  --color-sweet-dreams-900: #3b2d3b;
  --color-sweet-dreams-950: #251b25;
}