Hydra to Neptune’s Dream color palette

006BA1Hydra 07999CJava FFB5B7Young Salmon 004C4CTropical Forest D39500Retro Vibe 00355ENeptune’s Dream

Open in generator Export PNG, PDF, ASE…

About this palette

Hydra to Neptune’s Dream is a 6-color cool palette: #006BA1 (Hydra), #07999C (Java), #FFB5B7 (Young Salmon), #004C4C (Tropical Forest), #D39500 (Retro Vibe), #00355E (Neptune’s Dream). It mixes blue, turquoise, pink, yellow tones and feels cool overall. The strongest text pairing is #FFB5B7 on #00355E with a contrast ratio of 7.51:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hydra	rgb(0, 107, 161)	hsl(200, 100%, 32%)
Java	rgb(7, 153, 156)	hsl(181, 91%, 32%)
Young Salmon	rgb(255, 181, 183)	hsl(358, 100%, 85%)
Tropical Forest	rgb(0, 76, 76)	hsl(180, 100%, 15%)
Retro Vibe	rgb(211, 149, 0)	hsl(42, 100%, 41%)
Neptune’s Dream	rgb(0, 53, 94)	hsl(206, 100%, 18%)

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.51:1 Very good#FFB5B7 on #00355E
Aa7.51:1 Very good#00355E on #FFB5B7
Aa5.87:1 Good#FFB5B7 on #004C4C
Aa5.87:1 Good#004C4C on #FFB5B7
Aa4.83:1 Good#D39500 on #00355E
Aa4.83:1 Good#00355E on #D39500
Aa3.77:1 Poor#004C4C on #D39500
Aa3.77:1 Poor#D39500 on #004C4C

Color blindness preview

CSS variables

/* Hydra to Neptune’s Dream — https://swatchly.xyz/palette/006ba1-07999c-ffb5b7-004c4c-d39500-00355e */
:root {
  --hydra: #006ba1;
  --java: #07999c;
  --young-salmon: #ffb5b7;
  --tropical-forest: #004c4c;
  --retro-vibe: #d39500;
  --neptune-s-dream: #00355e;
}

Tailwind CSS v4

/* Hydra to Neptune’s Dream — https://swatchly.xyz/palette/006ba1-07999c-ffb5b7-004c4c-d39500-00355e */
@theme {
  --color-hydra: #006ba1;
  --color-hydra-50: #ecf7ff;
  --color-hydra-100: #d7edff;
  --color-hydra-200: #acdbff;
  --color-hydra-300: #7ec5f9;
  --color-hydra-400: #53a5dd;
  --color-hydra-500: #3087bf;
  --color-hydra-600: #006ba1;
  --color-hydra-700: #005581;
  --color-hydra-800: #004266;
  --color-hydra-900: #003350;
  --color-hydra-950: #002034;
  --color-java: #07999c;
  --color-java-50: #d5ffff;
  --color-java-100: #b8f9fa;
  --color-java-200: #99e8e9;
  --color-java-300: #75d3d5;
  --color-java-400: #44b5b7;
  --color-java-500: #07999c;
  --color-java-600: #007b7e;
  --color-java-700: #006264;
  --color-java-800: #004d4e;
  --color-java-900: #003b3c;
  --color-java-950: #002526;
  --color-young-salmon: #ffb5b7;
  --color-young-salmon-50: #fff9f9;
  --color-young-salmon-100: #ffeeee;
  --color-young-salmon-200: #ffd4d5;
  --color-young-salmon-300: #ffb5b7;
  --color-young-salmon-400: #d89597;
  --color-young-salmon-500: #bb777a;
  --color-young-salmon-600: #9c5b5e;
  --color-young-salmon-700: #7f4448;
  --color-young-salmon-800: #653235;
  --color-young-salmon-900: #4e2427;
  --color-young-salmon-950: #331417;
  --color-tropical-forest: #004c4c;
  --color-tropical-forest-50: #dbfdfc;
  --color-tropical-forest-100: #cef4f3;
  --color-tropical-forest-200: #b4e2e1;
  --color-tropical-forest-300: #97cccc;
  --color-tropical-forest-400: #72aead;
  --color-tropical-forest-500: #549291;
  --color-tropical-forest-600: #3a7776;
  --color-tropical-forest-700: #255f5f;
  --color-tropical-forest-800: #004c4c;
  --color-tropical-forest-900: #0c3a3a;
  --color-tropical-forest-950: #042424;
  --color-retro-vibe: #d39500;
  --color-retro-vibe-50: #fff4e2;
  --color-retro-vibe-100: #ffe8c5;
  --color-retro-vibe-200: #ffd082;
  --color-retro-vibe-300: #edb75b;
  --color-retro-vibe-400: #d39500;
  --color-retro-vibe-500: #b07c00;
  --color-retro-vibe-600: #8e6300;
  --color-retro-vibe-700: #714e00;
  --color-retro-vibe-800: #593c00;
  --color-retro-vibe-900: #452e00;
  --color-retro-vibe-950: #2c1c00;
  --color-neptune-s-dream: #00355e;
  --color-neptune-s-dream-50: #eef6ff;
  --color-neptune-s-dream-100: #dcedff;
  --color-neptune-s-dream-200: #b9dcff;
  --color-neptune-s-dream-300: #9bc6f0;
  --color-neptune-s-dream-400: #77a6d5;
  --color-neptune-s-dream-500: #5b8bba;
  --color-neptune-s-dream-600: #41709c;
  --color-neptune-s-dream-700: #2e5981;
  --color-neptune-s-dream-800: #1f4569;
  --color-neptune-s-dream-900: #00355e;
  --color-neptune-s-dream-950: #092137;
}