Royal Neptune to Sky Color Palette

About this palette

Royal Neptune to Sky is a 5-color warm palette: #003A4A (Royal Neptune), #656000 (Forestial Outpost), #BE5DB4 (Lavendless), #E481BA (Pink Punk), #73D8FF (Sky). It mixes blue, brown, pink tones and feels warm overall. The strongest text pairing is #003A4A on #73D8FF with a contrast ratio of 7.63:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Royal Neptune	rgb(0, 58, 74)	hsl(193, 100%, 15%)
Forestial Outpost	rgb(101, 96, 0)	hsl(57, 100%, 20%)
Lavendless	rgb(190, 93, 180)	hsl(306, 43%, 55%)
Pink Punk	rgb(228, 129, 186)	hsl(325, 65%, 70%)
Sky	rgb(115, 216, 255)	hsl(197, 100%, 73%)

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.63:1 Very good#003A4A on #73D8FF
Aa7.63:1 Very good#73D8FF on #003A4A
Aa4.78:1 Good#003A4A on #E481BA
Aa4.78:1 Good#E481BA on #003A4A
Aa4.03:1 Poor#656000 on #73D8FF
Aa4.03:1 Poor#73D8FF on #656000
Aa3.18:1 Poor#003A4A on #BE5DB4
Aa3.18:1 Poor#BE5DB4 on #003A4A

Color blindness preview

CSS variables

/* Royal Neptune to Sky — https://swatchly.xyz/palette/003a4a-656000-be5db4-e481ba-73d8ff */
:root {
  --royal-neptune: #003a4a;
  --forestial-outpost: #656000;
  --lavendless: #be5db4;
  --pink-punk: #e481ba;
  --sky: #73d8ff;
}

Tailwind CSS v4

/* Royal Neptune to Sky — https://swatchly.xyz/palette/003a4a-656000-be5db4-e481ba-73d8ff */
@theme {
  --color-royal-neptune: #003a4a;
  --color-royal-neptune-50: #e8f8ff;
  --color-royal-neptune-100: #d1f1fe;
  --color-royal-neptune-200: #b9dfed;
  --color-royal-neptune-300: #9dc9d9;
  --color-royal-neptune-400: #7aaabc;
  --color-royal-neptune-500: #5d8fa1;
  --color-royal-neptune-600: #437485;
  --color-royal-neptune-700: #305d6d;
  --color-royal-neptune-800: #214957;
  --color-royal-neptune-900: #003a4a;
  --color-royal-neptune-950: #0a242c;
  --color-forestial-outpost: #656000;
  --color-forestial-outpost-50: #f9f8cd;
  --color-forestial-outpost-100: #f0efbe;
  --color-forestial-outpost-200: #dfdda3;
  --color-forestial-outpost-300: #cbc886;
  --color-forestial-outpost-400: #aeaa5f;
  --color-forestial-outpost-500: #949040;
  --color-forestial-outpost-600: #7a7625;
  --color-forestial-outpost-700: #656000;
  --color-forestial-outpost-800: #4f4b00;
  --color-forestial-outpost-900: #3d3900;
  --color-forestial-outpost-950: #262400;
  --color-lavendless: #be5db4;
  --color-lavendless-50: #fff0fc;
  --color-lavendless-100: #ffe1fa;
  --color-lavendless-200: #ffc1f6;
  --color-lavendless-300: #f69feb;
  --color-lavendless-400: #da7bcf;
  --color-lavendless-500: #be5db4;
  --color-lavendless-600: #a04297;
  --color-lavendless-700: #832d7c;
  --color-lavendless-800: #6a1d64;
  --color-lavendless-900: #54124f;
  --color-lavendless-950: #370733;
  --color-pink-punk: #e481ba;
  --color-pink-punk-50: #fff3f9;
  --color-pink-punk-100: #ffe6f3;
  --color-pink-punk-200: #ffc9e6;
  --color-pink-punk-300: #fca7d6;
  --color-pink-punk-400: #e481ba;
  --color-pink-punk-500: #c4659d;
  --color-pink-punk-600: #a54980;
  --color-pink-punk-700: #883467;
  --color-pink-punk-800: #6d2351;
  --color-pink-punk-900: #56173f;
  --color-pink-punk-950: #380b27;
  --color-sky: #73d8ff;
  --color-sky-50: #f2fbff;
  --color-sky-100: #dff5ff;
  --color-sky-200: #b2e8ff;
  --color-sky-300: #73d8ff;
  --color-sky-400: #57b5d9;
  --color-sky-500: #2c98bd;
  --color-sky-600: #007b9d;
  --color-sky-700: #00617c;
  --color-sky-800: #004b61;
  --color-sky-900: #00394a;
  --color-sky-950: #002330;
}