Monet Magic to Atlas Cedar Color Palette

About this palette

Monet Magic to Atlas Cedar is a 5-color warm, vintage palette: #C8ABC7 (Monet Magic), #706031 (Himalaya), #482B42 (Voodoo), #FAEEC3 (Banana Split), #52A0B3 (Atlas Cedar). It mixes pink, brown, purple, white, blue tones and feels warm overall. The strongest text pairing is #482B42 on #FAEEC3 with a contrast ratio of 10.64:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Monet Magic	rgb(200, 171, 199)	hsl(302, 21%, 73%)
Himalaya	rgb(112, 96, 49)	hsl(45, 39%, 32%)
Voodoo	rgb(72, 43, 66)	hsl(312, 25%, 23%)
Banana Split	rgb(250, 238, 195)	hsl(47, 85%, 87%)
Atlas Cedar	rgb(82, 160, 179)	hsl(192, 39%, 51%)

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.

Aa10.64:1 Very good#482B42 on #FAEEC3
Aa10.64:1 Very good#FAEEC3 on #482B42
Aa5.95:1 Good#C8ABC7 on #482B42
Aa5.95:1 Good#482B42 on #C8ABC7
Aa5.31:1 Good#706031 on #FAEEC3
Aa5.31:1 Good#FAEEC3 on #706031
Aa4.14:1 Poor#482B42 on #52A0B3
Aa4.14:1 Poor#52A0B3 on #482B42

Color blindness preview

CSS variables

/* Monet Magic to Atlas Cedar — https://swatchly.xyz/palette/c8abc7-706031-482b42-faeec3-52a0b3 */
:root {
  --monet-magic: #c8abc7;
  --himalaya: #706031;
  --voodoo: #482b42;
  --banana-split: #faeec3;
  --atlas-cedar: #52a0b3;
}

Tailwind CSS v4

/* Monet Magic to Atlas Cedar — https://swatchly.xyz/palette/c8abc7-706031-482b42-faeec3-52a0b3 */
@theme {
  --color-monet-magic: #c8abc7;
  --color-monet-magic-50: #fbe9fa;
  --color-monet-magic-100: #f0dcf0;
  --color-monet-magic-200: #ddc5dc;
  --color-monet-magic-300: #c8abc7;
  --color-monet-magic-400: #aa8ea9;
  --color-monet-magic-500: #90758f;
  --color-monet-magic-600: #765d76;
  --color-monet-magic-700: #604960;
  --color-monet-magic-800: #4d394d;
  --color-monet-magic-900: #3d2c3d;
  --color-monet-magic-950: #271a26;
  --color-himalaya: #706031;
  --color-himalaya-50: #fef5d9;
  --color-himalaya-100: #f4e9c9;
  --color-himalaya-200: #e0d3ad;
  --color-himalaya-300: #c9ba8f;
  --color-himalaya-400: #a9996a;
  --color-himalaya-500: #8c7c4c;
  --color-himalaya-600: #706031;
  --color-himalaya-700: #594c23;
  --color-himalaya-800: #473b17;
  --color-himalaya-900: #372d0e;
  --color-himalaya-950: #231c06;
  --color-voodoo: #482b42;
  --color-voodoo-50: #fff0fb;
  --color-voodoo-100: #fbe3f5;
  --color-voodoo-200: #eacee3;
  --color-voodoo-300: #d5b6cd;
  --color-voodoo-400: #b896b0;
  --color-voodoo-500: #9d7b95;
  --color-voodoo-600: #82627b;
  --color-voodoo-700: #6a4d64;
  --color-voodoo-800: #563c50;
  --color-voodoo-900: #482b42;
  --color-voodoo-950: #2c1c29;
  --color-banana-split: #faeec3;
  --color-banana-split-50: #fef8e1;
  --color-banana-split-100: #faeec3;
  --color-banana-split-200: #e2dabb;
  --color-banana-split-300: #ccc3a0;
  --color-banana-split-400: #aea37c;
  --color-banana-split-500: #92875f;
  --color-banana-split-600: #776c46;
  --color-banana-split-700: #5f5532;
  --color-banana-split-800: #4b4223;
  --color-banana-split-900: #3a3318;
  --color-banana-split-950: #241f0c;
  --color-atlas-cedar: #52a0b3;
  --color-atlas-cedar-50: #ebfbff;
  --color-atlas-cedar-100: #d7f7ff;
  --color-atlas-cedar-200: #b4e9f7;
  --color-atlas-cedar-300: #98d6e6;
  --color-atlas-cedar-400: #72b9cb;
  --color-atlas-cedar-500: #52a0b3;
  --color-atlas-cedar-600: #328295;
  --color-atlas-cedar-700: #176879;
  --color-atlas-cedar-800: #015160;
  --color-atlas-cedar-900: #003e4a;
  --color-atlas-cedar-950: #00262e;
}