Homoeopathic Red to Twilight Zone color palette

F0DBDEHomoeopathic Red D9B5B5Sakura 789DC0Sailing 4F6D93Queen Blue 3C4735Palm Leaf 161A15Twilight Zone

Open in generator Export PNG, PDF, ASE…

About this palette

Homoeopathic Red to Twilight Zone is a 6-color muted palette: #F0DBDE (Homoeopathic Red), #D9B5B5 (Sakura), #789DC0 (Sailing), #4F6D93 (Queen Blue), #3C4735 (Palm Leaf), #161A15 (Twilight Zone). It mixes gray, pink, blue, black tones and feels cool overall. The strongest text pairing is #F0DBDE on #161A15 with a contrast ratio of 13.32:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Homoeopathic Red	rgb(240, 219, 222)	hsl(351, 41%, 90%)
Sakura	rgb(217, 181, 181)	hsl(0, 32%, 78%)
Sailing	rgb(120, 157, 192)	hsl(209, 36%, 61%)
Queen Blue	rgb(79, 109, 147)	hsl(214, 30%, 44%)
Palm Leaf	rgb(60, 71, 53)	hsl(97, 15%, 24%)
Twilight Zone	rgb(22, 26, 21)	hsl(108, 11%, 9%)

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.

Aa13.32:1 Super#F0DBDE on #161A15
Aa13.32:1 Super#161A15 on #F0DBDE
Aa9.41:1 Very good#D9B5B5 on #161A15
Aa9.41:1 Very good#161A15 on #D9B5B5
Aa7.41:1 Very good#F0DBDE on #3C4735
Aa7.41:1 Very good#3C4735 on #F0DBDE
Aa6.19:1 Good#789DC0 on #161A15
Aa6.19:1 Good#161A15 on #789DC0

Color blindness preview

CSS variables

/* Homoeopathic Red to Twilight Zone — https://swatchly.xyz/palette/f0dbde-d9b5b5-789dc0-4f6d93-3c4735-161a15 */
:root {
  --homoeopathic-red: #f0dbde;
  --sakura: #d9b5b5;
  --sailing: #789dc0;
  --queen-blue: #4f6d93;
  --palm-leaf: #3c4735;
  --twilight-zone: #161a15;
}

Tailwind CSS v4

/* Homoeopathic Red to Twilight Zone — https://swatchly.xyz/palette/f0dbde-d9b5b5-789dc0-4f6d93-3c4735-161a15 */
@theme {
  --color-homoeopathic-red: #f0dbde;
  --color-homoeopathic-red-50: #fffafb;
  --color-homoeopathic-red-100: #fcf0f1;
  --color-homoeopathic-red-200: #f0dbde;
  --color-homoeopathic-red-300: #d5c4c6;
  --color-homoeopathic-red-400: #b5a2a5;
  --color-homoeopathic-red-500: #988588;
  --color-homoeopathic-red-600: #7b696c;
  --color-homoeopathic-red-700: #625254;
  --color-homoeopathic-red-800: #4c3e40;
  --color-homoeopathic-red-900: #3b2f31;
  --color-homoeopathic-red-950: #251d1e;
  --color-sakura: #d9b5b5;
  --color-sakura-50: #fff0f0;
  --color-sakura-100: #fbe3e3;
  --color-sakura-200: #eacece;
  --color-sakura-300: #d9b5b5;
  --color-sakura-400: #b89797;
  --color-sakura-500: #9d7b7c;
  --color-sakura-600: #816262;
  --color-sakura-700: #694c4d;
  --color-sakura-800: #533b3b;
  --color-sakura-900: #412d2d;
  --color-sakura-950: #2a1b1b;
  --color-sailing: #789dc0;
  --color-sailing-50: #e8f4ff;
  --color-sailing-100: #d3e9ff;
  --color-sailing-200: #b7d5f2;
  --color-sailing-300: #9cbede;
  --color-sailing-400: #789dc0;
  --color-sailing-500: #5f83a5;
  --color-sailing-600: #486a8a;
  --color-sailing-700: #355471;
  --color-sailing-800: #27425b;
  --color-sailing-900: #1c3449;
  --color-sailing-950: #102130;
  --color-queen-blue: #4f6d93;
  --color-queen-blue-50: #eff6ff;
  --color-queen-blue-100: #deedff;
  --color-queen-blue-200: #c1dafa;
  --color-queen-blue-300: #a7c3e7;
  --color-queen-blue-400: #85a4cb;
  --color-queen-blue-500: #6988af;
  --color-queen-blue-600: #4f6d93;
  --color-queen-blue-700: #3c5678;
  --color-queen-blue-800: #2c4361;
  --color-queen-blue-900: #20334c;
  --color-queen-blue-950: #122032;
  --color-palm-leaf: #3c4735;
  --color-palm-leaf-50: #f0f8ec;
  --color-palm-leaf-100: #e6eee1;
  --color-palm-leaf-200: #d1dbcb;
  --color-palm-leaf-300: #bac5b3;
  --color-palm-leaf-400: #9aa692;
  --color-palm-leaf-500: #7f8b77;
  --color-palm-leaf-600: #65715e;
  --color-palm-leaf-700: #4f5a48;
  --color-palm-leaf-800: #3c4735;
  --color-palm-leaf-900: #2e3629;
  --color-palm-leaf-950: #1c2218;
  --color-twilight-zone: #161a15;
  --color-twilight-zone-50: #f3f6f2;
  --color-twilight-zone-100: #e9ece8;
  --color-twilight-zone-200: #d5d9d4;
  --color-twilight-zone-300: #bec2bc;
  --color-twilight-zone-400: #9ea39d;
  --color-twilight-zone-500: #818680;
  --color-twilight-zone-600: #666b65;
  --color-twilight-zone-700: #4e534d;
  --color-twilight-zone-800: #3b3f3a;
  --color-twilight-zone-900: #2b2e2a;
  --color-twilight-zone-950: #161a15;
}