Dark Void to Flying Carpet Color Palette

About this palette

Dark Void to Flying Carpet is a 5-color muted palette: #151419 (Dark Void), #ABAE8F (Quiet Thicket), #E5E1CE (Wild Wheat), #41445D (Genie), #777189 (Flying Carpet). It mixes black, yellow, gray, purple tones and feels cool overall. The strongest text pairing is #151419 on #E5E1CE with a contrast ratio of 13.96:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Void	rgb(21, 20, 25)	hsl(252, 11%, 9%)
Quiet Thicket	rgb(171, 174, 143)	hsl(66, 16%, 62%)
Wild Wheat	rgb(229, 225, 206)	hsl(50, 31%, 85%)
Genie	rgb(65, 68, 93)	hsl(234, 18%, 31%)
Flying Carpet	rgb(119, 113, 137)	hsl(255, 10%, 49%)

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.96:1 Super#151419 on #E5E1CE
Aa13.96:1 Super#E5E1CE on #151419
Aa8.01:1 Very good#151419 on #ABAE8F
Aa8.01:1 Very good#ABAE8F on #151419
Aa7.24:1 Very good#E5E1CE on #41445D
Aa7.24:1 Very good#41445D on #E5E1CE
Aa4.16:1 Poor#ABAE8F on #41445D
Aa4.16:1 Poor#41445D on #ABAE8F

Color blindness preview

CSS variables

/* Dark Void to Flying Carpet — https://swatchly.xyz/palette/151419-abae8f-e5e1ce-41445d-777189 */
:root {
  --dark-void: #151419;
  --quiet-thicket: #abae8f;
  --wild-wheat: #e5e1ce;
  --genie: #41445d;
  --flying-carpet: #777189;
}

Tailwind CSS v4

/* Dark Void to Flying Carpet — https://swatchly.xyz/palette/151419-abae8f-e5e1ce-41445d-777189 */
@theme {
  --color-dark-void: #151419;
  --color-dark-void-50: #f5f4f8;
  --color-dark-void-100: #ebeaef;
  --color-dark-void-200: #d7d7dc;
  --color-dark-void-300: #c1c0c6;
  --color-dark-void-400: #a2a0a7;
  --color-dark-void-500: #848389;
  --color-dark-void-600: #68666d;
  --color-dark-void-700: #4f4e54;
  --color-dark-void-800: #3b3a3e;
  --color-dark-void-900: #29292c;
  --color-dark-void-950: #151419;
  --color-quiet-thicket: #abae8f;
  --color-quiet-thicket-50: #f8fae9;
  --color-quiet-thicket-100: #f0f2df;
  --color-quiet-thicket-200: #dee0ca;
  --color-quiet-thicket-300: #c9ccb2;
  --color-quiet-thicket-400: #abae8f;
  --color-quiet-thicket-500: #8e9173;
  --color-quiet-thicket-600: #727458;
  --color-quiet-thicket-700: #5a5c42;
  --color-quiet-thicket-800: #454730;
  --color-quiet-thicket-900: #343622;
  --color-quiet-thicket-950: #1f2013;
  --color-wild-wheat: #e5e1ce;
  --color-wild-wheat-50: #fefcf2;
  --color-wild-wheat-100: #f5f3e8;
  --color-wild-wheat-200: #e5e1ce;
  --color-wild-wheat-300: #ccc9b9;
  --color-wild-wheat-400: #aba897;
  --color-wild-wheat-500: #8e8b79;
  --color-wild-wheat-600: #726f5e;
  --color-wild-wheat-700: #5a5748;
  --color-wild-wheat-800: #454336;
  --color-wild-wheat-900: #353328;
  --color-wild-wheat-950: #211f17;
  --color-genie: #41445d;
  --color-genie-50: #f3f4ff;
  --color-genie-100: #e7eafd;
  --color-genie-200: #d2d6ed;
  --color-genie-300: #bcc0d9;
  --color-genie-400: #9da1bd;
  --color-genie-500: #8286a2;
  --color-genie-600: #696c87;
  --color-genie-700: #53576f;
  --color-genie-800: #41445d;
  --color-genie-900: #323447;
  --color-genie-950: #1f202e;
  --color-flying-carpet: #777189;
  --color-flying-carpet-50: #f6f3ff;
  --color-flying-carpet-100: #eeeafb;
  --color-flying-carpet-200: #dcd8eb;
  --color-flying-carpet-300: #c8c2d8;
  --color-flying-carpet-400: #aaa4bc;
  --color-flying-carpet-500: #908aa3;
  --color-flying-carpet-600: #777189;
  --color-flying-carpet-700: #5e596f;
  --color-flying-carpet-800: #4a4558;
  --color-flying-carpet-900: #383444;
  --color-flying-carpet-950: #23202b;
}