Black Olive to Holographic Lavender color palette

3A4032Black Olive 5E617CAdmiral Blue 928373Shipwreck B6AA94Desert Dune EBE8FFHolographic Lavender

About this palette

Black Olive to Holographic Lavender is a 5-color muted, gradient palette: #3A4032 (Black Olive), #5E617C (Admiral Blue), #928373 (Shipwreck), #B6AA94 (Desert Dune), #EBE8FF (Holographic Lavender). It mixes gray, purple, white tones and feels cool overall. The strongest text pairing is #3A4032 on #EBE8FF with a contrast ratio of 8.94:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Olive	rgb(58, 64, 50)	hsl(86, 12%, 22%)
Admiral Blue	rgb(94, 97, 124)	hsl(234, 14%, 43%)
Shipwreck	rgb(146, 131, 115)	hsl(31, 12%, 51%)
Desert Dune	rgb(182, 170, 148)	hsl(39, 19%, 65%)
Holographic Lavender	rgb(235, 232, 255)	hsl(248, 100%, 95%)

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.94:1 Very good#3A4032 on #EBE8FF
Aa8.94:1 Very good#EBE8FF on #3A4032
Aa5.04:1 Good#5E617C on #EBE8FF
Aa5.04:1 Good#EBE8FF on #5E617C
Aa4.68:1 Good#3A4032 on #B6AA94
Aa4.68:1 Good#B6AA94 on #3A4032
Aa3.06:1 Poor#928373 on #EBE8FF
Aa3.06:1 Poor#EBE8FF on #928373

Color blindness preview

CSS variables

/* Black Olive to Holographic Lavender — https://swatchly.xyz/palette/3a4032-5e617c-928373-b6aa94-ebe8ff */
:root {
  --black-olive: #3a4032;
  --admiral-blue: #5e617c;
  --shipwreck: #928373;
  --desert-dune: #b6aa94;
  --holographic-lavender: #ebe8ff;
}

Tailwind CSS v4

/* Black Olive to Holographic Lavender — https://swatchly.xyz/palette/3a4032-5e617c-928373-b6aa94-ebe8ff */
@theme {
  --color-black-olive: #3a4032;
  --color-black-olive-50: #f3f7ed;
  --color-black-olive-100: #e8ede2;
  --color-black-olive-200: #d4dacd;
  --color-black-olive-300: #bcc3b4;
  --color-black-olive-400: #9ca393;
  --color-black-olive-500: #7f8677;
  --color-black-olive-600: #646b5c;
  --color-black-olive-700: #4e5346;
  --color-black-olive-800: #3a4032;
  --color-black-olive-900: #2d3127;
  --color-black-olive-950: #1b1e17;
  --color-admiral-blue: #5e617c;
  --color-admiral-blue-50: #f3f4ff;
  --color-admiral-blue-100: #e5e8fc;
  --color-admiral-blue-200: #cfd2ea;
  --color-admiral-blue-300: #b7bad5;
  --color-admiral-blue-400: #9699b6;
  --color-admiral-blue-500: #797c99;
  --color-admiral-blue-600: #5e617c;
  --color-admiral-blue-700: #4a4c64;
  --color-admiral-blue-800: #393b50;
  --color-admiral-blue-900: #2c2e3f;
  --color-admiral-blue-950: #1b1c28;
  --color-shipwreck: #928373;
  --color-shipwreck-50: #fdf3ea;
  --color-shipwreck-100: #f3e9de;
  --color-shipwreck-200: #e1d5c8;
  --color-shipwreck-300: #ccbeb0;
  --color-shipwreck-400: #ad9e8f;
  --color-shipwreck-500: #928373;
  --color-shipwreck-600: #77695a;
  --color-shipwreck-700: #5f5345;
  --color-shipwreck-800: #4b4034;
  --color-shipwreck-900: #3a3127;
  --color-shipwreck-950: #251e17;
  --color-desert-dune: #b6aa94;
  --color-desert-dune-50: #fff8ec;
  --color-desert-dune-100: #f7f0e2;
  --color-desert-dune-200: #e6ddcd;
  --color-desert-dune-300: #d2c8b6;
  --color-desert-dune-400: #b6aa94;
  --color-desert-dune-500: #988d78;
  --color-desert-dune-600: #7c715c;
  --color-desert-dune-700: #625846;
  --color-desert-dune-800: #4d4434;
  --color-desert-dune-900: #3b3325;
  --color-desert-dune-950: #241f15;
  --color-holographic-lavender: #ebe8ff;
  --color-holographic-lavender-50: #f5f4ff;
  --color-holographic-lavender-100: #ebe8ff;
  --color-holographic-lavender-200: #d7d5e6;
  --color-holographic-lavender-300: #c1bed1;
  --color-holographic-lavender-400: #a19fb3;
  --color-holographic-lavender-500: #868398;
  --color-holographic-lavender-600: #6c697c;
  --color-holographic-lavender-700: #555364;
  --color-holographic-lavender-800: #42404f;
  --color-holographic-lavender-900: #33313e;
  --color-holographic-lavender-950: #1f1e27;
}