Velvet Scarf to Everglade Color Palette

About this palette

Velvet Scarf to Everglade is a 5-color palette: #E1E2F8 (Velvet Scarf), #E7B1C0 (Fallen Blossoms), #689A68 (Leafy), #5D5288 (Freshly Purpleized), #2E3E31 (Everglade). It mixes gray, pink, green, purple tones and feels cool overall. The strongest text pairing is #E1E2F8 on #2E3E31 with a contrast ratio of 8.89:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Velvet Scarf	rgb(225, 226, 248)	hsl(237, 62%, 93%)
Fallen Blossoms	rgb(231, 177, 192)	hsl(343, 53%, 80%)
Leafy	rgb(104, 154, 104)	hsl(120, 20%, 51%)
Freshly Purpleized	rgb(93, 82, 136)	hsl(252, 25%, 43%)
Everglade	rgb(46, 62, 49)	hsl(131, 15%, 21%)

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.89:1 Very good#E1E2F8 on #2E3E31
Aa8.89:1 Very good#2E3E31 on #E1E2F8
Aa6.19:1 Good#E7B1C0 on #2E3E31
Aa6.19:1 Good#2E3E31 on #E7B1C0
Aa5.43:1 Good#E1E2F8 on #5D5288
Aa5.43:1 Good#5D5288 on #E1E2F8
Aa3.78:1 Poor#E7B1C0 on #5D5288
Aa3.78:1 Poor#5D5288 on #E7B1C0

Color blindness preview

CSS variables

/* Velvet Scarf to Everglade — https://swatchly.xyz/palette/e1e2f8-e7b1c0-689a68-5d5288-2e3e31 */
:root {
  --velvet-scarf: #e1e2f8;
  --fallen-blossoms: #e7b1c0;
  --leafy: #689a68;
  --freshly-purpleized: #5d5288;
  --everglade: #2e3e31;
}

Tailwind CSS v4

/* Velvet Scarf to Everglade — https://swatchly.xyz/palette/e1e2f8-e7b1c0-689a68-5d5288-2e3e31 */
@theme {
  --color-velvet-scarf: #e1e2f8;
  --color-velvet-scarf-50: #edeefb;
  --color-velvet-scarf-100: #e1e2f8;
  --color-velvet-scarf-200: #cfd0e1;
  --color-velvet-scarf-300: #babbcd;
  --color-velvet-scarf-400: #9b9cb0;
  --color-velvet-scarf-500: #818296;
  --color-velvet-scarf-600: #68697c;
  --color-velvet-scarf-700: #535464;
  --color-velvet-scarf-800: #404150;
  --color-velvet-scarf-900: #31323e;
  --color-velvet-scarf-950: #1e1e27;
  --color-fallen-blossoms: #e7b1c0;
  --color-fallen-blossoms-50: #fff2f5;
  --color-fallen-blossoms-100: #ffe4eb;
  --color-fallen-blossoms-200: #f5ccd7;
  --color-fallen-blossoms-300: #e7b1c0;
  --color-fallen-blossoms-400: #c492a1;
  --color-fallen-blossoms-500: #a97785;
  --color-fallen-blossoms-600: #8c5d6a;
  --color-fallen-blossoms-700: #724754;
  --color-fallen-blossoms-800: #5b3641;
  --color-fallen-blossoms-900: #472832;
  --color-fallen-blossoms-950: #2e171e;
  --color-leafy: #689a68;
  --color-leafy-50: #e4ffe3;
  --color-leafy-100: #d7f7d7;
  --color-leafy-200: #c0e6c0;
  --color-leafy-300: #a7d2a6;
  --color-leafy-400: #84b584;
  --color-leafy-500: #689a68;
  --color-leafy-600: #4d7e4e;
  --color-leafy-700: #386539;
  --color-leafy-800: #284f29;
  --color-leafy-900: #1c3d1d;
  --color-leafy-950: #0e260f;
  --color-freshly-purpleized: #5d5288;
  --color-freshly-purpleized-50: #f5f3ff;
  --color-freshly-purpleized-100: #ebe8ff;
  --color-freshly-purpleized-200: #d9d2ff;
  --color-freshly-purpleized-300: #c4bbef;
  --color-freshly-purpleized-400: #a69cd5;
  --color-freshly-purpleized-500: #8c81bb;
  --color-freshly-purpleized-600: #72689f;
  --color-freshly-purpleized-700: #5d5288;
  --color-freshly-purpleized-800: #493f6c;
  --color-freshly-purpleized-900: #383056;
  --color-freshly-purpleized-950: #231d39;
  --color-everglade: #2e3e31;
  --color-everglade-50: #eef9ef;
  --color-everglade-100: #e3efe5;
  --color-everglade-200: #cddcd0;
  --color-everglade-300: #b6c6b8;
  --color-everglade-400: #96a899;
  --color-everglade-500: #7c8e7f;
  --color-everglade-600: #637566;
  --color-everglade-700: #4f5f52;
  --color-everglade-800: #3e4c41;
  --color-everglade-900: #2e3e31;
  --color-everglade-950: #1e271f;
}