Start generating

Minute Mauve to Whale Shark color palette

E9E2FFMinute Mauve89A2B0Grauzone2E3543Total EclipseC2C1D8Stardust Evening515A6BStorm Rising55819CWhale Shark
Open in generator Export PNG, PDF, ASE…

About this palette

Minute Mauve to Whale Shark is a 6-color muted palette: #E9E2FF (Minute Mauve), #89A2B0 (Grauzone), #2E3543 (Total Eclipse), #C2C1D8 (Stardust Evening), #515A6B (Storm Rising), #55819C (Whale Shark). It mixes purple, gray, blue tones and feels cool overall. The strongest text pairing is #E9E2FF on #2E3543 with a contrast ratio of 9.84:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Minute Mauvergb(233, 226, 255)hsl(254, 100%, 94%)
Grauzonergb(137, 162, 176)hsl(202, 20%, 61%)
Total Eclipsergb(46, 53, 67)hsl(220, 19%, 22%)
Stardust Eveningrgb(194, 193, 216)hsl(243, 23%, 80%)
Storm Risingrgb(81, 90, 107)hsl(219, 14%, 37%)
Whale Sharkrgb(85, 129, 156)hsl(203, 29%, 47%)

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.84:1 Very good#E9E2FF on #2E3543
  • Aa9.84:1 Very good#2E3543 on #E9E2FF
  • Aa6.98:1 Good#2E3543 on #C2C1D8
  • Aa6.98:1 Good#C2C1D8 on #2E3543
  • Aa5.55:1 Good#E9E2FF on #515A6B
  • Aa5.55:1 Good#515A6B on #E9E2FF
  • Aa4.61:1 Good#89A2B0 on #2E3543
  • Aa4.61:1 Good#2E3543 on #89A2B0

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Minute Mauve to Whale Shark — https://swatchly.xyz/palette/e9e2ff-89a2b0-2e3543-c2c1d8-515a6b-55819c */
:root {
  --minute-mauve: #e9e2ff;
  --grauzone: #89a2b0;
  --total-eclipse: #2e3543;
  --stardust-evening: #c2c1d8;
  --storm-rising: #515a6b;
  --whale-shark: #55819c;
}

Tailwind CSS v4

/* Minute Mauve to Whale Shark — https://swatchly.xyz/palette/e9e2ff-89a2b0-2e3543-c2c1d8-515a6b-55819c */
@theme {
  --color-minute-mauve: #e9e2ff;
  --color-minute-mauve-50: #f3efff;
  --color-minute-mauve-100: #e9e2ff;
  --color-minute-mauve-200: #d5d0e6;
  --color-minute-mauve-300: #c0bad2;
  --color-minute-mauve-400: #a19bb5;
  --color-minute-mauve-500: #87809a;
  --color-minute-mauve-600: #6d6780;
  --color-minute-mauve-700: #575168;
  --color-minute-mauve-800: #443f52;
  --color-minute-mauve-900: #343040;
  --color-minute-mauve-950: #201d29;
  --color-grauzone: #89a2b0;
  --color-grauzone-50: #e8f6ff;
  --color-grauzone-100: #dbecf6;
  --color-grauzone-200: #c5d8e3;
  --color-grauzone-300: #abc2ce;
  --color-grauzone-400: #89a2b0;
  --color-grauzone-500: #6f8795;
  --color-grauzone-600: #566d7a;
  --color-grauzone-700: #425763;
  --color-grauzone-800: #32444e;
  --color-grauzone-900: #25353d;
  --color-grauzone-950: #162127;
  --color-total-eclipse: #2e3543;
  --color-total-eclipse-50: #f0f5ff;
  --color-total-eclipse-100: #e6ebf7;
  --color-total-eclipse-200: #d1d8e5;
  --color-total-eclipse-300: #b9c1d0;
  --color-total-eclipse-400: #9aa2b3;
  --color-total-eclipse-500: #7f8798;
  --color-total-eclipse-600: #656d7d;
  --color-total-eclipse-700: #505765;
  --color-total-eclipse-800: #3e4451;
  --color-total-eclipse-900: #2e3543;
  --color-total-eclipse-950: #1d2129;
  --color-stardust-evening: #c2c1d8;
  --color-stardust-evening-50: #f6f5ff;
  --color-stardust-evening-100: #ecebfa;
  --color-stardust-evening-200: #d9d8e9;
  --color-stardust-evening-300: #c2c1d8;
  --color-stardust-evening-400: #a2a1b6;
  --color-stardust-evening-500: #86859b;
  --color-stardust-evening-600: #6c6b7f;
  --color-stardust-evening-700: #555466;
  --color-stardust-evening-800: #424151;
  --color-stardust-evening-900: #32313f;
  --color-stardust-evening-950: #1f1e28;
  --color-storm-rising: #515a6b;
  --color-storm-rising-50: #f0f5ff;
  --color-storm-rising-100: #e5ebf8;
  --color-storm-rising-200: #d1d9e7;
  --color-storm-rising-300: #bac3d4;
  --color-storm-rising-400: #9ba4b6;
  --color-storm-rising-500: #808a9c;
  --color-storm-rising-600: #677081;
  --color-storm-rising-700: #515a6b;
  --color-storm-rising-800: #3f4654;
  --color-storm-rising-900: #2f3642;
  --color-storm-rising-950: #1d212a;
  --color-whale-shark: #55819c;
  --color-whale-shark-50: #e7f5ff;
  --color-whale-shark-100: #ceecff;
  --color-whale-shark-200: #b3d7ee;
  --color-whale-shark-300: #97bfd9;
  --color-whale-shark-400: #729eba;
  --color-whale-shark-500: #55819c;
  --color-whale-shark-600: #3f6881;
  --color-whale-shark-700: #2d536a;
  --color-whale-shark-800: #204155;
  --color-whale-shark-900: #163344;
  --color-whale-shark-950: #0b202c;
}

Similar palettes