Bruise to Green Olive Color Palette

About this palette

Bruise to Green Olive is a 5-color cool palette: #813F6C (Bruise), #004333 (Zucchini), #B4BC95 (Green Tea), #D1D2FF (Icy Plains), #86905D (Green Olive). It mixes red, turquoise, green, purple tones and feels cool overall. The strongest text pairing is #004333 on #D1D2FF with a contrast ratio of 7.77:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bruise	rgb(129, 63, 108)	hsl(319, 34%, 38%)
Zucchini	rgb(0, 67, 51)	hsl(166, 100%, 13%)
Green Tea	rgb(180, 188, 149)	hsl(72, 23%, 66%)
Icy Plains	rgb(209, 210, 255)	hsl(239, 100%, 91%)
Green Olive	rgb(134, 144, 93)	hsl(72, 22%, 46%)

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.

Aa7.77:1 Very good#004333 on #D1D2FF
Aa7.77:1 Very good#D1D2FF on #004333
Aa5.71:1 Good#004333 on #B4BC95
Aa5.71:1 Good#B4BC95 on #004333
Aa5.02:1 Good#813F6C on #D1D2FF
Aa5.02:1 Good#D1D2FF on #813F6C
Aa3.69:1 Poor#813F6C on #B4BC95
Aa3.69:1 Poor#B4BC95 on #813F6C

Color blindness preview

CSS variables

/* Bruise to Green Olive — https://swatchly.xyz/palette/813f6c-004333-b4bc95-d1d2ff-86905d */
:root {
  --bruise: #813f6c;
  --zucchini: #004333;
  --green-tea: #b4bc95;
  --icy-plains: #d1d2ff;
  --green-olive: #86905d;
}

Tailwind CSS v4

/* Bruise to Green Olive — https://swatchly.xyz/palette/813f6c-004333-b4bc95-d1d2ff-86905d */
@theme {
  --color-bruise: #813f6c;
  --color-bruise-50: #fff0f9;
  --color-bruise-100: #ffe1f3;
  --color-bruise-200: #fec4e8;
  --color-bruise-300: #ecacd5;
  --color-bruise-400: #d08ab8;
  --color-bruise-500: #b56f9d;
  --color-bruise-600: #995583;
  --color-bruise-700: #813f6c;
  --color-bruise-800: #663055;
  --color-bruise-900: #512242;
  --color-bruise-950: #35132a;
  --color-zucchini: #004333;
  --color-zucchini-50: #defef2;
  --color-zucchini-100: #d1f5e7;
  --color-zucchini-200: #b8e3d3;
  --color-zucchini-300: #9ccdbc;
  --color-zucchini-400: #79b09d;
  --color-zucchini-500: #5d9682;
  --color-zucchini-600: #447b69;
  --color-zucchini-700: #306554;
  --color-zucchini-800: #215142;
  --color-zucchini-900: #004333;
  --color-zucchini-950: #0a2a20;
  --color-green-tea: #b4bc95;
  --color-green-tea-50: #eef3dc;
  --color-green-tea-100: #e2e8cd;
  --color-green-tea-200: #cdd3b4;
  --color-green-tea-300: #b4bc95;
  --color-green-tea-400: #979e79;
  --color-green-tea-500: #7d8560;
  --color-green-tea-600: #656c49;
  --color-green-tea-700: #505636;
  --color-green-tea-800: #3f4428;
  --color-green-tea-900: #31361e;
  --color-green-tea-950: #1e2110;
  --color-icy-plains: #d1d2ff;
  --color-icy-plains-50: #f3f3ff;
  --color-icy-plains-100: #e7e8ff;
  --color-icy-plains-200: #d1d2ff;
  --color-icy-plains-300: #bbbce2;
  --color-icy-plains-400: #9c9dc6;
  --color-icy-plains-500: #8181aa;
  --color-icy-plains-600: #67678e;
  --color-icy-plains-700: #515174;
  --color-icy-plains-800: #3f3f5d;
  --color-icy-plains-900: #30304a;
  --color-icy-plains-950: #1d1d30;
  --color-green-olive: #86905d;
  --color-green-olive-50: #f3fadc;
  --color-green-olive-100: #eaf1d0;
  --color-green-olive-200: #d6dfb8;
  --color-green-olive-300: #c0c99d;
  --color-green-olive-400: #a1ab79;
  --color-green-olive-500: #86905d;
  --color-green-olive-600: #6b7443;
  --color-green-olive-700: #545d2f;
  --color-green-olive-800: #414820;
  --color-green-olive-900: #323715;
  --color-green-olive-950: #1e2209;
}