Muted Purple to Haiti Color Palette

About this palette

Muted Purple to Haiti is a 5-color muted, cool palette: #85629C (Muted Purple), #DFC0CB (Creamy Berry), #585873 (Majestic Magic), #C89DCA (Pastel Violet), #2A283C (Haiti). It mixes purple, pink tones and feels cool overall. The strongest text pairing is #DFC0CB on #2A283C with a contrast ratio of 8.55:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Muted Purple	rgb(133, 98, 156)	hsl(276, 23%, 50%)
Creamy Berry	rgb(223, 192, 203)	hsl(339, 33%, 81%)
Majestic Magic	rgb(88, 88, 115)	hsl(240, 13%, 40%)
Pastel Violet	rgb(200, 157, 202)	hsl(297, 30%, 70%)
Haiti	rgb(42, 40, 60)	hsl(246, 20%, 20%)

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.

Aa8.55:1 Very good#DFC0CB on #2A283C
Aa8.55:1 Very good#2A283C on #DFC0CB
Aa6.22:1 Good#C89DCA on #2A283C
Aa6.22:1 Good#2A283C on #C89DCA
Aa4.10:1 Poor#DFC0CB on #585873
Aa4.10:1 Poor#585873 on #DFC0CB

Color blindness preview

CSS variables

/* Muted Purple to Haiti — https://swatchly.xyz/palette/85629c-dfc0cb-585873-c89dca-2a283c */
:root {
  --muted-purple: #85629c;
  --creamy-berry: #dfc0cb;
  --majestic-magic: #585873;
  --pastel-violet: #c89dca;
  --haiti: #2a283c;
}

Tailwind CSS v4

/* Muted Purple to Haiti — https://swatchly.xyz/palette/85629c-dfc0cb-585873-c89dca-2a283c */
@theme {
  --color-muted-purple: #85629c;
  --color-muted-purple-50: #f9f2ff;
  --color-muted-purple-100: #f5e6ff;
  --color-muted-purple-200: #e9cefd;
  --color-muted-purple-300: #d6b7ec;
  --color-muted-purple-400: #b996d1;
  --color-muted-purple-500: #9f7bb7;
  --color-muted-purple-600: #85629c;
  --color-muted-purple-700: #6b4b80;
  --color-muted-purple-800: #553967;
  --color-muted-purple-900: #422a51;
  --color-muted-purple-950: #2a1835;
  --color-creamy-berry: #dfc0cb;
  --color-creamy-berry-50: #fff7fa;
  --color-creamy-berry-100: #feecf2;
  --color-creamy-berry-200: #eed8e0;
  --color-creamy-berry-300: #dfc0cb;
  --color-creamy-berry-400: #bca0aa;
  --color-creamy-berry-500: #9f838d;
  --color-creamy-berry-600: #826771;
  --color-creamy-berry-700: #685059;
  --color-creamy-berry-800: #523d45;
  --color-creamy-berry-900: #3f2d34;
  --color-creamy-berry-950: #281b20;
  --color-majestic-magic: #585873;
  --color-majestic-magic-50: #f4f4ff;
  --color-majestic-magic-100: #e9e9fd;
  --color-majestic-magic-200: #d6d6ee;
  --color-majestic-magic-300: #c0c0db;
  --color-majestic-magic-400: #a1a2be;
  --color-majestic-magic-500: #8787a4;
  --color-majestic-magic-600: #6e6e8a;
  --color-majestic-magic-700: #585873;
  --color-majestic-magic-800: #44445b;
  --color-majestic-magic-900: #343447;
  --color-majestic-magic-950: #20202e;
  --color-pastel-violet: #c89dca;
  --color-pastel-violet-50: #fff6ff;
  --color-pastel-violet-100: #feeaff;
  --color-pastel-violet-200: #f4d4f5;
  --color-pastel-violet-300: #e2bee3;
  --color-pastel-violet-400: #c89dca;
  --color-pastel-violet-500: #a980ab;
  --color-pastel-violet-600: #8b638d;
  --color-pastel-violet-700: #704c72;
  --color-pastel-violet-800: #58395a;
  --color-pastel-violet-900: #442945;
  --color-pastel-violet-950: #2a172b;
  --color-haiti: #2a283c;
  --color-haiti-50: #f4f4ff;
  --color-haiti-100: #eae9fa;
  --color-haiti-200: #d6d5e9;
  --color-haiti-300: #bfbed4;
  --color-haiti-400: #9e9db5;
  --color-haiti-500: #828098;
  --color-haiti-600: #66647b;
  --color-haiti-700: #4e4d61;
  --color-haiti-800: #3b394a;
  --color-haiti-900: #2a283c;
  --color-haiti-950: #191821;
}