Acai to Bleached Olive Color Palette

About this palette

Acai to Bleached Olive is a 5-color cool, earthy palette: #4E2C5A (Acai), #8CD4A2 (Tadorna Teal), #2F87BF (King Triton), #7A4216 (Walnut), #52BF82 (Bleached Olive). It mixes purple, green, blue, brown tones and feels cool overall. The strongest text pairing is #4E2C5A on #8CD4A2 with a contrast ratio of 6.58:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Acai	rgb(78, 44, 90)	hsl(284, 34%, 26%)
Tadorna Teal	rgb(140, 212, 162)	hsl(138, 46%, 69%)
King Triton	rgb(47, 135, 191)	hsl(203, 61%, 47%)
Walnut	rgb(122, 66, 22)	hsl(26, 69%, 28%)
Bleached Olive	rgb(82, 191, 130)	hsl(146, 46%, 54%)

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.58:1 Good#4E2C5A on #8CD4A2
Aa6.58:1 Good#8CD4A2 on #4E2C5A
Aa4.99:1 Good#4E2C5A on #52BF82
Aa4.99:1 Good#52BF82 on #4E2C5A
Aa4.60:1 Good#8CD4A2 on #7A4216
Aa4.60:1 Good#7A4216 on #8CD4A2
Aa3.49:1 Poor#7A4216 on #52BF82
Aa3.49:1 Poor#52BF82 on #7A4216

Color blindness preview

CSS variables

/* Acai to Bleached Olive — https://swatchly.xyz/palette/4e2c5a-8cd4a2-2f87bf-7a4216-52bf82 */
:root {
  --acai: #4e2c5a;
  --tadorna-teal: #8cd4a2;
  --king-triton: #2f87bf;
  --walnut: #7a4216;
  --bleached-olive: #52bf82;
}

Tailwind CSS v4

/* Acai to Bleached Olive — https://swatchly.xyz/palette/4e2c5a-8cd4a2-2f87bf-7a4216-52bf82 */
@theme {
  --color-acai: #4e2c5a;
  --color-acai-50: #fbf1ff;
  --color-acai-100: #f7e3ff;
  --color-acai-200: #e9cbf4;
  --color-acai-300: #d3b1e0;
  --color-acai-400: #b48fc2;
  --color-acai-500: #9872a5;
  --color-acai-600: #7b5888;
  --color-acai-700: #61426c;
  --color-acai-800: #4e2c5a;
  --color-acai-900: #3a2442;
  --color-acai-950: #24142a;
  --color-tadorna-teal: #8cd4a2;
  --color-tadorna-teal-50: #deffe6;
  --color-tadorna-teal-100: #ccf8d8;
  --color-tadorna-teal-200: #b2e6c0;
  --color-tadorna-teal-300: #8cd4a2;
  --color-tadorna-teal-400: #6fb385;
  --color-tadorna-teal-500: #519869;
  --color-tadorna-teal-600: #367c50;
  --color-tadorna-teal-700: #22643c;
  --color-tadorna-teal-800: #134f2c;
  --color-tadorna-teal-900: #083d20;
  --color-tadorna-teal-950: #022712;
  --color-king-triton: #2f87bf;
  --color-king-triton-50: #eaf6ff;
  --color-king-triton-100: #d4ecff;
  --color-king-triton-200: #aadbff;
  --color-king-triton-300: #7dc5f9;
  --color-king-triton-400: #52a4dc;
  --color-king-triton-500: #2f87bf;
  --color-king-triton-600: #0d6da2;
  --color-king-triton-700: #005683;
  --color-king-triton-800: #004468;
  --color-king-triton-900: #003452;
  --color-king-triton-950: #002136;
  --color-walnut: #7a4216;
  --color-walnut-50: #fff2ea;
  --color-walnut-100: #ffe6d5;
  --color-walnut-200: #fdcbab;
  --color-walnut-300: #eab28e;
  --color-walnut-400: #cd9068;
  --color-walnut-500: #b1744a;
  --color-walnut-600: #935a31;
  --color-walnut-700: #7a4216;
  --color-walnut-800: #603311;
  --color-walnut-900: #4b2608;
  --color-walnut-950: #311603;
  --color-bleached-olive: #52bf82;
  --color-bleached-olive-50: #e3ffec;
  --color-bleached-olive-100: #c2ffd7;
  --color-bleached-olive-200: #a5efc0;
  --color-bleached-olive-300: #85dba6;
  --color-bleached-olive-400: #52bf82;
  --color-bleached-olive-500: #30a167;
  --color-bleached-olive-600: #00844d;
  --color-bleached-olive-700: #00693c;
  --color-bleached-olive-800: #00522e;
  --color-bleached-olive-900: #003f22;
  --color-bleached-olive-950: #002713;
}