Neon Boneyard to Ahoy! Blue Color Palette

About this palette

Neon Boneyard to Ahoy! Blue is a 5-color cool palette: #E4BEFF (Neon Boneyard), #85C07B (Exhilarating Green), #22110C (Italian Roast), #00576F (Sea Creature), #007F9E (Ahoy! Blue). It mixes purple, green, black, blue tones and feels cool overall. The strongest text pairing is #E4BEFF on #22110C with a contrast ratio of 11.36:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Neon Boneyard	rgb(228, 190, 255)	hsl(275, 100%, 87%)
Exhilarating Green	rgb(133, 192, 123)	hsl(111, 35%, 62%)
Italian Roast	rgb(34, 17, 12)	hsl(14, 48%, 9%)
Sea Creature	rgb(0, 87, 111)	hsl(193, 100%, 22%)
Ahoy! Blue	rgb(0, 127, 158)	hsl(192, 100%, 31%)

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.

Aa11.36:1 Very good#E4BEFF on #22110C
Aa11.36:1 Very good#22110C on #E4BEFF
Aa8.52:1 Very good#85C07B on #22110C
Aa8.52:1 Very good#22110C on #85C07B
Aa5.06:1 Good#E4BEFF on #00576F
Aa5.06:1 Good#00576F on #E4BEFF
Aa3.93:1 Poor#22110C on #007F9E
Aa3.93:1 Poor#007F9E on #22110C

Color blindness preview

CSS variables

/* Neon Boneyard to Ahoy! Blue — https://swatchly.xyz/palette/e4beff-85c07b-22110c-00576f-007f9e */
:root {
  --neon-boneyard: #e4beff;
  --exhilarating-green: #85c07b;
  --italian-roast: #22110c;
  --sea-creature: #00576f;
  --ahoy-blue: #007f9e;
}

Tailwind CSS v4

/* Neon Boneyard to Ahoy! Blue — https://swatchly.xyz/palette/e4beff-85c07b-22110c-00576f-007f9e */
@theme {
  --color-neon-boneyard: #e4beff;
  --color-neon-boneyard-50: #f6ebff;
  --color-neon-boneyard-100: #f0dbff;
  --color-neon-boneyard-200: #e4beff;
  --color-neon-boneyard-300: #ccabe3;
  --color-neon-boneyard-400: #af8cc8;
  --color-neon-boneyard-500: #9571ae;
  --color-neon-boneyard-600: #7b5992;
  --color-neon-boneyard-700: #644578;
  --color-neon-boneyard-800: #503562;
  --color-neon-boneyard-900: #3e274e;
  --color-neon-boneyard-950: #281732;
  --color-exhilarating-green: #85c07b;
  --color-exhilarating-green-50: #efffec;
  --color-exhilarating-green-100: #dbfdd4;
  --color-exhilarating-green-200: #c4eebd;
  --color-exhilarating-green-300: #abdba3;
  --color-exhilarating-green-400: #85c07b;
  --color-exhilarating-green-500: #68a15f;
  --color-exhilarating-green-600: #4b8442;
  --color-exhilarating-green-700: #35692c;
  --color-exhilarating-green-800: #24521c;
  --color-exhilarating-green-900: #173f11;
  --color-exhilarating-green-950: #0a2606;
  --color-italian-roast: #22110c;
  --color-italian-roast-50: #fff2ee;
  --color-italian-roast-100: #f7e7e2;
  --color-italian-roast-200: #e6d3cd;
  --color-italian-roast-300: #d1bcb5;
  --color-italian-roast-400: #b39c95;
  --color-italian-roast-500: #957e77;
  --color-italian-roast-600: #78625c;
  --color-italian-roast-700: #5e4b45;
  --color-italian-roast-800: #473732;
  --color-italian-roast-900: #342723;
  --color-italian-roast-950: #22110c;
  --color-sea-creature: #00576f;
  --color-sea-creature-50: #e8f8ff;
  --color-sea-creature-100: #d1f1ff;
  --color-sea-creature-200: #acdff4;
  --color-sea-creature-300: #8dc8e0;
  --color-sea-creature-400: #65a8c2;
  --color-sea-creature-500: #468ba5;
  --color-sea-creature-600: #2a6f87;
  --color-sea-creature-700: #00576f;
  --color-sea-creature-800: #064456;
  --color-sea-creature-900: #013444;
  --color-sea-creature-950: #00202b;
  --color-ahoy-blue: #007f9e;
  --color-ahoy-blue-50: #e8f8ff;
  --color-ahoy-blue-100: #d2f3ff;
  --color-ahoy-blue-200: #a3e6fe;
  --color-ahoy-blue-300: #83d2ed;
  --color-ahoy-blue-400: #58b4d3;
  --color-ahoy-blue-500: #3399b9;
  --color-ahoy-blue-600: #007f9e;
  --color-ahoy-blue-700: #00657e;
  --color-ahoy-blue-800: #004f63;
  --color-ahoy-blue-900: #003c4d;
  --color-ahoy-blue-950: #002631;
}