Start generating

Imperial Lilac to Nightly Walk color palette

A9A1C2Imperial Lilac726586Heron2D2E18MarshlandB9C199Beige and SageE6F2DBMaison Verte534863Nightly Walk
Open in generator Export PNG, PDF, ASE…

About this palette

Imperial Lilac to Nightly Walk is a 6-color muted, cool palette: #A9A1C2 (Imperial Lilac), #726586 (Heron), #2D2E18 (Marshland), #B9C199 (Beige and Sage), #E6F2DB (Maison Verte), #534863 (Nightly Walk). It mixes purple, brown, green, white tones and feels cool overall. The strongest text pairing is #2D2E18 on #E6F2DB with a contrast ratio of 11.94:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Imperial Lilacrgb(169, 161, 194)hsl(255, 21%, 70%)
Heronrgb(114, 101, 134)hsl(264, 14%, 46%)
Marshlandrgb(45, 46, 24)hsl(63, 31%, 14%)
Beige and Sagergb(185, 193, 153)hsl(72, 24%, 68%)
Maison Vertergb(230, 242, 219)hsl(91, 47%, 90%)
Nightly Walkrgb(83, 72, 99)hsl(264, 16%, 34%)

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.94:1 Very good#2D2E18 on #E6F2DB
  • Aa11.94:1 Very good#E6F2DB on #2D2E18
  • Aa7.36:1 Very good#2D2E18 on #B9C199
  • Aa7.36:1 Very good#B9C199 on #2D2E18
  • Aa7.31:1 Very good#E6F2DB on #534863
  • Aa7.31:1 Very good#534863 on #E6F2DB
  • Aa5.65:1 Good#A9A1C2 on #2D2E18
  • Aa5.65:1 Good#2D2E18 on #A9A1C2

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Imperial Lilac to Nightly Walk — https://swatchly.xyz/palette/a9a1c2-726586-2d2e18-b9c199-e6f2db-534863 */
:root {
  --imperial-lilac: #a9a1c2;
  --heron: #726586;
  --marshland: #2d2e18;
  --beige-and-sage: #b9c199;
  --maison-verte: #e6f2db;
  --nightly-walk: #534863;
}

Tailwind CSS v4

/* Imperial Lilac to Nightly Walk — https://swatchly.xyz/palette/a9a1c2-726586-2d2e18-b9c199-e6f2db-534863 */
@theme {
  --color-imperial-lilac: #a9a1c2;
  --color-imperial-lilac-50: #f7f5ff;
  --color-imperial-lilac-100: #efebff;
  --color-imperial-lilac-200: #ddd7f0;
  --color-imperial-lilac-300: #c7c1dd;
  --color-imperial-lilac-400: #a9a1c2;
  --color-imperial-lilac-500: #8d85a5;
  --color-imperial-lilac-600: #716a88;
  --color-imperial-lilac-700: #5a536e;
  --color-imperial-lilac-800: #463f57;
  --color-imperial-lilac-900: #353044;
  --color-imperial-lilac-950: #201d2b;
  --color-heron: #726586;
  --color-heron-50: #f7f3ff;
  --color-heron-100: #efe6fe;
  --color-heron-200: #dcd2ee;
  --color-heron-300: #c7bbda;
  --color-heron-400: #a89bbd;
  --color-heron-500: #8d7fa1;
  --color-heron-600: #726586;
  --color-heron-700: #5b4f6c;
  --color-heron-800: #473d56;
  --color-heron-900: #372e44;
  --color-heron-950: #221c2b;
  --color-marshland: #2d2e18;
  --color-marshland-50: #f5f7e7;
  --color-marshland-100: #ebeddc;
  --color-marshland-200: #d8d9c5;
  --color-marshland-300: #c1c3ac;
  --color-marshland-400: #a1a38a;
  --color-marshland-500: #84866d;
  --color-marshland-600: #696a53;
  --color-marshland-700: #51523d;
  --color-marshland-800: #3d3e2c;
  --color-marshland-900: #2d2e18;
  --color-marshland-950: #1a1b11;
  --color-beige-and-sage: #b9c199;
  --color-beige-and-sage-50: #f1f6de;
  --color-beige-and-sage-100: #e6ebd1;
  --color-beige-and-sage-200: #d1d7b8;
  --color-beige-and-sage-300: #b9c199;
  --color-beige-and-sage-400: #9ba27d;
  --color-beige-and-sage-500: #808862;
  --color-beige-and-sage-600: #676e4a;
  --color-beige-and-sage-700: #525837;
  --color-beige-and-sage-800: #404528;
  --color-beige-and-sage-900: #31361d;
  --color-beige-and-sage-950: #1e210f;
  --color-maison-verte: #e6f2db;
  --color-maison-verte-50: #f3f9ed;
  --color-maison-verte-100: #e6f2db;
  --color-maison-verte-200: #d4ddcc;
  --color-maison-verte-300: #bcc6b3;
  --color-maison-verte-400: #9ca792;
  --color-maison-verte-500: #808b76;
  --color-maison-verte-600: #66705c;
  --color-maison-verte-700: #505947;
  --color-maison-verte-800: #3e4536;
  --color-maison-verte-900: #2f3528;
  --color-maison-verte-950: #1c2118;
  --color-nightly-walk: #534863;
  --color-nightly-walk-50: #f7f3ff;
  --color-nightly-walk-100: #efe7fb;
  --color-nightly-walk-200: #dad1e9;
  --color-nightly-walk-300: #c3b8d4;
  --color-nightly-walk-400: #a397b5;
  --color-nightly-walk-500: #867b98;
  --color-nightly-walk-600: #6b607b;
  --color-nightly-walk-700: #534863;
  --color-nightly-walk-800: #40384d;
  --color-nightly-walk-900: #322a3c;
  --color-nightly-walk-950: #1e1926;
}

Similar palettes