Milky Waves to Astral Nomad Color Palette

About this palette

Milky Waves to Astral Nomad is a 5-color warm, earthy, vintage palette: #5EB2D9 (Milky Waves), #D7B4A3 (Soba), #A7744F (Pecan), #73390B (Walnut), #213943 (Astral Nomad). It mixes blue, orange, brown, gray tones and feels warm overall. The strongest text pairing is #D7B4A3 on #213943 with a contrast ratio of 6.32:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Milky Waves	rgb(94, 178, 217)	hsl(199, 62%, 61%)
Soba	rgb(215, 180, 163)	hsl(20, 39%, 74%)
Pecan	rgb(167, 116, 79)	hsl(25, 36%, 48%)
Walnut	rgb(115, 57, 11)	hsl(27, 83%, 25%)
Astral Nomad	rgb(33, 57, 67)	hsl(198, 34%, 20%)

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.

Aa6.32:1 Good#D7B4A3 on #213943
Aa6.32:1 Good#213943 on #D7B4A3
Aa5.11:1 Good#5EB2D9 on #213943
Aa5.11:1 Good#213943 on #5EB2D9
Aa4.72:1 Good#D7B4A3 on #73390B
Aa4.72:1 Good#73390B on #D7B4A3
Aa3.81:1 Poor#5EB2D9 on #73390B
Aa3.81:1 Poor#73390B on #5EB2D9

Color blindness preview

CSS variables

/* Milky Waves to Astral Nomad — https://swatchly.xyz/palette/5eb2d9-d7b4a3-a7744f-73390b-213943 */
:root {
  --milky-waves: #5eb2d9;
  --soba: #d7b4a3;
  --pecan: #a7744f;
  --walnut: #73390b;
  --astral-nomad: #213943;
}

Tailwind CSS v4

/* Milky Waves to Astral Nomad — https://swatchly.xyz/palette/5eb2d9-d7b4a3-a7744f-73390b-213943 */
@theme {
  --color-milky-waves: #5eb2d9;
  --color-milky-waves-50: #eef9ff;
  --color-milky-waves-100: #daf2ff;
  --color-milky-waves-200: #aee4ff;
  --color-milky-waves-300: #8cd0f1;
  --color-milky-waves-400: #5eb2d9;
  --color-milky-waves-500: #4095bb;
  --color-milky-waves-600: #1e799d;
  --color-milky-waves-700: #006081;
  --color-milky-waves-800: #004b65;
  --color-milky-waves-900: #00394e;
  --color-milky-waves-950: #002332;
  --color-soba: #d7b4a3;
  --color-soba-50: #ffefe8;
  --color-soba-100: #fae3d7;
  --color-soba-200: #e9cdc0;
  --color-soba-300: #d7b4a3;
  --color-soba-400: #b79686;
  --color-soba-500: #9c7b6b;
  --color-soba-600: #816253;
  --color-soba-700: #684d3f;
  --color-soba-800: #533b30;
  --color-soba-900: #422d23;
  --color-soba-950: #2a1b14;
  --color-pecan: #a7744f;
  --color-pecan-50: #fff1e8;
  --color-pecan-100: #ffe3d0;
  --color-pecan-200: #f6cbae;
  --color-pecan-300: #e2b291;
  --color-pecan-400: #c4906c;
  --color-pecan-500: #a7744f;
  --color-pecan-600: #8b5b37;
  --color-pecan-700: #714626;
  --color-pecan-800: #5b3619;
  --color-pecan-900: #48280f;
  --color-pecan-950: #2f1806;
  --color-walnut: #73390b;
  --color-walnut-50: #fff2eb;
  --color-walnut-100: #ffe5d6;
  --color-walnut-200: #ffcbac;
  --color-walnut-300: #eeb491;
  --color-walnut-400: #d3946d;
  --color-walnut-500: #ba7a51;
  --color-walnut-600: #9e6138;
  --color-walnut-700: #854c26;
  --color-walnut-800: #73390b;
  --color-walnut-900: #582c0c;
  --color-walnut-950: #3b1a04;
  --color-astral-nomad: #213943;
  --color-astral-nomad-50: #e9f8ff;
  --color-astral-nomad-100: #ddeff6;
  --color-astral-nomad-200: #c7dbe5;
  --color-astral-nomad-300: #aec5d0;
  --color-astral-nomad-400: #8da7b2;
  --color-astral-nomad-500: #728c97;
  --color-astral-nomad-600: #58727d;
  --color-astral-nomad-700: #445b65;
  --color-astral-nomad-800: #344851;
  --color-astral-nomad-900: #213943;
  --color-astral-nomad-950: #162329;
}