Neon Boneyard to Green Olive Color Palette

About this palette

Neon Boneyard to Green Olive is a 5-color cool palette: #D9C7FE (Neon Boneyard), #99C9CE (Continental Waters), #6E6D96 (Bureaucracy), #78362A (Ebi Brown), #848E52 (Green Olive). It mixes purple, turquoise, brown, green tones and feels cool overall. The strongest text pairing is #D9C7FE on #78362A with a contrast ratio of 5.74:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Neon Boneyard	rgb(217, 199, 254)	hsl(260, 96%, 89%)
Continental Waters	rgb(153, 201, 206)	hsl(186, 35%, 70%)
Bureaucracy	rgb(110, 109, 150)	hsl(241, 16%, 51%)
Ebi Brown	rgb(120, 54, 42)	hsl(9, 48%, 32%)
Green Olive	rgb(132, 142, 82)	hsl(70, 27%, 44%)

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.

Aa5.74:1 Good#D9C7FE on #78362A
Aa5.74:1 Good#78362A on #D9C7FE
Aa4.92:1 Good#99C9CE on #78362A
Aa4.92:1 Good#78362A on #99C9CE
Aa3.16:1 Poor#D9C7FE on #6E6D96
Aa3.16:1 Poor#6E6D96 on #D9C7FE

Color blindness preview

CSS variables

/* Neon Boneyard to Green Olive — https://swatchly.xyz/palette/d9c7fe-99c9ce-6e6d96-78362a-848e52 */
:root {
  --neon-boneyard: #d9c7fe;
  --continental-waters: #99c9ce;
  --bureaucracy: #6e6d96;
  --ebi-brown: #78362a;
  --green-olive: #848e52;
}

Tailwind CSS v4

/* Neon Boneyard to Green Olive — https://swatchly.xyz/palette/d9c7fe-99c9ce-6e6d96-78362a-848e52 */
@theme {
  --color-neon-boneyard: #d9c7fe;
  --color-neon-boneyard-50: #f3eeff;
  --color-neon-boneyard-100: #eae1ff;
  --color-neon-boneyard-200: #d9c7fe;
  --color-neon-boneyard-300: #c2b3e2;
  --color-neon-boneyard-400: #a594c6;
  --color-neon-boneyard-500: #8a79ac;
  --color-neon-boneyard-600: #716090;
  --color-neon-boneyard-700: #5a4b76;
  --color-neon-boneyard-800: #483a60;
  --color-neon-boneyard-900: #372c4c;
  --color-neon-boneyard-950: #221a31;
  --color-continental-waters: #99c9ce;
  --color-continental-waters-50: #dffafd;
  --color-continental-waters-100: #d2f1f4;
  --color-continental-waters-200: #badee1;
  --color-continental-waters-300: #99c9ce;
  --color-continental-waters-400: #7ca9ae;
  --color-continental-waters-500: #608e93;
  --color-continental-waters-600: #477478;
  --color-continental-waters-700: #335c61;
  --color-continental-waters-800: #24494d;
  --color-continental-waters-900: #19383c;
  --color-continental-waters-950: #0c2326;
  --color-bureaucracy: #6e6d96;
  --color-bureaucracy-50: #f4f4ff;
  --color-bureaucracy-100: #eaeaff;
  --color-bureaucracy-200: #d6d6f8;
  --color-bureaucracy-300: #c0c0e6;
  --color-bureaucracy-400: #a2a1cb;
  --color-bureaucracy-500: #8787b1;
  --color-bureaucracy-600: #6e6d96;
  --color-bureaucracy-700: #57567b;
  --color-bureaucracy-800: #434262;
  --color-bureaucracy-900: #33324d;
  --color-bureaucracy-950: #1f1e32;
  --color-ebi-brown: #78362a;
  --color-ebi-brown-50: #fff2ef;
  --color-ebi-brown-100: #ffe4df;
  --color-ebi-brown-200: #ffc6ba;
  --color-ebi-brown-300: #eeaa9c;
  --color-ebi-brown-400: #d08778;
  --color-ebi-brown-500: #b26a5c;
  --color-ebi-brown-600: #924f42;
  --color-ebi-brown-700: #78362a;
  --color-ebi-brown-800: #5d2a21;
  --color-ebi-brown-900: #4a1f17;
  --color-ebi-brown-950: #2f110c;
  --color-green-olive: #848e52;
  --color-green-olive-50: #f3fad7;
  --color-green-olive-100: #e9f1ca;
  --color-green-olive-200: #d5deb0;
  --color-green-olive-300: #bec894;
  --color-green-olive-400: #9fa96f;
  --color-green-olive-500: #848e52;
  --color-green-olive-600: #6a7339;
  --color-green-olive-700: #535b25;
  --color-green-olive-800: #414717;
  --color-green-olive-900: #31370d;
  --color-green-olive-950: #1e2205;
}