Neon Boneyard to Waterworld color palette

DBCDFFNeon Boneyard 162400Midnight Pines FF7E60Slippery Salmon 4E5400Godzilla DC6B50Jelly Slug 00707DWaterworld

Open in generator Export PNG, PDF, ASE…

About this palette

Neon Boneyard to Waterworld is a 6-color palette: #DBCDFF (Neon Boneyard), #162400 (Midnight Pines), #FF7E60 (Slippery Salmon), #4E5400 (Godzilla), #DC6B50 (Jelly Slug), #00707D (Waterworld). It mixes purple, green, red, turquoise tones and feels balanced overall. The strongest text pairing is #DBCDFF on #162400 with a contrast ratio of 11.03:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Neon Boneyard	rgb(219, 205, 255)	hsl(257, 100%, 90%)
Midnight Pines	rgb(22, 36, 0)	hsl(83, 100%, 7%)
Slippery Salmon	rgb(255, 126, 96)	hsl(11, 100%, 69%)
Godzilla	rgb(78, 84, 0)	hsl(64, 100%, 16%)
Jelly Slug	rgb(220, 107, 80)	hsl(12, 67%, 59%)
Waterworld	rgb(0, 112, 125)	hsl(186, 100%, 25%)

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.03:1 Very good#DBCDFF on #162400
Aa11.03:1 Very good#162400 on #DBCDFF
Aa6.53:1 Good#162400 on #FF7E60
Aa6.53:1 Good#FF7E60 on #162400
Aa5.47:1 Good#DBCDFF on #4E5400
Aa5.47:1 Good#4E5400 on #DBCDFF
Aa4.87:1 Good#162400 on #DC6B50
Aa4.87:1 Good#DC6B50 on #162400

Color blindness preview

CSS variables

/* Neon Boneyard to Waterworld — https://swatchly.xyz/palette/dbcdff-162400-ff7e60-4e5400-dc6b50-00707d */
:root {
  --neon-boneyard: #dbcdff;
  --midnight-pines: #162400;
  --slippery-salmon: #ff7e60;
  --godzilla: #4e5400;
  --jelly-slug: #dc6b50;
  --waterworld: #00707d;
}

Tailwind CSS v4

/* Neon Boneyard to Waterworld — https://swatchly.xyz/palette/dbcdff-162400-ff7e60-4e5400-dc6b50-00707d */
@theme {
  --color-neon-boneyard: #dbcdff;
  --color-neon-boneyard-50: #f5f2ff;
  --color-neon-boneyard-100: #ece6ff;
  --color-neon-boneyard-200: #dbcdff;
  --color-neon-boneyard-300: #c4b8e2;
  --color-neon-boneyard-400: #a598c6;
  --color-neon-boneyard-500: #8a7dab;
  --color-neon-boneyard-600: #70638e;
  --color-neon-boneyard-700: #594d74;
  --color-neon-boneyard-800: #463b5e;
  --color-neon-boneyard-900: #362d4a;
  --color-neon-boneyard-950: #211b30;
  --color-midnight-pines: #162400;
  --color-midnight-pines-50: #eefae2;
  --color-midnight-pines-100: #e4f1d5;
  --color-midnight-pines-200: #cfdebe;
  --color-midnight-pines-300: #b7c8a4;
  --color-midnight-pines-400: #97a981;
  --color-midnight-pines-500: #7b8e65;
  --color-midnight-pines-600: #61734c;
  --color-midnight-pines-700: #4c5b38;
  --color-midnight-pines-800: #3a4729;
  --color-midnight-pines-900: #2c371d;
  --color-midnight-pines-950: #162400;
  --color-slippery-salmon: #ff7e60;
  --color-slippery-salmon-50: #fff6f3;
  --color-slippery-salmon-100: #ffeae5;
  --color-slippery-salmon-200: #ffd1c5;
  --color-slippery-salmon-300: #ffb29f;
  --color-slippery-salmon-400: #ff7e60;
  --color-slippery-salmon-500: #dd6044;
  --color-slippery-salmon-600: #bc4226;
  --color-slippery-salmon-700: #9c2b0f;
  --color-slippery-salmon-800: #7e1a00;
  --color-slippery-salmon-900: #621200;
  --color-slippery-salmon-950: #3f0800;
  --color-godzilla: #4e5400;
  --color-godzilla-50: #f4fad2;
  --color-godzilla-100: #eaf0c3;
  --color-godzilla-200: #d5dca6;
  --color-godzilla-300: #bdc587;
  --color-godzilla-400: #9ca55f;
  --color-godzilla-500: #808840;
  --color-godzilla-600: #656c26;
  --color-godzilla-700: #4e5400;
  --color-godzilla-800: #3d4105;
  --color-godzilla-900: #2e3200;
  --color-godzilla-950: #1c1f00;
  --color-jelly-slug: #dc6b50;
  --color-jelly-slug-50: #fff5f2;
  --color-jelly-slug-100: #ffeae5;
  --color-jelly-slug-200: #ffd2c6;
  --color-jelly-slug-300: #ffb3a0;
  --color-jelly-slug-400: #f5886e;
  --color-jelly-slug-500: #dc6b50;
  --color-jelly-slug-600: #bb4e34;
  --color-jelly-slug-700: #9b361e;
  --color-jelly-slug-800: #7d240d;
  --color-jelly-slug-900: #631603;
  --color-jelly-slug-950: #410900;
  --color-waterworld: #00707d;
  --color-waterworld-50: #e1fbff;
  --color-waterworld-100: #c0f4fd;
  --color-waterworld-200: #a1e1eb;
  --color-waterworld-300: #80cad6;
  --color-waterworld-400: #55aab7;
  --color-waterworld-500: #328c9a;
  --color-waterworld-600: #00707d;
  --color-waterworld-700: #005963;
  --color-waterworld-800: #00464e;
  --color-waterworld-900: #00363d;
  --color-waterworld-950: #002227;
}