Envy to Tapioca Color Palette

About this palette

Envy to Tapioca is a 5-color muted, cool palette: #87A79C (Envy), #3B6258 (Ethereal Woods), #8F7C9D (Amorous), #221F27 (Ink Black), #E4C8B7 (Tapioca). It mixes turquoise, purple, gray, orange tones and feels cool overall. The strongest text pairing is #221F27 on #E4C8B7 with a contrast ratio of 10.24:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Envy	rgb(135, 167, 156)	hsl(159, 15%, 59%)
Ethereal Woods	rgb(59, 98, 88)	hsl(165, 25%, 31%)
Amorous	rgb(143, 124, 157)	hsl(275, 14%, 55%)
Ink Black	rgb(34, 31, 39)	hsl(262, 11%, 14%)
Tapioca	rgb(228, 200, 183)	hsl(23, 45%, 81%)

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.

Aa10.24:1 Very good#221F27 on #E4C8B7
Aa10.24:1 Very good#E4C8B7 on #221F27
Aa6.21:1 Good#87A79C on #221F27
Aa6.21:1 Good#221F27 on #87A79C
Aa4.31:1 Poor#3B6258 on #E4C8B7
Aa4.31:1 Poor#E4C8B7 on #3B6258
Aa4.28:1 Poor#8F7C9D on #221F27
Aa4.28:1 Poor#221F27 on #8F7C9D

Color blindness preview

CSS variables

/* Envy to Tapioca — https://swatchly.xyz/palette/87a79c-3b6258-8f7c9d-221f27-e4c8b7 */
:root {
  --envy: #87a79c;
  --ethereal-woods: #3b6258;
  --amorous: #8f7c9d;
  --ink-black: #221f27;
  --tapioca: #e4c8b7;
}

Tailwind CSS v4

/* Envy to Tapioca — https://swatchly.xyz/palette/87a79c-3b6258-8f7c9d-221f27-e4c8b7 */
@theme {
  --color-envy: #87a79c;
  --color-envy-50: #e7f9f2;
  --color-envy-100: #daefe8;
  --color-envy-200: #c3dcd3;
  --color-envy-300: #aac6bc;
  --color-envy-400: #87a79c;
  --color-envy-500: #6d8c81;
  --color-envy-600: #547268;
  --color-envy-700: #405b52;
  --color-envy-800: #304740;
  --color-envy-900: #233731;
  --color-envy-950: #14231e;
  --color-ethereal-woods: #3b6258;
  --color-ethereal-woods-50: #e4fbf4;
  --color-ethereal-woods-100: #d8f2ea;
  --color-ethereal-woods-200: #c1e0d7;
  --color-ethereal-woods-300: #a8cbc1;
  --color-ethereal-woods-400: #86ada2;
  --color-ethereal-woods-500: #6a9388;
  --color-ethereal-woods-600: #51786e;
  --color-ethereal-woods-700: #3b6258;
  --color-ethereal-woods-800: #2d4d45;
  --color-ethereal-woods-900: #203b34;
  --color-ethereal-woods-950: #112520;
  --color-amorous: #8f7c9d;
  --color-amorous-50: #f9f1ff;
  --color-amorous-100: #f2e5fc;
  --color-amorous-200: #dfd0eb;
  --color-amorous-300: #c9b8d6;
  --color-amorous-400: #ab98b9;
  --color-amorous-500: #8f7c9d;
  --color-amorous-600: #746281;
  --color-amorous-700: #5d4d69;
  --color-amorous-800: #493b54;
  --color-amorous-900: #392d41;
  --color-amorous-950: #241b2a;
  --color-ink-black: #221f27;
  --color-ink-black-50: #f6f4fa;
  --color-ink-black-100: #eceaf1;
  --color-ink-black-200: #d9d6de;
  --color-ink-black-300: #c2bfc8;
  --color-ink-black-400: #a39fa9;
  --color-ink-black-500: #88848e;
  --color-ink-black-600: #6e6a74;
  --color-ink-black-700: #57545d;
  --color-ink-black-800: #454249;
  --color-ink-black-900: #353339;
  --color-ink-black-950: #221f27;
  --color-tapioca: #e4c8b7;
  --color-tapioca-50: #fcebe1;
  --color-tapioca-100: #f2dfd4;
  --color-tapioca-200: #e4c8b7;
  --color-tapioca-300: #ccb4a5;
  --color-tapioca-400: #b09686;
  --color-tapioca-500: #967c6c;
  --color-tapioca-600: #7b6355;
  --color-tapioca-700: #644f41;
  --color-tapioca-800: #513e32;
  --color-tapioca-900: #3f2f25;
  --color-tapioca-950: #281c15;
}