Astral Nomad to Savoury Salmon Color Palette

About this palette

Astral Nomad to Savoury Salmon is a 5-color muted, warm, vintage palette: #203A4B (Astral Nomad), #ACCCDD (Life at Sea), #564E2E (Jungle King), #997873 (Hemp), #D09B8F (Savoury Salmon). It mixes blue, brown, red tones and feels warm overall. The strongest text pairing is #203A4B on #ACCCDD with a contrast ratio of 7.03:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Astral Nomad	rgb(32, 58, 75)	hsl(204, 40%, 21%)
Life at Sea	rgb(172, 204, 221)	hsl(201, 42%, 77%)
Jungle King	rgb(86, 78, 46)	hsl(48, 30%, 26%)
Hemp	rgb(153, 120, 115)	hsl(8, 16%, 53%)
Savoury Salmon	rgb(208, 155, 143)	hsl(11, 41%, 69%)

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.03:1 Very good#203A4B on #ACCCDD
Aa7.03:1 Very good#ACCCDD on #203A4B
Aa4.96:1 Good#203A4B on #D09B8F
Aa4.96:1 Good#D09B8F on #203A4B
Aa4.93:1 Good#ACCCDD on #564E2E
Aa4.93:1 Good#564E2E on #ACCCDD
Aa3.47:1 Poor#564E2E on #D09B8F
Aa3.47:1 Poor#D09B8F on #564E2E

Color blindness preview

CSS variables

/* Astral Nomad to Savoury Salmon — https://swatchly.xyz/palette/203a4b-acccdd-564e2e-997873-d09b8f */
:root {
  --astral-nomad: #203a4b;
  --life-at-sea: #acccdd;
  --jungle-king: #564e2e;
  --hemp: #997873;
  --savoury-salmon: #d09b8f;
}

Tailwind CSS v4

/* Astral Nomad to Savoury Salmon — https://swatchly.xyz/palette/203a4b-acccdd-564e2e-997873-d09b8f */
@theme {
  --color-astral-nomad: #203a4b;
  --color-astral-nomad-50: #ecf7ff;
  --color-astral-nomad-100: #dbeefc;
  --color-astral-nomad-200: #c5dbeb;
  --color-astral-nomad-300: #abc5d7;
  --color-astral-nomad-400: #8ba7ba;
  --color-astral-nomad-500: #708ca0;
  --color-astral-nomad-600: #577285;
  --color-astral-nomad-700: #435c6d;
  --color-astral-nomad-800: #334958;
  --color-astral-nomad-900: #203a4b;
  --color-astral-nomad-950: #16242e;
  --color-life-at-sea: #acccdd;
  --color-life-at-sea-50: #f0faff;
  --color-life-at-sea-100: #dff2fd;
  --color-life-at-sea-200: #c9e0ed;
  --color-life-at-sea-300: #acccdd;
  --color-life-at-sea-400: #8eabbb;
  --color-life-at-sea-500: #708f9f;
  --color-life-at-sea-600: #567382;
  --color-life-at-sea-700: #405b69;
  --color-life-at-sea-800: #2f4753;
  --color-life-at-sea-900: #223640;
  --color-life-at-sea-950: #132129;
  --color-jungle-king: #564e2e;
  --color-jungle-king-50: #faf5e1;
  --color-jungle-king-100: #f1ecd5;
  --color-jungle-king-200: #ddd6bb;
  --color-jungle-king-300: #c6bea0;
  --color-jungle-king-400: #a69e7c;
  --color-jungle-king-500: #8a815f;
  --color-jungle-king-600: #6e6646;
  --color-jungle-king-700: #564e2e;
  --color-jungle-king-800: #433d24;
  --color-jungle-king-900: #342e1a;
  --color-jungle-king-950: #201c0d;
  --color-hemp: #997873;
  --color-hemp-50: #fff0ee;
  --color-hemp-100: #fbe3df;
  --color-hemp-200: #e9cdc9;
  --color-hemp-300: #d4b5b0;
  --color-hemp-400: #b5948f;
  --color-hemp-500: #997873;
  --color-hemp-600: #7e5f5a;
  --color-hemp-700: #664a46;
  --color-hemp-800: #513936;
  --color-hemp-900: #402c29;
  --color-hemp-950: #291a18;
  --color-savoury-salmon: #d09b8f;
  --color-savoury-salmon-50: #fff6f4;
  --color-savoury-salmon-100: #ffeae6;
  --color-savoury-salmon-200: #fbd3ca;
  --color-savoury-salmon-300: #e9bcb1;
  --color-savoury-salmon-400: #d09b8f;
  --color-savoury-salmon-500: #b17e73;
  --color-savoury-salmon-600: #936358;
  --color-savoury-salmon-700: #784c42;
  --color-savoury-salmon-800: #5f3931;
  --color-savoury-salmon-900: #4a2a23;
  --color-savoury-salmon-950: #2f1813;
}