Vibrant Vine to Fresco color palette

4C3638Vibrant Vine 6D4F51Veil of Cinder A97979Equestrienne C0A7A8Grey Sheep F4DCD9Fresco

About this palette

Vibrant Vine to Fresco is a 5-color muted, gradient palette: #4C3638 (Vibrant Vine), #6D4F51 (Veil of Cinder), #A97979 (Equestrienne), #C0A7A8 (Grey Sheep), #F4DCD9 (Fresco). It mixes gray, red tones and feels warm overall. The strongest text pairing is #4C3638 on #F4DCD9 with a contrast ratio of 8.50:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Vibrant Vine	rgb(76, 54, 56)	hsl(355, 17%, 25%)
Veil of Cinder	rgb(109, 79, 81)	hsl(356, 16%, 37%)
Equestrienne	rgb(169, 121, 121)	hsl(0, 22%, 57%)
Grey Sheep	rgb(192, 167, 168)	hsl(358, 17%, 70%)
Fresco	rgb(244, 220, 217)	hsl(7, 55%, 90%)

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.50:1 Very good#4C3638 on #F4DCD9
Aa8.50:1 Very good#F4DCD9 on #4C3638
Aa5.57:1 Good#6D4F51 on #F4DCD9
Aa5.57:1 Good#F4DCD9 on #6D4F51
Aa4.93:1 Good#4C3638 on #C0A7A8
Aa4.93:1 Good#C0A7A8 on #4C3638
Aa3.23:1 Poor#6D4F51 on #C0A7A8
Aa3.23:1 Poor#C0A7A8 on #6D4F51

Color blindness preview

CSS variables

/* Vibrant Vine to Fresco — https://swatchly.xyz/palette/4c3638-6d4f51-a97979-c0a7a8-f4dcd9 */
:root {
  --vibrant-vine: #4c3638;
  --veil-of-cinder: #6d4f51;
  --equestrienne: #a97979;
  --grey-sheep: #c0a7a8;
  --fresco: #f4dcd9;
}

Tailwind CSS v4

/* Vibrant Vine to Fresco — https://swatchly.xyz/palette/4c3638-6d4f51-a97979-c0a7a8-f4dcd9 */
@theme {
  --color-vibrant-vine: #4c3638;
  --color-vibrant-vine-50: #fff1f2;
  --color-vibrant-vine-100: #f8e6e7;
  --color-vibrant-vine-200: #e7d2d3;
  --color-vibrant-vine-300: #d1b9bb;
  --color-vibrant-vine-400: #b2989a;
  --color-vibrant-vine-500: #957c7e;
  --color-vibrant-vine-600: #786163;
  --color-vibrant-vine-700: #5f4a4c;
  --color-vibrant-vine-800: #4c3638;
  --color-vibrant-vine-900: #392a2b;
  --color-vibrant-vine-950: #23191a;
  --color-veil-of-cinder: #6d4f51;
  --color-veil-of-cinder-50: #fff1f2;
  --color-veil-of-cinder-100: #fce5e6;
  --color-veil-of-cinder-200: #ebd1d2;
  --color-veil-of-cinder-300: #d7b9bb;
  --color-veil-of-cinder-400: #ba9a9b;
  --color-veil-of-cinder-500: #9f7f81;
  --color-veil-of-cinder-600: #846567;
  --color-veil-of-cinder-700: #6d4f51;
  --color-veil-of-cinder-800: #563d3f;
  --color-veil-of-cinder-900: #432e30;
  --color-veil-of-cinder-950: #2b1c1d;
  --color-equestrienne: #a97979;
  --color-equestrienne-50: #fff2f1;
  --color-equestrienne-100: #ffe4e4;
  --color-equestrienne-200: #f4cdcd;
  --color-equestrienne-300: #e1b5b5;
  --color-equestrienne-400: #c49594;
  --color-equestrienne-500: #a97979;
  --color-equestrienne-600: #8c5f5f;
  --color-equestrienne-700: #72494a;
  --color-equestrienne-800: #5b3838;
  --color-equestrienne-900: #482a2a;
  --color-equestrienne-950: #2e1919;
  --color-grey-sheep: #c0a7a8;
  --color-grey-sheep-50: #fff7f8;
  --color-grey-sheep-100: #fdeeee;
  --color-grey-sheep-200: #eddbdc;
  --color-grey-sheep-300: #dbc6c7;
  --color-grey-sheep-400: #c0a7a8;
  --color-grey-sheep-500: #a1898a;
  --color-grey-sheep-600: #846d6e;
  --color-grey-sheep-700: #6a5556;
  --color-grey-sheep-800: #534142;
  --color-grey-sheep-900: #3f3031;
  --color-grey-sheep-950: #271c1d;
  --color-fresco: #f4dcd9;
  --color-fresco-50: #f9eae8;
  --color-fresco-100: #f4dcd9;
  --color-fresco-200: #decbc9;
  --color-fresco-300: #cab6b3;
  --color-fresco-400: #ad9895;
  --color-fresco-500: #937e7b;
  --color-fresco-600: #796562;
  --color-fresco-700: #63504e;
  --color-fresco-800: #4e3e3c;
  --color-fresco-900: #3d2f2d;
  --color-fresco-950: #261d1b;
}