Start generating

Meteorite to Cotton Boll color palette

4D3D69Meteorite5554AAUltrapurple Merge906FB8Viola9790DFPerrywinkle96BEF6Sail to the SeaE8F3FFCotton Boll
Open in generator Export PNG, PDF, ASE…

About this palette

Meteorite to Cotton Boll is a 6-color cool, gradient palette: #4D3D69 (Meteorite), #5554AA (Ultrapurple Merge), #906FB8 (Viola), #9790DF (Perrywinkle), #96BEF6 (Sail to the Sea), #E8F3FF (Cotton Boll). It mixes purple, blue, white tones and feels cool overall. The strongest text pairing is #4D3D69 on #E8F3FF with a contrast ratio of 8.55:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Meteoritergb(77, 61, 105)hsl(262, 27%, 33%)
Ultrapurple Mergergb(85, 84, 170)hsl(241, 34%, 50%)
Violargb(144, 111, 184)hsl(267, 34%, 58%)
Perrywinklergb(151, 144, 223)hsl(245, 55%, 72%)
Sail to the Seargb(150, 190, 246)hsl(215, 84%, 78%)
Cotton Bollrgb(232, 243, 255)hsl(211, 100%, 95%)

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.

  • Aa8.55:1 Very good#4D3D69 on #E8F3FF
  • Aa8.55:1 Very good#E8F3FF on #4D3D69
  • Aa5.78:1 Good#5554AA on #E8F3FF
  • Aa5.78:1 Good#E8F3FF on #5554AA
  • Aa5.03:1 Good#4D3D69 on #96BEF6
  • Aa5.03:1 Good#96BEF6 on #4D3D69
  • Aa3.63:1 Poor#906FB8 on #E8F3FF
  • Aa3.63:1 Poor#E8F3FF on #906FB8

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Meteorite to Cotton Boll — https://swatchly.xyz/palette/4d3d69-5554aa-906fb8-9790df-96bef6-e8f3ff */
:root {
  --meteorite: #4d3d69;
  --ultrapurple-merge: #5554aa;
  --viola: #906fb8;
  --perrywinkle: #9790df;
  --sail-to-the-sea: #96bef6;
  --cotton-boll: #e8f3ff;
}

Tailwind CSS v4

/* Meteorite to Cotton Boll — https://swatchly.xyz/palette/4d3d69-5554aa-906fb8-9790df-96bef6-e8f3ff */
@theme {
  --color-meteorite: #4d3d69;
  --color-meteorite-50: #f6f3ff;
  --color-meteorite-100: #eee7ff;
  --color-meteorite-200: #dcd0f7;
  --color-meteorite-300: #c8b9e6;
  --color-meteorite-400: #aa9aca;
  --color-meteorite-500: #8f7fb0;
  --color-meteorite-600: #756594;
  --color-meteorite-700: #5f507b;
  --color-meteorite-800: #4d3d69;
  --color-meteorite-900: #3b2f50;
  --color-meteorite-950: #251d34;
  --color-ultrapurple-merge: #5554aa;
  --color-ultrapurple-merge-50: #f3f4ff;
  --color-ultrapurple-merge-100: #e5e7ff;
  --color-ultrapurple-merge-200: #cbcfff;
  --color-ultrapurple-merge-300: #aeb3ff;
  --color-ultrapurple-merge-400: #8c8fe8;
  --color-ultrapurple-merge-500: #6f71ca;
  --color-ultrapurple-merge-600: #5554aa;
  --color-ultrapurple-merge-700: #43418b;
  --color-ultrapurple-merge-800: #333171;
  --color-ultrapurple-merge-900: #27255b;
  --color-ultrapurple-merge-950: #17163d;
  --color-viola: #906fb8;
  --color-viola-50: #f7f1ff;
  --color-viola-100: #efe4ff;
  --color-viola-200: #e0c9ff;
  --color-viola-300: #cbaef1;
  --color-viola-400: #ac8cd5;
  --color-viola-500: #906fb8;
  --color-viola-600: #76569b;
  --color-viola-700: #5f4280;
  --color-viola-800: #4b3168;
  --color-viola-900: #3b2553;
  --color-viola-950: #251537;
  --color-perrywinkle: #9790df;
  --color-perrywinkle-50: #f2f1ff;
  --color-perrywinkle-100: #e6e5ff;
  --color-perrywinkle-200: #d0cdff;
  --color-perrywinkle-300: #b7b2fa;
  --color-perrywinkle-400: #9790df;
  --color-perrywinkle-500: #7d76c2;
  --color-perrywinkle-600: #655ca5;
  --color-perrywinkle-700: #504889;
  --color-perrywinkle-800: #3e3770;
  --color-perrywinkle-900: #30295a;
  --color-perrywinkle-950: #1e193c;
  --color-sail-to-the-sea: #96bef6;
  --color-sail-to-the-sea-50: #ebf3ff;
  --color-sail-to-the-sea-100: #d9e9ff;
  --color-sail-to-the-sea-200: #b7d5ff;
  --color-sail-to-the-sea-300: #96bef6;
  --color-sail-to-the-sea-400: #7a9fd4;
  --color-sail-to-the-sea-500: #5f84b9;
  --color-sail-to-the-sea-600: #476b9c;
  --color-sail-to-the-sea-700: #345481;
  --color-sail-to-the-sea-800: #264269;
  --color-sail-to-the-sea-900: #1b3355;
  --color-sail-to-the-sea-950: #0e1f37;
  --color-cotton-boll: #e8f3ff;
  --color-cotton-boll-50: #e8f3ff;
  --color-cotton-boll-100: #e2e9f1;
  --color-cotton-boll-200: #ced6df;
  --color-cotton-boll-300: #b7c0ca;
  --color-cotton-boll-400: #98a2ac;
  --color-cotton-boll-500: #7d8792;
  --color-cotton-boll-600: #646d77;
  --color-cotton-boll-700: #4e565f;
  --color-cotton-boll-800: #3c434b;
  --color-cotton-boll-900: #2d343a;
  --color-cotton-boll-950: #1b2025;
}

Similar palettes