Dark Orchestra to Monet Magic Color Palette

About this palette

Dark Orchestra to Monet Magic is a 5-color muted palette: #231B16 (Dark Orchestra), #415442 (Highlander), #738993 (Gothic), #DFF2DD (Distant Landscape), #BFA9C0 (Monet Magic). It mixes gray, green, white, pink tones and feels cool overall. The strongest text pairing is #231B16 on #DFF2DD with a contrast ratio of 14.42:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Orchestra	rgb(35, 27, 22)	hsl(23, 23%, 11%)
Highlander	rgb(65, 84, 66)	hsl(123, 13%, 29%)
Gothic	rgb(115, 137, 147)	hsl(199, 13%, 51%)
Distant Landscape	rgb(223, 242, 221)	hsl(114, 45%, 91%)
Monet Magic	rgb(191, 169, 192)	hsl(297, 15%, 71%)

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.

Aa14.42:1 Super#231B16 on #DFF2DD
Aa14.42:1 Super#DFF2DD on #231B16
Aa7.78:1 Very good#231B16 on #BFA9C0
Aa7.78:1 Very good#BFA9C0 on #231B16
Aa6.95:1 Good#415442 on #DFF2DD
Aa6.95:1 Good#DFF2DD on #415442
Aa4.62:1 Good#231B16 on #738993
Aa4.62:1 Good#738993 on #231B16

Color blindness preview

CSS variables

/* Dark Orchestra to Monet Magic — https://swatchly.xyz/palette/231b16-415442-738993-dff2dd-bfa9c0 */
:root {
  --dark-orchestra: #231b16;
  --highlander: #415442;
  --gothic: #738993;
  --distant-landscape: #dff2dd;
  --monet-magic: #bfa9c0;
}

Tailwind CSS v4

/* Dark Orchestra to Monet Magic — https://swatchly.xyz/palette/231b16-415442-738993-dff2dd-bfa9c0 */
@theme {
  --color-dark-orchestra: #231b16;
  --color-dark-orchestra-50: #faf4f0;
  --color-dark-orchestra-100: #f1eae5;
  --color-dark-orchestra-200: #ded6d0;
  --color-dark-orchestra-300: #c8bfb9;
  --color-dark-orchestra-400: #aa9f99;
  --color-dark-orchestra-500: #8e837d;
  --color-dark-orchestra-600: #726963;
  --color-dark-orchestra-700: #5b524c;
  --color-dark-orchestra-800: #463f3a;
  --color-dark-orchestra-900: #362f2b;
  --color-dark-orchestra-950: #231b16;
  --color-highlander: #415442;
  --color-highlander-50: #edf9ed;
  --color-highlander-100: #e2f0e2;
  --color-highlander-200: #cbdbcb;
  --color-highlander-300: #b1c4b2;
  --color-highlander-400: #90a490;
  --color-highlander-500: #738774;
  --color-highlander-600: #586c59;
  --color-highlander-700: #415442;
  --color-highlander-800: #334133;
  --color-highlander-900: #263227;
  --color-highlander-950: #161f17;
  --color-gothic: #738993;
  --color-gothic-50: #eaf7fe;
  --color-gothic-100: #dfeef4;
  --color-gothic-200: #c9dae2;
  --color-gothic-300: #b0c4cd;
  --color-gothic-400: #8fa5ae;
  --color-gothic-500: #738993;
  --color-gothic-600: #5a6f78;
  --color-gothic-700: #455860;
  --color-gothic-800: #34454c;
  --color-gothic-900: #27353b;
  --color-gothic-950: #172125;
  --color-distant-landscape: #dff2dd;
  --color-distant-landscape-50: #eff9ed;
  --color-distant-landscape-100: #dff2dd;
  --color-distant-landscape-200: #cfdccd;
  --color-distant-landscape-300: #b7c6b5;
  --color-distant-landscape-400: #96a795;
  --color-distant-landscape-500: #7b8c79;
  --color-distant-landscape-600: #61715f;
  --color-distant-landscape-700: #4b5a4a;
  --color-distant-landscape-800: #3a4638;
  --color-distant-landscape-900: #2b362a;
  --color-distant-landscape-950: #1a2219;
  --color-monet-magic: #bfa9c0;
  --color-monet-magic-50: #f6e8f6;
  --color-monet-magic-100: #eadaeb;
  --color-monet-magic-200: #d6c3d6;
  --color-monet-magic-300: #bfa9c0;
  --color-monet-magic-400: #a28da3;
  --color-monet-magic-500: #89758a;
  --color-monet-magic-600: #715d72;
  --color-monet-magic-700: #5b4a5c;
  --color-monet-magic-800: #493a4a;
  --color-monet-magic-900: #3b2e3b;
  --color-monet-magic-950: #251c25;
}