Novel Lilac to Vibrant Vine color palette

BCA5C7Novel Lilac 9B859AHatoba Pigeon 725562Hibernation E3C0CBPink Mist 70504EAfternoon Coffee 513437Vibrant Vine

Open in generator Export PNG, PDF, ASE…

About this palette

Novel Lilac to Vibrant Vine is a 6-color muted, warm, vintage palette: #BCA5C7 (Novel Lilac), #9B859A (Hatoba Pigeon), #725562 (Hibernation), #E3C0CB (Pink Mist), #70504E (Afternoon Coffee), #513437 (Vibrant Vine). It mixes purple, pink, red, brown tones and feels warm overall. The strongest text pairing is #E3C0CB on #513437 with a contrast ratio of 6.68:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Novel Lilac	rgb(188, 165, 199)	hsl(281, 23%, 71%)
Hatoba Pigeon	rgb(155, 133, 154)	hsl(303, 10%, 56%)
Hibernation	rgb(114, 85, 98)	hsl(333, 15%, 39%)
Pink Mist	rgb(227, 192, 203)	hsl(341, 38%, 82%)
Afternoon Coffee	rgb(112, 80, 78)	hsl(4, 18%, 37%)
Vibrant Vine	rgb(81, 52, 55)	hsl(354, 22%, 26%)

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.

Aa6.68:1 Good#E3C0CB on #513437
Aa6.68:1 Good#513437 on #E3C0CB
Aa4.93:1 Good#BCA5C7 on #513437
Aa4.93:1 Good#513437 on #BCA5C7
Aa4.30:1 Poor#E3C0CB on #70504E
Aa4.30:1 Poor#70504E on #E3C0CB
Aa3.97:1 Poor#725562 on #E3C0CB
Aa3.97:1 Poor#E3C0CB on #725562

Color blindness preview

CSS variables

/* Novel Lilac to Vibrant Vine — https://swatchly.xyz/palette/bca5c7-9b859a-725562-e3c0cb-70504e-513437 */
:root {
  --novel-lilac: #bca5c7;
  --hatoba-pigeon: #9b859a;
  --hibernation: #725562;
  --pink-mist: #e3c0cb;
  --afternoon-coffee: #70504e;
  --vibrant-vine: #513437;
}

Tailwind CSS v4

/* Novel Lilac to Vibrant Vine — https://swatchly.xyz/palette/bca5c7-9b859a-725562-e3c0cb-70504e-513437 */
@theme {
  --color-novel-lilac: #bca5c7;
  --color-novel-lilac-50: #fdf8ff;
  --color-novel-lilac-100: #f9edff;
  --color-novel-lilac-200: #eadaf2;
  --color-novel-lilac-300: #d7c4e0;
  --color-novel-lilac-400: #bca5c7;
  --color-novel-lilac-500: #9d87a8;
  --color-novel-lilac-600: #806b8a;
  --color-novel-lilac-700: #66536f;
  --color-novel-lilac-800: #503f58;
  --color-novel-lilac-900: #3d2e43;
  --color-novel-lilac-950: #251b29;
  --color-hatoba-pigeon: #9b859a;
  --color-hatoba-pigeon-50: #fff2fe;
  --color-hatoba-pigeon-100: #f7e8f6;
  --color-hatoba-pigeon-200: #e6d5e5;
  --color-hatoba-pigeon-300: #d2bfd1;
  --color-hatoba-pigeon-400: #b5a0b4;
  --color-hatoba-pigeon-500: #9b859a;
  --color-hatoba-pigeon-600: #7f6a7e;
  --color-hatoba-pigeon-700: #655265;
  --color-hatoba-pigeon-800: #503f4f;
  --color-hatoba-pigeon-900: #3d2f3d;
  --color-hatoba-pigeon-950: #261c26;
  --color-hibernation: #725562;
  --color-hibernation-50: #fff1f7;
  --color-hibernation-100: #fae4ed;
  --color-hibernation-200: #ebd1dc;
  --color-hibernation-300: #d8bcc8;
  --color-hibernation-400: #bc9daa;
  --color-hibernation-500: #a28390;
  --color-hibernation-600: #886a77;
  --color-hibernation-700: #725562;
  --color-hibernation-800: #5a424d;
  --color-hibernation-900: #46323b;
  --color-hibernation-950: #2d1e25;
  --color-pink-mist: #e3c0cb;
  --color-pink-mist-50: #fff8fa;
  --color-pink-mist-100: #ffecf2;
  --color-pink-mist-200: #f1d8e0;
  --color-pink-mist-300: #e3c0cb;
  --color-pink-mist-400: #bfa0aa;
  --color-pink-mist-500: #a2828d;
  --color-pink-mist-600: #856670;
  --color-pink-mist-700: #6b4f58;
  --color-pink-mist-800: #543c44;
  --color-pink-mist-900: #402c33;
  --color-pink-mist-950: #291a1f;
  --color-afternoon-coffee: #70504e;
  --color-afternoon-coffee-50: #fff2f0;
  --color-afternoon-coffee-100: #fde5e3;
  --color-afternoon-coffee-200: #edd1ce;
  --color-afternoon-coffee-300: #dabab7;
  --color-afternoon-coffee-400: #bd9a98;
  --color-afternoon-coffee-500: #a27f7d;
  --color-afternoon-coffee-600: #876664;
  --color-afternoon-coffee-700: #70504e;
  --color-afternoon-coffee-800: #583e3c;
  --color-afternoon-coffee-900: #452f2d;
  --color-afternoon-coffee-950: #2c1c1b;
  --color-vibrant-vine: #513437;
  --color-vibrant-vine-50: #fff1f2;
  --color-vibrant-vine-100: #fce5e6;
  --color-vibrant-vine-200: #ebd0d2;
  --color-vibrant-vine-300: #d6b7b9;
  --color-vibrant-vine-400: #b79698;
  --color-vibrant-vine-500: #9b797c;
  --color-vibrant-vine-600: #7e5f61;
  --color-vibrant-vine-700: #64484b;
  --color-vibrant-vine-800: #513437;
  --color-vibrant-vine-900: #3c292a;
  --color-vibrant-vine-950: #261819;
}