Royal Neptune to Mellow Marrow color palette

0A3A48Royal Neptune 7A544ARoasted A17761Equestrienne 2EB8CDGlassmith E8C5B5Mellow Marrow

About this palette

Royal Neptune to Mellow Marrow is a 5-color warm, vintage palette: #0A3A48 (Royal Neptune), #7A544A (Roasted), #A17761 (Equestrienne), #2EB8CD (Glassmith), #E8C5B5 (Mellow Marrow). It mixes blue, red, orange, turquoise tones and feels warm overall. The strongest text pairing is #0A3A48 on #E8C5B5 with a contrast ratio of 7.64:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Royal Neptune	rgb(10, 58, 72)	hsl(194, 76%, 16%)
Roasted	rgb(122, 84, 74)	hsl(12, 24%, 38%)
Equestrienne	rgb(161, 119, 97)	hsl(21, 25%, 51%)
Glassmith	rgb(46, 184, 205)	hsl(188, 63%, 49%)
Mellow Marrow	rgb(232, 197, 181)	hsl(19, 53%, 81%)

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.64:1 Very good#0A3A48 on #E8C5B5
Aa7.64:1 Very good#E8C5B5 on #0A3A48
Aa5.17:1 Good#0A3A48 on #2EB8CD
Aa5.17:1 Good#2EB8CD on #0A3A48
Aa4.10:1 Poor#7A544A on #E8C5B5
Aa4.10:1 Poor#E8C5B5 on #7A544A
Aa3.11:1 Poor#0A3A48 on #A17761
Aa3.11:1 Poor#A17761 on #0A3A48

Color blindness preview

CSS variables

/* Royal Neptune to Mellow Marrow — https://swatchly.xyz/palette/0a3a48-7a544a-a17761-2eb8cd-e8c5b5 */
:root {
  --royal-neptune: #0a3a48;
  --roasted: #7a544a;
  --equestrienne: #a17761;
  --glassmith: #2eb8cd;
  --mellow-marrow: #e8c5b5;
}

Tailwind CSS v4

/* Royal Neptune to Mellow Marrow — https://swatchly.xyz/palette/0a3a48-7a544a-a17761-2eb8cd-e8c5b5 */
@theme {
  --color-royal-neptune: #0a3a48;
  --color-royal-neptune-50: #e7f9ff;
  --color-royal-neptune-100: #d4f1fc;
  --color-royal-neptune-200: #bcdeeb;
  --color-royal-neptune-300: #a1c8d7;
  --color-royal-neptune-400: #7eaab9;
  --color-royal-neptune-500: #628e9e;
  --color-royal-neptune-600: #487483;
  --color-royal-neptune-700: #355d6a;
  --color-royal-neptune-800: #254955;
  --color-royal-neptune-900: #0a3a48;
  --color-royal-neptune-950: #0d242b;
  --color-roasted: #7a544a;
  --color-roasted-50: #fff2ee;
  --color-roasted-100: #ffe4dd;
  --color-roasted-200: #f2d1c8;
  --color-roasted-300: #e0bbb1;
  --color-roasted-400: #c49c91;
  --color-roasted-500: #ab8277;
  --color-roasted-600: #90695f;
  --color-roasted-700: #7a544a;
  --color-roasted-800: #614138;
  --color-roasted-900: #4c312a;
  --color-roasted-950: #311e18;
  --color-equestrienne: #a17761;
  --color-equestrienne-50: #fff1ea;
  --color-equestrienne-100: #ffe3d5;
  --color-equestrienne-200: #f0cdbb;
  --color-equestrienne-300: #dcb4a0;
  --color-equestrienne-400: #bd937d;
  --color-equestrienne-500: #a17761;
  --color-equestrienne-600: #855e49;
  --color-equestrienne-700: #6c4936;
  --color-equestrienne-800: #573828;
  --color-equestrienne-900: #442a1c;
  --color-equestrienne-950: #2c190f;
  --color-glassmith: #2eb8cd;
  --color-glassmith-50: #e6fbff;
  --color-glassmith-100: #c9f6ff;
  --color-glassmith-200: #96eaf9;
  --color-glassmith-300: #71d5e7;
  --color-glassmith-400: #2eb8cd;
  --color-glassmith-500: #009aae;
  --color-glassmith-600: #007c8c;
  --color-glassmith-700: #00626f;
  --color-glassmith-800: #004d57;
  --color-glassmith-900: #003b43;
  --color-glassmith-950: #00242a;
  --color-mellow-marrow: #e8c5b5;
  --color-mellow-marrow-50: #ffe9df;
  --color-mellow-marrow-100: #f5ddd2;
  --color-mellow-marrow-200: #e8c5b5;
  --color-mellow-marrow-300: #d0b1a3;
  --color-mellow-marrow-400: #b39384;
  --color-mellow-marrow-500: #997a6b;
  --color-mellow-marrow-600: #7f6153;
  --color-mellow-marrow-700: #684d40;
  --color-mellow-marrow-800: #543c31;
  --color-mellow-marrow-900: #422e24;
  --color-mellow-marrow-950: #2a1b15;
}