Ivory Tower to Astral Nomad Color Palette

About this palette

Ivory Tower to Astral Nomad is a 5-color muted, gradient palette: #FFF1EE (Ivory Tower), #BBC2D6 (Plein Air), #AB8780 (Earthbound), #67604C (Ivy Topiary), #20383C (Astral Nomad). It mixes white, gray, red tones and feels warm overall. The strongest text pairing is #FFF1EE on #20383C with a contrast ratio of 11.27:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ivory Tower	rgb(255, 241, 238)	hsl(11, 100%, 97%)
Plein Air	rgb(187, 194, 214)	hsl(224, 25%, 79%)
Earthbound	rgb(171, 135, 128)	hsl(10, 20%, 59%)
Ivy Topiary	rgb(103, 96, 76)	hsl(44, 15%, 35%)
Astral Nomad	rgb(32, 56, 60)	hsl(189, 30%, 18%)

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.

Aa11.27:1 Very good#FFF1EE on #20383C
Aa11.27:1 Very good#20383C on #FFF1EE
Aa6.97:1 Good#BBC2D6 on #20383C
Aa6.97:1 Good#20383C on #BBC2D6
Aa5.68:1 Good#FFF1EE on #67604C
Aa5.68:1 Good#67604C on #FFF1EE
Aa3.85:1 Poor#AB8780 on #20383C
Aa3.85:1 Poor#20383C on #AB8780

Color blindness preview

CSS variables

/* Ivory Tower to Astral Nomad — https://swatchly.xyz/palette/fff1ee-bbc2d6-ab8780-67604c-20383c */
:root {
  --ivory-tower: #fff1ee;
  --plein-air: #bbc2d6;
  --earthbound: #ab8780;
  --ivy-topiary: #67604c;
  --astral-nomad: #20383c;
}

Tailwind CSS v4

/* Ivory Tower to Astral Nomad — https://swatchly.xyz/palette/fff1ee-bbc2d6-ab8780-67604c-20383c */
@theme {
  --color-ivory-tower: #fff1ee;
  --color-ivory-tower-50: #fff1ee;
  --color-ivory-tower-100: #f1e8e7;
  --color-ivory-tower-200: #dfd4d2;
  --color-ivory-tower-300: #c9bebb;
  --color-ivory-tower-400: #ab9e9b;
  --color-ivory-tower-500: #8f8380;
  --color-ivory-tower-600: #746966;
  --color-ivory-tower-700: #5d5250;
  --color-ivory-tower-800: #49403e;
  --color-ivory-tower-900: #39312f;
  --color-ivory-tower-950: #231e1d;
  --color-plein-air: #bbc2d6;
  --color-plein-air-50: #f2f6ff;
  --color-plein-air-100: #e7ecf9;
  --color-plein-air-200: #d3d8e7;
  --color-plein-air-300: #bbc2d6;
  --color-plein-air-400: #9ca2b5;
  --color-plein-air-500: #808799;
  --color-plein-air-600: #666c7e;
  --color-plein-air-700: #505565;
  --color-plein-air-800: #3d4250;
  --color-plein-air-900: #2e323e;
  --color-plein-air-950: #1c1f27;
  --color-earthbound: #ab8780;
  --color-earthbound-50: #fff4f2;
  --color-earthbound-100: #ffeae5;
  --color-earthbound-200: #f2d6d0;
  --color-earthbound-300: #e0c0ba;
  --color-earthbound-400: #c4a19a;
  --color-earthbound-500: #ab8780;
  --color-earthbound-600: #8d6b64;
  --color-earthbound-700: #72534d;
  --color-earthbound-800: #5b3f3a;
  --color-earthbound-900: #462f2b;
  --color-earthbound-950: #2c1c19;
  --color-ivy-topiary: #67604c;
  --color-ivy-topiary-50: #f9f5e8;
  --color-ivy-topiary-100: #f0ebdd;
  --color-ivy-topiary-200: #dfd9c9;
  --color-ivy-topiary-300: #cbc5b2;
  --color-ivy-topiary-400: #afa793;
  --color-ivy-topiary-500: #958e79;
  --color-ivy-topiary-600: #7c7561;
  --color-ivy-topiary-700: #67604c;
  --color-ivy-topiary-800: #514b3a;
  --color-ivy-topiary-900: #3e392b;
  --color-ivy-topiary-950: #272419;
  --color-astral-nomad: #20383c;
  --color-astral-nomad-50: #e9f9fb;
  --color-astral-nomad-100: #ddeff2;
  --color-astral-nomad-200: #c7dce0;
  --color-astral-nomad-300: #aec6ca;
  --color-astral-nomad-400: #8da7ac;
  --color-astral-nomad-500: #728c90;
  --color-astral-nomad-600: #587176;
  --color-astral-nomad-700: #435a5e;
  --color-astral-nomad-800: #33474a;
  --color-astral-nomad-900: #20383c;
  --color-astral-nomad-950: #162224;
}