Pastel Purple to Total Eclipse color palette

AC9EBDPastel Purple BECFB5Isle of Dreams 63502FJungle Beat 987F59Muesli 27374BTotal Eclipse

About this palette

Pastel Purple to Total Eclipse is a 5-color muted, cool, earthy, vintage palette: #AC9EBD (Pastel Purple), #BECFB5 (Isle of Dreams), #63502F (Jungle Beat), #987F59 (Muesli), #27374B (Total Eclipse). It mixes purple, green, brown, yellow, blue tones and feels cool overall. The strongest text pairing is #BECFB5 on #27374B with a contrast ratio of 7.37:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pastel Purple	rgb(172, 158, 189)	hsl(267, 19%, 68%)
Isle of Dreams	rgb(190, 207, 181)	hsl(99, 21%, 76%)
Jungle Beat	rgb(99, 80, 47)	hsl(38, 36%, 29%)
Muesli	rgb(152, 127, 89)	hsl(36, 26%, 47%)
Total Eclipse	rgb(39, 55, 75)	hsl(213, 32%, 22%)

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.37:1 Very good#BECFB5 on #27374B
Aa7.37:1 Very good#27374B on #BECFB5
Aa4.83:1 Good#AC9EBD on #27374B
Aa4.83:1 Good#27374B on #AC9EBD
Aa4.70:1 Good#BECFB5 on #63502F
Aa4.70:1 Good#63502F on #BECFB5
Aa3.18:1 Poor#987F59 on #27374B
Aa3.18:1 Poor#27374B on #987F59

Color blindness preview

CSS variables

/* Pastel Purple to Total Eclipse — https://swatchly.xyz/palette/ac9ebd-becfb5-63502f-987f59-27374b */
:root {
  --pastel-purple: #ac9ebd;
  --isle-of-dreams: #becfb5;
  --jungle-beat: #63502f;
  --muesli: #987f59;
  --total-eclipse: #27374b;
}

Tailwind CSS v4

/* Pastel Purple to Total Eclipse — https://swatchly.xyz/palette/ac9ebd-becfb5-63502f-987f59-27374b */
@theme {
  --color-pastel-purple: #ac9ebd;
  --color-pastel-purple-50: #f9f4ff;
  --color-pastel-purple-100: #f1e9fd;
  --color-pastel-purple-200: #dfd5ec;
  --color-pastel-purple-300: #cabed9;
  --color-pastel-purple-400: #ac9ebd;
  --color-pastel-purple-500: #9082a0;
  --color-pastel-purple-600: #746784;
  --color-pastel-purple-700: #5d516b;
  --color-pastel-purple-800: #483e54;
  --color-pastel-purple-900: #382f42;
  --color-pastel-purple-950: #221c29;
  --color-isle-of-dreams: #becfb5;
  --color-isle-of-dreams-50: #f3fdef;
  --color-isle-of-dreams-100: #eaf4e5;
  --color-isle-of-dreams-200: #d6e3d0;
  --color-isle-of-dreams-300: #becfb5;
  --color-isle-of-dreams-400: #9eae96;
  --color-isle-of-dreams-500: #819179;
  --color-isle-of-dreams-600: #66755e;
  --color-isle-of-dreams-700: #4f5c47;
  --color-isle-of-dreams-800: #3c4835;
  --color-isle-of-dreams-900: #2c3627;
  --color-isle-of-dreams-950: #1b2217;
  --color-jungle-beat: #63502f;
  --color-jungle-beat-50: #fff4e1;
  --color-jungle-beat-100: #f7e9d2;
  --color-jungle-beat-200: #e5d5ba;
  --color-jungle-beat-300: #d0bd9f;
  --color-jungle-beat-400: #b29d7b;
  --color-jungle-beat-500: #96825f;
  --color-jungle-beat-600: #7a6746;
  --color-jungle-beat-700: #63502f;
  --color-jungle-beat-800: #4d3e24;
  --color-jungle-beat-900: #3c2f19;
  --color-jungle-beat-950: #261d0d;
  --color-muesli: #987f59;
  --color-muesli-50: #fff3e1;
  --color-muesli-100: #f9e8ce;
  --color-muesli-200: #e7d3b5;
  --color-muesli-300: #d2bb99;
  --color-muesli-400: #b49b75;
  --color-muesli-500: #987f59;
  --color-muesli-600: #7d6541;
  --color-muesli-700: #65502e;
  --color-muesli-800: #503e20;
  --color-muesli-900: #3f2f16;
  --color-muesli-950: #281d0a;
  --color-total-eclipse: #27374b;
  --color-total-eclipse-50: #eff6ff;
  --color-total-eclipse-100: #e0edfd;
  --color-total-eclipse-200: #cad9ec;
  --color-total-eclipse-300: #b2c3d8;
  --color-total-eclipse-400: #92a4bb;
  --color-total-eclipse-500: #7789a0;
  --color-total-eclipse-600: #5e6f85;
  --color-total-eclipse-700: #49596d;
  --color-total-eclipse-800: #384658;
  --color-total-eclipse-900: #27374b;
  --color-total-eclipse-950: #1a222d;
}