Start generating

Astral Nomad to Dogwood color palette

223948Astral Nomad43636FMediterranea918B57Green OliveBBB5CFPastel LilacFFEAE0Dogwood
Open in generator Export PNG, PDF, ASE…

About this palette

Astral Nomad to Dogwood is a 5-color muted, cool palette: #223948 (Astral Nomad), #43636F (Mediterranea), #918B57 (Green Olive), #BBB5CF (Pastel Lilac), #FFEAE0 (Dogwood). It mixes blue, yellow, purple, white tones and feels cool overall. The strongest text pairing is #223948 on #FFEAE0 with a contrast ratio of 10.36:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Astral Nomadrgb(34, 57, 72)hsl(204, 36%, 21%)
Mediterraneargb(67, 99, 111)hsl(196, 25%, 35%)
Green Olivergb(145, 139, 87)hsl(54, 25%, 45%)
Pastel Lilacrgb(187, 181, 207)hsl(254, 21%, 76%)
Dogwoodrgb(255, 234, 224)hsl(19, 100%, 94%)

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.

  • Aa10.36:1 Very good#223948 on #FFEAE0
  • Aa10.36:1 Very good#FFEAE0 on #223948
  • Aa6.08:1 Good#223948 on #BBB5CF
  • Aa6.08:1 Good#BBB5CF on #223948
  • Aa5.56:1 Good#43636F on #FFEAE0
  • Aa5.56:1 Good#FFEAE0 on #43636F
  • Aa3.45:1 Poor#223948 on #918B57
  • Aa3.45:1 Poor#918B57 on #223948

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Astral Nomad to Dogwood — https://swatchly.xyz/palette/223948-43636f-918b57-bbb5cf-ffeae0 */
:root {
  --astral-nomad: #223948;
  --mediterranea: #43636f;
  --green-olive: #918b57;
  --pastel-lilac: #bbb5cf;
  --dogwood: #ffeae0;
}

Tailwind CSS v4

/* Astral Nomad to Dogwood — https://swatchly.xyz/palette/223948-43636f-918b57-bbb5cf-ffeae0 */
@theme {
  --color-astral-nomad: #223948;
  --color-astral-nomad-50: #ecf7ff;
  --color-astral-nomad-100: #ddeefa;
  --color-astral-nomad-200: #c7dbe9;
  --color-astral-nomad-300: #aec5d4;
  --color-astral-nomad-400: #8da6b7;
  --color-astral-nomad-500: #728b9d;
  --color-astral-nomad-600: #597182;
  --color-astral-nomad-700: #455b6a;
  --color-astral-nomad-800: #344855;
  --color-astral-nomad-900: #223948;
  --color-astral-nomad-950: #17232c;
  --color-mediterranea: #43636f;
  --color-mediterranea-50: #e8f8ff;
  --color-mediterranea-100: #daeff8;
  --color-mediterranea-200: #c4dee8;
  --color-mediterranea-300: #accad5;
  --color-mediterranea-400: #8cacb9;
  --color-mediterranea-500: #71929f;
  --color-mediterranea-600: #587985;
  --color-mediterranea-700: #43636f;
  --color-mediterranea-800: #334e58;
  --color-mediterranea-900: #253c44;
  --color-mediterranea-950: #15262c;
  --color-green-olive: #918b57;
  --color-green-olive-50: #faf7da;
  --color-green-olive-100: #f1eecd;
  --color-green-olive-200: #dfdbb3;
  --color-green-olive-300: #cac598;
  --color-green-olive-400: #aca674;
  --color-green-olive-500: #918b57;
  --color-green-olive-600: #76703d;
  --color-green-olive-700: #5e582a;
  --color-green-olive-800: #4a451b;
  --color-green-olive-900: #393511;
  --color-green-olive-950: #232007;
  --color-pastel-lilac: #bbb5cf;
  --color-pastel-lilac-50: #f2effe;
  --color-pastel-lilac-100: #e7e3f5;
  --color-pastel-lilac-200: #d2cee2;
  --color-pastel-lilac-300: #bbb5cf;
  --color-pastel-lilac-400: #9d97b0;
  --color-pastel-lilac-500: #837d96;
  --color-pastel-lilac-600: #6a647b;
  --color-pastel-lilac-700: #544f64;
  --color-pastel-lilac-800: #433e50;
  --color-pastel-lilac-900: #34303f;
  --color-pastel-lilac-950: #201d28;
  --color-dogwood: #ffeae0;
  --color-dogwood-50: #fff6f2;
  --color-dogwood-100: #ffeae0;
  --color-dogwood-200: #e6d7d0;
  --color-dogwood-300: #d0bfb7;
  --color-dogwood-400: #b19f96;
  --color-dogwood-500: #96837a;
  --color-dogwood-600: #7a6860;
  --color-dogwood-700: #61514a;
  --color-dogwood-800: #4d3f38;
  --color-dogwood-900: #3c302a;
  --color-dogwood-950: #261d19;
}

Similar palettes