Shadow of Night to Sweet Dreams color palette

1F5163Shadow of Night A76647Hot Cacao 7AB39EBeau Monde 141F19Coco’s Black F1CDE2Sweet Dreams

About this palette

Shadow of Night to Sweet Dreams is a 5-color muted, vintage palette: #1F5163 (Shadow of Night), #A76647 (Hot Cacao), #7AB39E (Beau Monde), #141F19 (Coco’s Black), #F1CDE2 (Sweet Dreams). It mixes blue, brown, turquoise, gray, pink tones and feels balanced overall. The strongest text pairing is #141F19 on #F1CDE2 with a contrast ratio of 11.75:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Shadow of Night	rgb(31, 81, 99)	hsl(196, 52%, 25%)
Hot Cacao	rgb(167, 102, 71)	hsl(19, 40%, 47%)
Beau Monde	rgb(122, 179, 158)	hsl(158, 27%, 59%)
Coco’s Black	rgb(20, 31, 25)	hsl(147, 22%, 10%)
Sweet Dreams	rgb(241, 205, 226)	hsl(325, 56%, 87%)

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.75:1 Very good#141F19 on #F1CDE2
Aa11.75:1 Very good#F1CDE2 on #141F19
Aa7.07:1 Very good#7AB39E on #141F19
Aa7.07:1 Very good#141F19 on #7AB39E
Aa6.03:1 Good#1F5163 on #F1CDE2
Aa6.03:1 Good#F1CDE2 on #1F5163
Aa3.74:1 Poor#A76647 on #141F19
Aa3.74:1 Poor#141F19 on #A76647

Color blindness preview

CSS variables

/* Shadow of Night to Sweet Dreams — https://swatchly.xyz/palette/1f5163-a76647-7ab39e-141f19-f1cde2 */
:root {
  --shadow-of-night: #1f5163;
  --hot-cacao: #a76647;
  --beau-monde: #7ab39e;
  --coco-s-black: #141f19;
  --sweet-dreams: #f1cde2;
}

Tailwind CSS v4

/* Shadow of Night to Sweet Dreams — https://swatchly.xyz/palette/1f5163-a76647-7ab39e-141f19-f1cde2 */
@theme {
  --color-shadow-of-night: #1f5163;
  --color-shadow-of-night-50: #e8f8ff;
  --color-shadow-of-night-100: #d2f1fe;
  --color-shadow-of-night-200: #b9deee;
  --color-shadow-of-night-300: #9fcadc;
  --color-shadow-of-night-400: #7dadc0;
  --color-shadow-of-night-500: #6193a6;
  --color-shadow-of-night-600: #49798c;
  --color-shadow-of-night-700: #356375;
  --color-shadow-of-night-800: #1f5163;
  --color-shadow-of-night-900: #1a3e4c;
  --color-shadow-of-night-950: #0c2832;
  --color-hot-cacao: #a76647;
  --color-hot-cacao-50: #ffefe8;
  --color-hot-cacao-100: #ffded0;
  --color-hot-cacao-200: #fac2a8;
  --color-hot-cacao-300: #e6a78a;
  --color-hot-cacao-400: #c68464;
  --color-hot-cacao-500: #a76647;
  --color-hot-cacao-600: #8b4f32;
  --color-hot-cacao-700: #723d22;
  --color-hot-cacao-800: #5c2e16;
  --color-hot-cacao-900: #4a220e;
  --color-hot-cacao-950: #311406;
  --color-beau-monde: #7ab39e;
  --color-beau-monde-50: #e0fff2;
  --color-beau-monde-100: #d4f6e8;
  --color-beau-monde-200: #bbe5d5;
  --color-beau-monde-300: #a0d0be;
  --color-beau-monde-400: #7ab39e;
  --color-beau-monde-500: #5e9682;
  --color-beau-monde-600: #447b68;
  --color-beau-monde-700: #2f6251;
  --color-beau-monde-800: #1f4d3e;
  --color-beau-monde-900: #143b2f;
  --color-beau-monde-950: #09251c;
  --color-coco-s-black: #141f19;
  --color-coco-s-black-50: #eff7f3;
  --color-coco-s-black-100: #e5eee8;
  --color-coco-s-black-200: #d0dbd4;
  --color-coco-s-black-300: #b8c4bd;
  --color-coco-s-black-400: #98a59e;
  --color-coco-s-black-500: #7c8982;
  --color-coco-s-black-600: #616e67;
  --color-coco-s-black-700: #4b5750;
  --color-coco-s-black-800: #39433d;
  --color-coco-s-black-900: #2a322e;
  --color-coco-s-black-950: #141f19;
  --color-sweet-dreams: #f1cde2;
  --color-sweet-dreams-50: #fff2f9;
  --color-sweet-dreams-100: #fce5f2;
  --color-sweet-dreams-200: #f1cde2;
  --color-sweet-dreams-300: #d6b8ca;
  --color-sweet-dreams-400: #b897ab;
  --color-sweet-dreams-500: #9c7c8f;
  --color-sweet-dreams-600: #806174;
  --color-sweet-dreams-700: #674c5c;
  --color-sweet-dreams-800: #523a48;
  --color-sweet-dreams-900: #402c38;
  --color-sweet-dreams-950: #291a23;
}