Freefall to Digital Lavender color palette

54536BFreefall 8C89ACGalactic Gossamer 807FA2Aster C9C6EADigital Lavender 322F4BMidnight Masquerade C4C6E8Digital Lavender

Open in generator Export PNG, PDF, ASE…

About this palette

Freefall to Digital Lavender is a 6-color muted, cool, monochromatic palette: #54536B (Freefall), #8C89AC (Galactic Gossamer), #807FA2 (Aster), #C9C6EA (Digital Lavender), #322F4B (Midnight Masquerade), #C4C6E8 (Digital Lavender). It mixes purple tones and feels cool overall. The strongest text pairing is #C9C6EA on #322F4B with a contrast ratio of 7.76:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Freefall	rgb(84, 83, 107)	hsl(242, 13%, 37%)
Galactic Gossamer	rgb(140, 137, 172)	hsl(245, 17%, 61%)
Aster	rgb(128, 127, 162)	hsl(242, 16%, 57%)
Digital Lavender	rgb(201, 198, 234)	hsl(245, 46%, 85%)
Midnight Masquerade	rgb(50, 47, 75)	hsl(246, 23%, 24%)
Digital Lavender	rgb(196, 198, 232)	hsl(237, 44%, 84%)

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.76:1 Very good#C9C6EA on #322F4B
Aa7.76:1 Very good#322F4B on #C9C6EA
Aa7.66:1 Very good#322F4B on #C4C6E8
Aa7.66:1 Very good#C4C6E8 on #322F4B
Aa4.51:1 Good#54536B on #C9C6EA
Aa4.51:1 Good#C9C6EA on #54536B
Aa4.45:1 Poor#54536B on #C4C6E8
Aa4.45:1 Poor#C4C6E8 on #54536B

Color blindness preview

CSS variables

/* Freefall to Digital Lavender — https://swatchly.xyz/palette/54536b-8c89ac-807fa2-c9c6ea-322f4b-c4c6e8 */
:root {
  --freefall: #54536b;
  --galactic-gossamer: #8c89ac;
  --aster: #807fa2;
  --digital-lavender: #c9c6ea;
  --midnight-masquerade: #322f4b;
  --digital-lavender-2: #c4c6e8;
}

Tailwind CSS v4

/* Freefall to Digital Lavender — https://swatchly.xyz/palette/54536b-8c89ac-807fa2-c9c6ea-322f4b-c4c6e8 */
@theme {
  --color-freefall: #54536b;
  --color-freefall-50: #f4f4ff;
  --color-freefall-100: #e9e9fb;
  --color-freefall-200: #d6d5ea;
  --color-freefall-300: #bfbed6;
  --color-freefall-400: #a09fb9;
  --color-freefall-500: #84849e;
  --color-freefall-600: #6a6982;
  --color-freefall-700: #54536b;
  --color-freefall-800: #414154;
  --color-freefall-900: #323142;
  --color-freefall-950: #1f1e2a;
  --color-galactic-gossamer: #8c89ac;
  --color-galactic-gossamer-50: #f6f5ff;
  --color-galactic-gossamer-100: #edecff;
  --color-galactic-gossamer-200: #dad8f3;
  --color-galactic-gossamer-300: #c5c2e1;
  --color-galactic-gossamer-400: #a6a4c6;
  --color-galactic-gossamer-500: #8c89ac;
  --color-galactic-gossamer-600: #706d8f;
  --color-galactic-gossamer-700: #595674;
  --color-galactic-gossamer-800: #45425c;
  --color-galactic-gossamer-900: #343248;
  --color-galactic-gossamer-950: #201e2e;
  --color-aster: #807fa2;
  --color-aster-50: #f3f3ff;
  --color-aster-100: #e8e8ff;
  --color-aster-200: #d3d3ef;
  --color-aster-300: #bcbbdc;
  --color-aster-400: #9c9bbe;
  --color-aster-500: #807fa2;
  --color-aster-600: #666586;
  --color-aster-700: #51506d;
  --color-aster-800: #3f3e58;
  --color-aster-900: #302f45;
  --color-aster-950: #1e1d2d;
  --color-digital-lavender: #c9c6ea;
  --color-digital-lavender-50: #faf9ff;
  --color-digital-lavender-100: #f1f0ff;
  --color-digital-lavender-200: #deddf6;
  --color-digital-lavender-300: #c9c6ea;
  --color-digital-lavender-400: #a8a5c6;
  --color-digital-lavender-500: #8b88a9;
  --color-digital-lavender-600: #6f6c8c;
  --color-digital-lavender-700: #575471;
  --color-digital-lavender-800: #434059;
  --color-digital-lavender-900: #323045;
  --color-digital-lavender-950: #1f1d2c;
  --color-midnight-masquerade: #322f4b;
  --color-midnight-masquerade-50: #f4f4ff;
  --color-midnight-masquerade-100: #eae8ff;
  --color-midnight-masquerade-200: #d6d4ef;
  --color-midnight-masquerade-300: #bfbddb;
  --color-midnight-masquerade-400: #a09dbe;
  --color-midnight-masquerade-500: #8482a3;
  --color-midnight-masquerade-600: #6a6887;
  --color-midnight-masquerade-700: #54526e;
  --color-midnight-masquerade-800: #413f58;
  --color-midnight-masquerade-900: #322f4b;
  --color-midnight-masquerade-950: #1f1d2c;
  --color-digital-lavender-2: #c4c6e8;
  --color-digital-lavender-2-50: #f8f9ff;
  --color-digital-lavender-2-100: #eeefff;
  --color-digital-lavender-2-200: #dbdcf5;
  --color-digital-lavender-2-300: #c4c6e8;
  --color-digital-lavender-2-400: #a3a5c4;
  --color-digital-lavender-2-500: #8788a8;
  --color-digital-lavender-2-600: #6b6c8b;
  --color-digital-lavender-2-700: #545570;
  --color-digital-lavender-2-800: #404159;
  --color-digital-lavender-2-900: #303144;
  --color-digital-lavender-2-950: #1d1e2c;
}