Soft Blush to Dark Orchestra Color Palette

About this palette

Soft Blush to Dark Orchestra is a 5-color muted palette: #E0BBB7 (Soft Blush), #809AA2 (Lost at Sea), #43737C (Hydro), #34464C (Little Mermaid), #261D1B (Dark Orchestra). It mixes pink, gray, turquoise tones and feels balanced overall. The strongest text pairing is #E0BBB7 on #261D1B with a contrast ratio of 9.39:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Soft Blush	rgb(224, 187, 183)	hsl(6, 40%, 80%)
Lost at Sea	rgb(128, 154, 162)	hsl(194, 15%, 57%)
Hydro	rgb(67, 115, 124)	hsl(189, 30%, 37%)
Little Mermaid	rgb(52, 70, 76)	hsl(195, 19%, 25%)
Dark Orchestra	rgb(38, 29, 27)	hsl(11, 17%, 13%)

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.

Aa9.39:1 Very good#E0BBB7 on #261D1B
Aa9.39:1 Very good#261D1B on #E0BBB7
Aa5.63:1 Good#E0BBB7 on #34464C
Aa5.63:1 Good#34464C on #E0BBB7
Aa5.54:1 Good#809AA2 on #261D1B
Aa5.54:1 Good#261D1B on #809AA2
Aa3.32:1 Poor#809AA2 on #34464C
Aa3.32:1 Poor#34464C on #809AA2

Color blindness preview

CSS variables

/* Soft Blush to Dark Orchestra — https://swatchly.xyz/palette/e0bbb7-809aa2-43737c-34464c-261d1b */
:root {
  --soft-blush: #e0bbb7;
  --lost-at-sea: #809aa2;
  --hydro: #43737c;
  --little-mermaid: #34464c;
  --dark-orchestra: #261d1b;
}

Tailwind CSS v4

/* Soft Blush to Dark Orchestra — https://swatchly.xyz/palette/e0bbb7-809aa2-43737c-34464c-261d1b */
@theme {
  --color-soft-blush: #e0bbb7;
  --color-soft-blush-50: #fff5f3;
  --color-soft-blush-100: #ffe8e5;
  --color-soft-blush-200: #efd4d1;
  --color-soft-blush-300: #e0bbb7;
  --color-soft-blush-400: #be9c98;
  --color-soft-blush-500: #a17f7c;
  --color-soft-blush-600: #856461;
  --color-soft-blush-700: #6b4e4b;
  --color-soft-blush-800: #553c39;
  --color-soft-blush-900: #422d2a;
  --color-soft-blush-950: #2a1b19;
  --color-lost-at-sea: #809aa2;
  --color-lost-at-sea-50: #e4f4f9;
  --color-lost-at-sea-100: #d6e8ee;
  --color-lost-at-sea-200: #bed3da;
  --color-lost-at-sea-300: #a3bbc2;
  --color-lost-at-sea-400: #809aa2;
  --color-lost-at-sea-500: #688189;
  --color-lost-at-sea-600: #516970;
  --color-lost-at-sea-700: #3e545a;
  --color-lost-at-sea-800: #2f4248;
  --color-lost-at-sea-900: #243439;
  --color-lost-at-sea-950: #162125;
  --color-hydro: #43737c;
  --color-hydro-50: #e2faff;
  --color-hydro-100: #d2f2f8;
  --color-hydro-200: #badfe6;
  --color-hydro-300: #9ec9d1;
  --color-hydro-400: #7baab3;
  --color-hydro-500: #5e8e97;
  --color-hydro-600: #43737c;
  --color-hydro-700: #305c64;
  --color-hydro-800: #22484f;
  --color-hydro-900: #17383e;
  --color-hydro-950: #0b2327;
  --color-little-mermaid: #34464c;
  --color-little-mermaid-50: #ecf8fc;
  --color-little-mermaid-100: #e1eef2;
  --color-little-mermaid-200: #cbdbe0;
  --color-little-mermaid-300: #b3c5cb;
  --color-little-mermaid-400: #92a5ac;
  --color-little-mermaid-500: #768a91;
  --color-little-mermaid-600: #5d7076;
  --color-little-mermaid-700: #48595f;
  --color-little-mermaid-800: #34464c;
  --color-little-mermaid-900: #29353a;
  --color-little-mermaid-950: #182124;
  --color-dark-orchestra: #261d1b;
  --color-dark-orchestra-50: #faf3f2;
  --color-dark-orchestra-100: #f1e9e7;
  --color-dark-orchestra-200: #ded5d3;
  --color-dark-orchestra-300: #c9bebc;
  --color-dark-orchestra-400: #aa9f9c;
  --color-dark-orchestra-500: #8f8381;
  --color-dark-orchestra-600: #746967;
  --color-dark-orchestra-700: #5d5351;
  --color-dark-orchestra-800: #49403e;
  --color-dark-orchestra-900: #38312f;
  --color-dark-orchestra-950: #261d1b;
}