Violet Heaven to Brunette color palette

D1B7ECViolet Heaven BA9FC5Turnip Crown A4879FVoila!8E707AChain Mail 795A56Wild West 644433Brunette

Open in generator Export PNG, PDF, ASE…

About this palette

Violet Heaven to Brunette is a 6-color muted, warm, vintage, gradient palette: #D1B7EC (Violet Heaven), #BA9FC5 (Turnip Crown), #A4879F (Voila!), #8E707A (Chain Mail), #795A56 (Wild West), #644433 (Brunette). It mixes purple, pink, red, brown tones and feels warm overall. The strongest text pairing is #D1B7EC on #644433 with a contrast ratio of 4.84:1, and 1 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Violet Heaven	rgb(209, 183, 236)	hsl(269, 58%, 82%)
Turnip Crown	rgb(186, 159, 197)	hsl(283, 25%, 70%)
Voila!	rgb(164, 135, 159)	hsl(310, 14%, 59%)
Chain Mail	rgb(142, 112, 122)	hsl(340, 12%, 50%)
Wild West	rgb(121, 90, 86)	hsl(7, 17%, 41%)
Brunette	rgb(100, 68, 51)	hsl(21, 32%, 30%)

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.

Aa4.84:1 Good#D1B7EC on #644433
Aa4.84:1 Good#644433 on #D1B7EC
Aa3.66:1 Poor#BA9FC5 on #644433
Aa3.66:1 Poor#644433 on #BA9FC5
Aa3.43:1 Poor#D1B7EC on #795A56
Aa3.43:1 Poor#795A56 on #D1B7EC

Color blindness preview

CSS variables

/* Violet Heaven to Brunette — https://swatchly.xyz/palette/d1b7ec-ba9fc5-a4879f-8e707a-795a56-644433 */
:root {
  --violet-heaven: #d1b7ec;
  --turnip-crown: #ba9fc5;
  --voila: #a4879f;
  --chain-mail: #8e707a;
  --wild-west: #795a56;
  --brunette: #644433;
}

Tailwind CSS v4

/* Violet Heaven to Brunette — https://swatchly.xyz/palette/d1b7ec-ba9fc5-a4879f-8e707a-795a56-644433 */
@theme {
  --color-violet-heaven: #d1b7ec;
  --color-violet-heaven-50: #f9f4ff;
  --color-violet-heaven-100: #f3e8ff;
  --color-violet-heaven-200: #e4d1f8;
  --color-violet-heaven-300: #d1b7ec;
  --color-violet-heaven-400: #b098c9;
  --color-violet-heaven-500: #947cad;
  --color-violet-heaven-600: #796190;
  --color-violet-heaven-700: #614b76;
  --color-violet-heaven-800: #4c395e;
  --color-violet-heaven-900: #3b2a4a;
  --color-violet-heaven-950: #251930;
  --color-turnip-crown: #ba9fc5;
  --color-turnip-crown-50: #fcf6ff;
  --color-turnip-crown-100: #f9eaff;
  --color-turnip-crown-200: #e9d6f2;
  --color-turnip-crown-300: #d6bfdf;
  --color-turnip-crown-400: #ba9fc5;
  --color-turnip-crown-500: #9c82a7;
  --color-turnip-crown-600: #80678a;
  --color-turnip-crown-700: #664f6f;
  --color-turnip-crown-800: #503c58;
  --color-turnip-crown-900: #3d2d44;
  --color-turnip-crown-950: #261a2b;
  --color-voila: #a4879f;
  --color-voila-50: #fff3fd;
  --color-voila-100: #fce9f8;
  --color-voila-200: #ecd6e8;
  --color-voila-300: #d9c0d5;
  --color-voila-400: #bda1b8;
  --color-voila-500: #a4879f;
  --color-voila-600: #866b82;
  --color-voila-700: #6c5368;
  --color-voila-800: #553f52;
  --color-voila-900: #422f3f;
  --color-voila-950: #291c27;
  --color-chain-mail: #8e707a;
  --color-chain-mail-50: #ffedf3;
  --color-chain-mail-100: #f6e0e7;
  --color-chain-mail-200: #e3c9d1;
  --color-chain-mail-300: #ccafb8;
  --color-chain-mail-400: #ac8d97;
  --color-chain-mail-500: #8e707a;
  --color-chain-mail-600: #745962;
  --color-chain-mail-700: #5e454e;
  --color-chain-mail-800: #4b363d;
  --color-chain-mail-900: #3b2930;
  --color-chain-mail-950: #26191e;
  --color-wild-west: #795a56;
  --color-wild-west-50: #fff2f0;
  --color-wild-west-100: #fbe3e0;
  --color-wild-west-200: #e8cdc9;
  --color-wild-west-300: #d3b4af;
  --color-wild-west-400: #b3928e;
  --color-wild-west-500: #967571;
  --color-wild-west-600: #795a56;
  --color-wild-west-700: #614643;
  --color-wild-west-800: #4d3633;
  --color-wild-west-900: #3d2927;
  --color-wild-west-950: #271917;
  --color-brunette: #644433;
  --color-brunette-50: #fff2ec;
  --color-brunette-100: #fee5d9;
  --color-brunette-200: #eccfc0;
  --color-brunette-300: #d7b6a5;
  --color-brunette-400: #b79481;
  --color-brunette-500: #9a7765;
  --color-brunette-600: #7c5c4b;
  --color-brunette-700: #644433;
  --color-brunette-800: #4d3528;
  --color-brunette-900: #3d281d;
  --color-brunette-950: #261810;
}