Start generating

Mauvelous to Ink Black color palette

CDB3C1Mauvelous9E89A5Hatoba Pigeon7E5D58Wild West584157Black MagicF5DBDAFresco2B2124Ink Black
Open in generator Export PNG, PDF, ASE…

About this palette

Mauvelous to Ink Black is a 6-color muted palette: #CDB3C1 (Mauvelous), #9E89A5 (Hatoba Pigeon), #7E5D58 (Wild West), #584157 (Black Magic), #F5DBDA (Fresco), #2B2124 (Ink Black). It mixes pink, purple, red, gray tones and feels balanced overall. The strongest text pairing is #F5DBDA on #2B2124 with a contrast ratio of 11.91:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Mauvelousrgb(205, 179, 193)hsl(328, 21%, 75%)
Hatoba Pigeonrgb(158, 137, 165)hsl(285, 13%, 59%)
Wild Westrgb(126, 93, 88)hsl(8, 18%, 42%)
Black Magicrgb(88, 65, 87)hsl(303, 15%, 30%)
Frescorgb(245, 219, 218)hsl(2, 57%, 91%)
Ink Blackrgb(43, 33, 36)hsl(342, 13%, 15%)

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.91:1 Very good#F5DBDA on #2B2124
  • Aa11.91:1 Very good#2B2124 on #F5DBDA
  • Aa8.04:1 Very good#CDB3C1 on #2B2124
  • Aa8.04:1 Very good#2B2124 on #CDB3C1
  • Aa6.94:1 Good#584157 on #F5DBDA
  • Aa6.94:1 Good#F5DBDA on #584157
  • Aa4.89:1 Good#9E89A5 on #2B2124
  • Aa4.89:1 Good#2B2124 on #9E89A5

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Mauvelous to Ink Black — https://swatchly.xyz/palette/cdb3c1-9e89a5-7e5d58-584157-f5dbda-2b2124 */
:root {
  --mauvelous: #cdb3c1;
  --hatoba-pigeon: #9e89a5;
  --wild-west: #7e5d58;
  --black-magic: #584157;
  --fresco: #f5dbda;
  --ink-black: #2b2124;
}

Tailwind CSS v4

/* Mauvelous to Ink Black — https://swatchly.xyz/palette/cdb3c1-9e89a5-7e5d58-584157-f5dbda-2b2124 */
@theme {
  --color-mauvelous: #cdb3c1;
  --color-mauvelous-50: #fdedf6;
  --color-mauvelous-100: #f3e2eb;
  --color-mauvelous-200: #e1ccd7;
  --color-mauvelous-300: #cdb3c1;
  --color-mauvelous-400: #ad95a2;
  --color-mauvelous-500: #937b88;
  --color-mauvelous-600: #78626e;
  --color-mauvelous-700: #614d58;
  --color-mauvelous-800: #4d3c45;
  --color-mauvelous-900: #3d2e36;
  --color-mauvelous-950: #261b22;
  --color-hatoba-pigeon: #9e89a5;
  --color-hatoba-pigeon-50: #fcf4ff;
  --color-hatoba-pigeon-100: #f7eafc;
  --color-hatoba-pigeon-200: #e7d7ed;
  --color-hatoba-pigeon-300: #d4c2da;
  --color-hatoba-pigeon-400: #b7a3be;
  --color-hatoba-pigeon-500: #9e89a5;
  --color-hatoba-pigeon-600: #816d87;
  --color-hatoba-pigeon-700: #67556d;
  --color-hatoba-pigeon-800: #514156;
  --color-hatoba-pigeon-900: #3e3042;
  --color-hatoba-pigeon-950: #261d2a;
  --color-wild-west: #7e5d58;
  --color-wild-west-50: #fff2f0;
  --color-wild-west-100: #fce4e0;
  --color-wild-west-200: #ebcec9;
  --color-wild-west-300: #d6b5b0;
  --color-wild-west-400: #b7948f;
  --color-wild-west-500: #9a7873;
  --color-wild-west-600: #7e5d58;
  --color-wild-west-700: #654944;
  --color-wild-west-800: #513834;
  --color-wild-west-900: #3f2a27;
  --color-wild-west-950: #281917;
  --color-black-magic: #584157;
  --color-black-magic-50: #fff0fe;
  --color-black-magic-100: #f6e5f5;
  --color-black-magic-200: #e5d0e3;
  --color-black-magic-300: #d1bad0;
  --color-black-magic-400: #b49bb3;
  --color-black-magic-500: #9a8199;
  --color-black-magic-600: #81687f;
  --color-black-magic-700: #6a5369;
  --color-black-magic-800: #584157;
  --color-black-magic-900: #433243;
  --color-black-magic-950: #2b1f2b;
  --color-fresco: #f5dbda;
  --color-fresco-50: #f9e9e9;
  --color-fresco-100: #f5dbda;
  --color-fresco-200: #dfcbca;
  --color-fresco-300: #cbb5b4;
  --color-fresco-400: #ae9796;
  --color-fresco-500: #947d7c;
  --color-fresco-600: #7a6464;
  --color-fresco-700: #63504f;
  --color-fresco-800: #4f3d3d;
  --color-fresco-900: #3d2f2e;
  --color-fresco-950: #271c1c;
  --color-ink-black: #2b2124;
  --color-ink-black-50: #fbf3f5;
  --color-ink-black-100: #f1e8eb;
  --color-ink-black-200: #dfd4d7;
  --color-ink-black-300: #c9bdc1;
  --color-ink-black-400: #aa9ea1;
  --color-ink-black-500: #908387;
  --color-ink-black-600: #766a6e;
  --color-ink-black-700: #605558;
  --color-ink-black-800: #4d4346;
  --color-ink-black-900: #3d3537;
  --color-ink-black-950: #2b2124;
}

Similar palettes