Holographic Lavender to After Midnight color palette

E4E7FFHolographic Lavender D4BBAEMothy 9F9E8AKnock on Wood 61869BHorizon 4F6A77Silent Night 3A3943After Midnight

Open in generator Export PNG, PDF, ASE…

About this palette

Holographic Lavender to After Midnight is a 6-color muted, gradient palette: #E4E7FF (Holographic Lavender), #D4BBAE (Mothy), #9F9E8A (Knock on Wood), #61869B (Horizon), #4F6A77 (Silent Night), #3A3943 (After Midnight). It mixes white, gray, blue tones and feels cool overall. The strongest text pairing is #E4E7FF on #3A3943 with a contrast ratio of 9.30:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Holographic Lavender	rgb(228, 231, 255)	hsl(233, 100%, 95%)
Mothy	rgb(212, 187, 174)	hsl(21, 31%, 76%)
Knock on Wood	rgb(159, 158, 138)	hsl(57, 10%, 58%)
Horizon	rgb(97, 134, 155)	hsl(202, 23%, 49%)
Silent Night	rgb(79, 106, 119)	hsl(200, 20%, 39%)
After Midnight	rgb(58, 57, 67)	hsl(246, 8%, 24%)

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.

Aa9.30:1 Very good#E4E7FF on #3A3943
Aa9.30:1 Very good#3A3943 on #E4E7FF
Aa6.24:1 Good#D4BBAE on #3A3943
Aa6.24:1 Good#3A3943 on #D4BBAE
Aa4.69:1 Good#E4E7FF on #4F6A77
Aa4.69:1 Good#4F6A77 on #E4E7FF
Aa4.19:1 Poor#9F9E8A on #3A3943
Aa4.19:1 Poor#3A3943 on #9F9E8A

Color blindness preview

CSS variables

/* Holographic Lavender to After Midnight — https://swatchly.xyz/palette/e4e7ff-d4bbae-9f9e8a-61869b-4f6a77-3a3943 */
:root {
  --holographic-lavender: #e4e7ff;
  --mothy: #d4bbae;
  --knock-on-wood: #9f9e8a;
  --horizon: #61869b;
  --silent-night: #4f6a77;
  --after-midnight: #3a3943;
}

Tailwind CSS v4

/* Holographic Lavender to After Midnight — https://swatchly.xyz/palette/e4e7ff-d4bbae-9f9e8a-61869b-4f6a77-3a3943 */
@theme {
  --color-holographic-lavender: #e4e7ff;
  --color-holographic-lavender-50: #f0f2ff;
  --color-holographic-lavender-100: #e4e7ff;
  --color-holographic-lavender-200: #d2d4e6;
  --color-holographic-lavender-300: #bbbed2;
  --color-holographic-lavender-400: #9c9fb4;
  --color-holographic-lavender-500: #818499;
  --color-holographic-lavender-600: #676a7e;
  --color-holographic-lavender-700: #525466;
  --color-holographic-lavender-800: #3f4151;
  --color-holographic-lavender-900: #30323f;
  --color-holographic-lavender-950: #1d1e28;
  --color-mothy: #d4bbae;
  --color-mothy-50: #fff2ec;
  --color-mothy-100: #f8e7df;
  --color-mothy-200: #e6d3c9;
  --color-mothy-300: #d4bbae;
  --color-mothy-400: #b39c90;
  --color-mothy-500: #988174;
  --color-mothy-600: #7c665b;
  --color-mothy-700: #645046;
  --color-mothy-800: #4f3e35;
  --color-mothy-900: #3e2f28;
  --color-mothy-950: #271d17;
  --color-knock-on-wood: #9f9e8a;
  --color-knock-on-wood-50: #f5f4e8;
  --color-knock-on-wood-100: #eae9dc;
  --color-knock-on-wood-200: #d6d5c5;
  --color-knock-on-wood-300: #bfbeac;
  --color-knock-on-wood-400: #9f9e8a;
  --color-knock-on-wood-500: #858470;
  --color-knock-on-wood-600: #6b6a58;
  --color-knock-on-wood-700: #555444;
  --color-knock-on-wood-800: #434233;
  --color-knock-on-wood-900: #343327;
  --color-knock-on-wood-950: #202017;
  --color-horizon: #61869b;
  --color-horizon-50: #e8f7ff;
  --color-horizon-100: #d4edfc;
  --color-horizon-200: #bcd9eb;
  --color-horizon-300: #a1c2d6;
  --color-horizon-400: #7ea2b7;
  --color-horizon-500: #61869b;
  --color-horizon-600: #496c80;
  --color-horizon-700: #365668;
  --color-horizon-800: #284453;
  --color-horizon-900: #1c3442;
  --color-horizon-950: #0f212a;
  --color-silent-night: #4f6a77;
  --color-silent-night-50: #e9f8ff;
  --color-silent-night-100: #dbedf7;
  --color-silent-night-200: #c3d9e4;
  --color-silent-night-300: #a9c2cf;
  --color-silent-night-400: #86a2af;
  --color-silent-night-500: #6a8593;
  --color-silent-night-600: #4f6a77;
  --color-silent-night-700: #3c545f;
  --color-silent-night-800: #2d424c;
  --color-silent-night-900: #21333b;
  --color-silent-night-950: #132025;
  --color-after-midnight: #3a3943;
  --color-after-midnight-50: #f5f4fb;
  --color-after-midnight-100: #ebeaf2;
  --color-after-midnight-200: #d7d6e0;
  --color-after-midnight-300: #c0bfca;
  --color-after-midnight-400: #a2a1ad;
  --color-after-midnight-500: #898893;
  --color-after-midnight-600: #706f7a;
  --color-after-midnight-700: #5a5964;
  --color-after-midnight-800: #494851;
  --color-after-midnight-900: #3a3943;
  --color-after-midnight-950: #25242a;
}