Dark Rum to Ghost White color palette

403724Dark Rum 3D5168Into the Stratosphere 877960Home Brew 93A3BERobotic Gods CABDA7Attic Linen F5F9FFGhost White

Open in generator Export PNG, PDF, ASE…

About this palette

Dark Rum to Ghost White is a 6-color muted palette: #403724 (Dark Rum), #3D5168 (Into the Stratosphere), #877960 (Home Brew), #93A3BE (Robotic Gods), #CABDA7 (Attic Linen), #F5F9FF (Ghost White). It mixes gray, blue, yellow, white tones and feels cool overall. The strongest text pairing is #403724 on #F5F9FF with a contrast ratio of 11.10:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Rum	rgb(64, 55, 36)	hsl(41, 28%, 20%)
Into the Stratosphere	rgb(61, 81, 104)	hsl(212, 26%, 32%)
Home Brew	rgb(135, 121, 96)	hsl(38, 17%, 45%)
Robotic Gods	rgb(147, 163, 190)	hsl(218, 25%, 66%)
Attic Linen	rgb(202, 189, 167)	hsl(38, 25%, 72%)
Ghost White	rgb(245, 249, 255)	hsl(216, 100%, 98%)

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.10:1 Very good#403724 on #F5F9FF
Aa11.10:1 Very good#F5F9FF on #403724
Aa7.72:1 Very good#3D5168 on #F5F9FF
Aa7.72:1 Very good#F5F9FF on #3D5168
Aa6.34:1 Good#403724 on #CABDA7
Aa6.34:1 Good#CABDA7 on #403724
Aa4.59:1 Good#403724 on #93A3BE
Aa4.59:1 Good#93A3BE on #403724

Color blindness preview

CSS variables

/* Dark Rum to Ghost White — https://swatchly.xyz/palette/403724-3d5168-877960-93a3be-cabda7-f5f9ff */
:root {
  --dark-rum: #403724;
  --into-the-stratosphere: #3d5168;
  --home-brew: #877960;
  --robotic-gods: #93a3be;
  --attic-linen: #cabda7;
  --ghost-white: #f5f9ff;
}

Tailwind CSS v4

/* Dark Rum to Ghost White — https://swatchly.xyz/palette/403724-3d5168-877960-93a3be-cabda7-f5f9ff */
@theme {
  --color-dark-rum: #403724;
  --color-dark-rum-50: #fbf5e8;
  --color-dark-rum-100: #f1eadc;
  --color-dark-rum-200: #dfd7c6;
  --color-dark-rum-300: #c9c0ad;
  --color-dark-rum-400: #aca28c;
  --color-dark-rum-500: #918772;
  --color-dark-rum-600: #786e59;
  --color-dark-rum-700: #615845;
  --color-dark-rum-800: #4e4635;
  --color-dark-rum-900: #403724;
  --color-dark-rum-950: #282318;
  --color-into-the-stratosphere: #3d5168;
  --color-into-the-stratosphere-50: #eef6ff;
  --color-into-the-stratosphere-100: #deedfe;
  --color-into-the-stratosphere-200: #c7d8ed;
  --color-into-the-stratosphere-300: #adc1d8;
  --color-into-the-stratosphere-400: #8ba0ba;
  --color-into-the-stratosphere-500: #6e849d;
  --color-into-the-stratosphere-600: #546880;
  --color-into-the-stratosphere-700: #3d5168;
  --color-into-the-stratosphere-800: #2f3f51;
  --color-into-the-stratosphere-900: #23303f;
  --color-into-the-stratosphere-950: #141d28;
  --color-home-brew: #877960;
  --color-home-brew-50: #fbf2e2;
  --color-home-brew-100: #f0e6d4;
  --color-home-brew-200: #dcd0bb;
  --color-home-brew-300: #c4b7a0;
  --color-home-brew-400: #a4967d;
  --color-home-brew-500: #877960;
  --color-home-brew-600: #6e614a;
  --color-home-brew-700: #584d38;
  --color-home-brew-800: #463c2a;
  --color-home-brew-900: #372e1f;
  --color-home-brew-950: #231d11;
  --color-robotic-gods: #93a3be;
  --color-robotic-gods-50: #f0f6ff;
  --color-robotic-gods-100: #e2ecfe;
  --color-robotic-gods-200: #ccd9ee;
  --color-robotic-gods-300: #b4c2da;
  --color-robotic-gods-400: #93a3be;
  --color-robotic-gods-500: #7887a1;
  --color-robotic-gods-600: #5e6d86;
  --color-robotic-gods-700: #49566c;
  --color-robotic-gods-800: #384356;
  --color-robotic-gods-900: #2a3344;
  --color-robotic-gods-950: #191f2b;
  --color-attic-linen: #cabda7;
  --color-attic-linen-50: #fbf3e6;
  --color-attic-linen-100: #f1e9da;
  --color-attic-linen-200: #ded4c4;
  --color-attic-linen-300: #cabda7;
  --color-attic-linen-400: #aa9e8a;
  --color-attic-linen-500: #8f836e;
  --color-attic-linen-600: #756955;
  --color-attic-linen-700: #5e5341;
  --color-attic-linen-800: #4a4131;
  --color-attic-linen-900: #393224;
  --color-attic-linen-950: #241e15;
  --color-ghost-white: #f5f9ff;
  --color-ghost-white-50: #f5f9ff;
  --color-ghost-white-100: #eceef2;
  --color-ghost-white-200: #d7dade;
  --color-ghost-white-300: #c0c3c8;
  --color-ghost-white-400: #9fa3a8;
  --color-ghost-white-500: #83878c;
  --color-ghost-white-600: #696c71;
  --color-ghost-white-700: #52555a;
  --color-ghost-white-800: #404346;
  --color-ghost-white-900: #313336;
  --color-ghost-white-950: #1e1f22;
}