Haiti to Muted Berry color palette

2E2831Haiti 3F6353Ethereal Woods B4B28DGreen Tea DED4ABGratin Dauphinois 8D7893Muted Berry

About this palette

Haiti to Muted Berry is a 5-color muted, earthy, vintage palette: #2E2831 (Haiti), #3F6353 (Ethereal Woods), #B4B28D (Green Tea), #DED4AB (Gratin Dauphinois), #8D7893 (Muted Berry). It mixes gray, green, yellow, purple tones and feels balanced overall. The strongest text pairing is #2E2831 on #DED4AB with a contrast ratio of 9.64:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Haiti	rgb(46, 40, 49)	hsl(280, 10%, 17%)
Ethereal Woods	rgb(63, 99, 83)	hsl(153, 22%, 32%)
Green Tea	rgb(180, 178, 141)	hsl(57, 21%, 63%)
Gratin Dauphinois	rgb(222, 212, 171)	hsl(48, 44%, 77%)
Muted Berry	rgb(141, 120, 147)	hsl(287, 11%, 52%)

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.

Aa9.64:1 Very good#2E2831 on #DED4AB
Aa9.64:1 Very good#DED4AB on #2E2831
Aa6.62:1 Good#2E2831 on #B4B28D
Aa6.62:1 Good#B4B28D on #2E2831
Aa4.52:1 Good#3F6353 on #DED4AB
Aa4.52:1 Good#DED4AB on #3F6353
Aa3.58:1 Poor#2E2831 on #8D7893
Aa3.58:1 Poor#8D7893 on #2E2831

Color blindness preview

CSS variables

/* Haiti to Muted Berry — https://swatchly.xyz/palette/2e2831-3f6353-b4b28d-ded4ab-8d7893 */
:root {
  --haiti: #2e2831;
  --ethereal-woods: #3f6353;
  --green-tea: #b4b28d;
  --gratin-dauphinois: #ded4ab;
  --muted-berry: #8d7893;
}

Tailwind CSS v4

/* Haiti to Muted Berry — https://swatchly.xyz/palette/2e2831-3f6353-b4b28d-ded4ab-8d7893 */
@theme {
  --color-haiti: #2e2831;
  --color-haiti-50: #f8f3fa;
  --color-haiti-100: #eee9f0;
  --color-haiti-200: #dbd5de;
  --color-haiti-300: #c5bec8;
  --color-haiti-400: #a49da8;
  --color-haiti-500: #87808b;
  --color-haiti-600: #6b646e;
  --color-haiti-700: #534d56;
  --color-haiti-800: #3e3941;
  --color-haiti-900: #2e2831;
  --color-haiti-950: #1a181c;
  --color-ethereal-woods: #3f6353;
  --color-ethereal-woods-50: #e5fbf1;
  --color-ethereal-woods-100: #d9f2e6;
  --color-ethereal-woods-200: #c3e0d2;
  --color-ethereal-woods-300: #abccbc;
  --color-ethereal-woods-400: #89ae9d;
  --color-ethereal-woods-500: #6e9382;
  --color-ethereal-woods-600: #557969;
  --color-ethereal-woods-700: #3f6353;
  --color-ethereal-woods-800: #304e40;
  --color-ethereal-woods-900: #233c31;
  --color-ethereal-woods-950: #13261e;
  --color-green-tea: #b4b28d;
  --color-green-tea-50: #fcfce8;
  --color-green-tea-100: #f5f4de;
  --color-green-tea-200: #e4e3c9;
  --color-green-tea-300: #d1cfb1;
  --color-green-tea-400: #b4b28d;
  --color-green-tea-500: #969470;
  --color-green-tea-600: #797754;
  --color-green-tea-700: #5f5d3d;
  --color-green-tea-800: #4a482c;
  --color-green-tea-900: #38361e;
  --color-green-tea-950: #21200f;
  --color-gratin-dauphinois: #ded4ab;
  --color-gratin-dauphinois-50: #f8f3db;
  --color-gratin-dauphinois-100: #efe8ce;
  --color-gratin-dauphinois-200: #ded4ab;
  --color-gratin-dauphinois-300: #c7be9b;
  --color-gratin-dauphinois-400: #a99f79;
  --color-gratin-dauphinois-500: #8e855e;
  --color-gratin-dauphinois-600: #746b46;
  --color-gratin-dauphinois-700: #5d5533;
  --color-gratin-dauphinois-800: #4a4225;
  --color-gratin-dauphinois-900: #39331a;
  --color-gratin-dauphinois-950: #241f0d;
  --color-muted-berry: #8d7893;
  --color-muted-berry-50: #fbefff;
  --color-muted-berry-100: #f2e3f6;
  --color-muted-berry-200: #dfcde4;
  --color-muted-berry-300: #c9b5ce;
  --color-muted-berry-400: #a994af;
  --color-muted-berry-500: #8d7893;
  --color-muted-berry-600: #735f79;
  --color-muted-berry-700: #5c4a61;
  --color-muted-berry-800: #49394d;
  --color-muted-berry-900: #392c3d;
  --color-muted-berry-950: #241b27;
}