Start generating

Pastel Mint to Spacescape color palette

D2E9C4Pastel MintE78AB3Pomelo Red63A263Endo7771A5Stormy Horizon702545Siren242452Spacescape
Open in generator Export PNG, PDF, ASE…

About this palette

Pastel Mint to Spacescape is a 6-color cool palette: #D2E9C4 (Pastel Mint), #E78AB3 (Pomelo Red), #63A263 (Endo), #7771A5 (Stormy Horizon), #702545 (Siren), #242452 (Spacescape). It mixes green, pink, purple, red tones and feels cool overall. The strongest text pairing is #D2E9C4 on #242452 with a contrast ratio of 11.17:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Pastel Mintrgb(210, 233, 196)hsl(97, 46%, 84%)
Pomelo Redrgb(231, 138, 179)hsl(334, 66%, 72%)
Endorgb(99, 162, 99)hsl(120, 25%, 51%)
Stormy Horizonrgb(119, 113, 165)hsl(247, 22%, 55%)
Sirenrgb(112, 37, 69)hsl(334, 50%, 29%)
Spacescapergb(36, 36, 82)hsl(240, 39%, 23%)

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.17:1 Very good#D2E9C4 on #242452
  • Aa11.17:1 Very good#242452 on #D2E9C4
  • Aa7.94:1 Very good#D2E9C4 on #702545
  • Aa7.94:1 Very good#702545 on #D2E9C4
  • Aa5.99:1 Good#E78AB3 on #242452
  • Aa5.99:1 Good#242452 on #E78AB3
  • Aa4.75:1 Good#63A263 on #242452
  • Aa4.75:1 Good#242452 on #63A263

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Pastel Mint to Spacescape — https://swatchly.xyz/palette/d2e9c4-e78ab3-63a263-7771a5-702545-242452 */
:root {
  --pastel-mint: #d2e9c4;
  --pomelo-red: #e78ab3;
  --endo: #63a263;
  --stormy-horizon: #7771a5;
  --siren: #702545;
  --spacescape: #242452;
}

Tailwind CSS v4

/* Pastel Mint to Spacescape — https://swatchly.xyz/palette/d2e9c4-e78ab3-63a263-7771a5-702545-242452 */
@theme {
  --color-pastel-mint: #d2e9c4;
  --color-pastel-mint-50: #f5ffef;
  --color-pastel-mint-100: #eaf8e3;
  --color-pastel-mint-200: #d2e9c4;
  --color-pastel-mint-300: #bdcfb1;
  --color-pastel-mint-400: #9aaf8e;
  --color-pastel-mint-500: #7d9270;
  --color-pastel-mint-600: #627655;
  --color-pastel-mint-700: #4b5d3f;
  --color-pastel-mint-800: #38482e;
  --color-pastel-mint-900: #2a3722;
  --color-pastel-mint-950: #192313;
  --color-pomelo-red: #e78ab3;
  --color-pomelo-red-50: #fff6f9;
  --color-pomelo-red-100: #ffeaf2;
  --color-pomelo-red-200: #ffcfe2;
  --color-pomelo-red-300: #fdafd0;
  --color-pomelo-red-400: #e78ab3;
  --color-pomelo-red-500: #c66d95;
  --color-pomelo-red-600: #a75179;
  --color-pomelo-red-700: #893a60;
  --color-pomelo-red-800: #6e294b;
  --color-pomelo-red-900: #561c39;
  --color-pomelo-red-950: #370e22;
  --color-endo: #63a263;
  --color-endo-50: #e7ffe6;
  --color-endo-100: #d5fbd3;
  --color-endo-200: #bdebbc;
  --color-endo-300: #a3d8a2;
  --color-endo-400: #80bc7f;
  --color-endo-500: #63a263;
  --color-endo-600: #478548;
  --color-endo-700: #306a32;
  --color-endo-800: #205422;
  --color-endo-900: #144016;
  --color-endo-950: #08280a;
  --color-stormy-horizon: #7771a5;
  --color-stormy-horizon-50: #f4f4ff;
  --color-stormy-horizon-100: #ecebff;
  --color-stormy-horizon-200: #dad7ff;
  --color-stormy-horizon-300: #c6c2f1;
  --color-stormy-horizon-400: #a9a4d7;
  --color-stormy-horizon-500: #8f8abf;
  --color-stormy-horizon-600: #7771a5;
  --color-stormy-horizon-700: #5e5888;
  --color-stormy-horizon-800: #49446e;
  --color-stormy-horizon-900: #383357;
  --color-stormy-horizon-950: #221f38;
  --color-siren: #702545;
  --color-siren-50: #fff1f5;
  --color-siren-100: #ffe2eb;
  --color-siren-200: #ffc5d8;
  --color-siren-300: #f4a8c2;
  --color-siren-400: #d886a3;
  --color-siren-500: #bc6988;
  --color-siren-600: #9e506e;
  --color-siren-700: #833b58;
  --color-siren-800: #702545;
  --color-siren-900: #541f35;
  --color-siren-950: #371121;
  --color-spacescape: #242452;
  --color-spacescape-50: #f3f4ff;
  --color-spacescape-100: #e7eaff;
  --color-spacescape-200: #cfd4ff;
  --color-spacescape-300: #b7bdee;
  --color-spacescape-400: #969bd1;
  --color-spacescape-500: #797eb4;
  --color-spacescape-600: #5e6294;
  --color-spacescape-700: #484a77;
  --color-spacescape-800: #35375d;
  --color-spacescape-900: #242452;
  --color-spacescape-950: #15172c;
}

Similar palettes