Do Not Disturb to Oakwood Color Palette

About this palette

Do Not Disturb to Oakwood is a 5-color muted palette: #323C49 (Do Not Disturb), #606D85 (Plumbeous), #9F876B (Gramps Shoehorn), #D9CABA (Tapioca), #BCA68A (Oakwood). It mixes gray, blue, orange tones and feels warm overall. The strongest text pairing is #323C49 on #D9CABA with a contrast ratio of 6.98:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Do Not Disturb	rgb(50, 60, 73)	hsl(214, 19%, 24%)
Plumbeous	rgb(96, 109, 133)	hsl(219, 16%, 45%)
Gramps Shoehorn	rgb(159, 135, 107)	hsl(32, 21%, 52%)
Tapioca	rgb(217, 202, 186)	hsl(31, 29%, 79%)
Oakwood	rgb(188, 166, 138)	hsl(34, 27%, 64%)

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.

Aa6.98:1 Good#323C49 on #D9CABA
Aa6.98:1 Good#D9CABA on #323C49
Aa4.77:1 Good#323C49 on #BCA68A
Aa4.77:1 Good#BCA68A on #323C49
Aa3.28:1 Poor#323C49 on #9F876B
Aa3.28:1 Poor#9F876B on #323C49
Aa3.26:1 Poor#606D85 on #D9CABA
Aa3.26:1 Poor#D9CABA on #606D85

Color blindness preview

CSS variables

/* Do Not Disturb to Oakwood — https://swatchly.xyz/palette/323c49-606d85-9f876b-d9caba-bca68a */
:root {
  --do-not-disturb: #323c49;
  --plumbeous: #606d85;
  --gramps-shoehorn: #9f876b;
  --tapioca: #d9caba;
  --oakwood: #bca68a;
}

Tailwind CSS v4

/* Do Not Disturb to Oakwood — https://swatchly.xyz/palette/323c49-606d85-9f876b-d9caba-bca68a */
@theme {
  --color-do-not-disturb: #323c49;
  --color-do-not-disturb-50: #eff6ff;
  --color-do-not-disturb-100: #e4ecf6;
  --color-do-not-disturb-200: #cfd8e5;
  --color-do-not-disturb-300: #b6c0ce;
  --color-do-not-disturb-400: #94a0af;
  --color-do-not-disturb-500: #788392;
  --color-do-not-disturb-600: #5d6875;
  --color-do-not-disturb-700: #46505c;
  --color-do-not-disturb-800: #323c49;
  --color-do-not-disturb-900: #272e36;
  --color-do-not-disturb-950: #171b21;
  --color-plumbeous: #606d85;
  --color-plumbeous-50: #f0f5ff;
  --color-plumbeous-100: #e2ecfd;
  --color-plumbeous-200: #cdd8ec;
  --color-plumbeous-300: #b5c2d9;
  --color-plumbeous-400: #95a3bb;
  --color-plumbeous-500: #7a87a0;
  --color-plumbeous-600: #606d85;
  --color-plumbeous-700: #4b566c;
  --color-plumbeous-800: #394356;
  --color-plumbeous-900: #2b3343;
  --color-plumbeous-950: #19202b;
  --color-gramps-shoehorn: #9f876b;
  --color-gramps-shoehorn-50: #fff4e8;
  --color-gramps-shoehorn-100: #faead8;
  --color-gramps-shoehorn-200: #ead7c1;
  --color-gramps-shoehorn-300: #d6c1a8;
  --color-gramps-shoehorn-400: #b9a287;
  --color-gramps-shoehorn-500: #9f876b;
  --color-gramps-shoehorn-600: #836c51;
  --color-gramps-shoehorn-700: #69543c;
  --color-gramps-shoehorn-800: #53412b;
  --color-gramps-shoehorn-900: #40311f;
  --color-gramps-shoehorn-950: #291e10;
  --color-tapioca: #d9caba;
  --color-tapioca-50: #f5ece2;
  --color-tapioca-100: #ebe0d5;
  --color-tapioca-200: #d9caba;
  --color-tapioca-300: #c3b6a8;
  --color-tapioca-400: #a69889;
  --color-tapioca-500: #8c7f70;
  --color-tapioca-600: #736658;
  --color-tapioca-700: #5d5145;
  --color-tapioca-800: #4b4035;
  --color-tapioca-900: #3a3128;
  --color-tapioca-950: #241e17;
  --color-oakwood: #bca68a;
  --color-oakwood-50: #fff7ec;
  --color-oakwood-100: #fbeddc;
  --color-oakwood-200: #ebdbc6;
  --color-oakwood-300: #d8c5ad;
  --color-oakwood-400: #bca68a;
  --color-oakwood-500: #9e896e;
  --color-oakwood-600: #826d53;
  --color-oakwood-700: #68563e;
  --color-oakwood-800: #52422d;
  --color-oakwood-900: #3f3120;
  --color-oakwood-950: #271d11;
}