Walnut to Royal Neptune Color Palette

About this palette

Walnut to Royal Neptune is a 5-color warm, vintage palette: #723A00 (Walnut), #FDCFDC (Light Pink), #A15D6C (Cinnapink), #51BCD5 (High Dive), #003B48 (Royal Neptune). It mixes brown, pink, red, blue tones and feels warm overall. The strongest text pairing is #FDCFDC on #003B48 with a contrast ratio of 8.80:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Walnut	rgb(114, 58, 0)	hsl(31, 100%, 22%)
Light Pink	rgb(253, 207, 220)	hsl(343, 92%, 90%)
Cinnapink	rgb(161, 93, 108)	hsl(347, 27%, 50%)
High Dive	rgb(81, 188, 213)	hsl(191, 61%, 58%)
Royal Neptune	rgb(0, 59, 72)	hsl(191, 100%, 14%)

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.

Aa8.80:1 Very good#FDCFDC on #003B48
Aa8.80:1 Very good#003B48 on #FDCFDC
Aa6.52:1 Good#723A00 on #FDCFDC
Aa6.52:1 Good#FDCFDC on #723A00
Aa5.53:1 Good#51BCD5 on #003B48
Aa5.53:1 Good#003B48 on #51BCD5
Aa4.10:1 Poor#723A00 on #51BCD5
Aa4.10:1 Poor#51BCD5 on #723A00

Color blindness preview

CSS variables

/* Walnut to Royal Neptune — https://swatchly.xyz/palette/723a00-fdcfdc-a15d6c-51bcd5-003b48 */
:root {
  --walnut: #723a00;
  --light-pink: #fdcfdc;
  --cinnapink: #a15d6c;
  --high-dive: #51bcd5;
  --royal-neptune: #003b48;
}

Tailwind CSS v4

/* Walnut to Royal Neptune — https://swatchly.xyz/palette/723a00-fdcfdc-a15d6c-51bcd5-003b48 */
@theme {
  --color-walnut: #723a00;
  --color-walnut-50: #fff2ea;
  --color-walnut-100: #ffe6d4;
  --color-walnut-200: #fecca8;
  --color-walnut-300: #edb58d;
  --color-walnut-400: #d29669;
  --color-walnut-500: #b87b4c;
  --color-walnut-600: #9d6233;
  --color-walnut-700: #844d20;
  --color-walnut-800: #723a00;
  --color-walnut-900: #572d06;
  --color-walnut-950: #3a1b01;
  --color-light-pink: #fdcfdc;
  --color-light-pink-50: #fff6f9;
  --color-light-pink-100: #ffeaef;
  --color-light-pink-200: #fdcfdc;
  --color-light-pink-300: #e0bac5;
  --color-light-pink-400: #c198a4;
  --color-light-pink-500: #a57b88;
  --color-light-pink-600: #88616c;
  --color-light-pink-700: #6e4a55;
  --color-light-pink-800: #573842;
  --color-light-pink-900: #442a32;
  --color-light-pink-950: #2b191f;
  --color-cinnapink: #a15d6c;
  --color-cinnapink-50: #fff1f3;
  --color-cinnapink-100: #ffe5ea;
  --color-cinnapink-200: #ffcbd4;
  --color-cinnapink-300: #f1b2be;
  --color-cinnapink-400: #d6919f;
  --color-cinnapink-500: #bc7685;
  --color-cinnapink-600: #a15d6c;
  --color-cinnapink-700: #844655;
  --color-cinnapink-800: #6a3441;
  --color-cinnapink-900: #542631;
  --color-cinnapink-950: #36151e;
  --color-high-dive: #51bcd5;
  --color-high-dive-50: #eefbff;
  --color-high-dive-100: #d9f7ff;
  --color-high-dive-200: #a7ebfd;
  --color-high-dive-300: #87d8ed;
  --color-high-dive-400: #51bcd5;
  --color-high-dive-500: #2d9eb6;
  --color-high-dive-600: #008096;
  --color-high-dive-700: #006577;
  --color-high-dive-800: #004e5d;
  --color-high-dive-900: #003b47;
  --color-high-dive-950: #00242c;
  --color-royal-neptune: #003b48;
  --color-royal-neptune-50: #e6f9ff;
  --color-royal-neptune-100: #d1f2fc;
  --color-royal-neptune-200: #b9dfeb;
  --color-royal-neptune-300: #9dc9d7;
  --color-royal-neptune-400: #7aabb9;
  --color-royal-neptune-500: #5d909e;
  --color-royal-neptune-600: #447583;
  --color-royal-neptune-700: #305e6a;
  --color-royal-neptune-800: #214a55;
  --color-royal-neptune-900: #003b48;
  --color-royal-neptune-950: #0a242b;
}