Start generating

Magentle to Ice Climber color palette

AE17A5Magentle577DF2Blue Öyster Cult009EF8Fresh Blue of Bel AirFF7670Embarrassment00C790Magical Malachite00DCC7Ice Climber
Open in generator Export PNG, PDF, ASE…

About this palette

Magentle to Ice Climber is a 6-color vibrant, cool, neon palette: #AE17A5 (Magentle), #577DF2 (Blue Öyster Cult), #009EF8 (Fresh Blue of Bel Air), #FF7670 (Embarrassment), #00C790 (Magical Malachite), #00DCC7 (Ice Climber). It mixes pink, blue, red, green, turquoise tones and feels cool overall. The strongest text pairing is #AE17A5 on #00DCC7 with a contrast ratio of 3.48:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Magentlergb(174, 23, 165)hsl(304, 77%, 39%)
Blue Öyster Cultrgb(87, 125, 242)hsl(225, 86%, 65%)
Fresh Blue of Bel Airrgb(0, 158, 248)hsl(202, 100%, 49%)
Embarrassmentrgb(255, 118, 112)hsl(3, 100%, 72%)
Magical Malachitergb(0, 199, 144)hsl(163, 100%, 39%)
Ice Climberrgb(0, 220, 199)hsl(174, 100%, 43%)

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.

  • Aa3.48:1 Poor#AE17A5 on #00DCC7
  • Aa3.48:1 Poor#00DCC7 on #AE17A5

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Magentle to Ice Climber — https://swatchly.xyz/palette/ae17a5-577df2-009ef8-ff7670-00c790-00dcc7 */
:root {
  --magentle: #ae17a5;
  --blue-yster-cult: #577df2;
  --fresh-blue-of-bel-air: #009ef8;
  --embarrassment: #ff7670;
  --magical-malachite: #00c790;
  --ice-climber: #00dcc7;
}

Tailwind CSS v4

/* Magentle to Ice Climber — https://swatchly.xyz/palette/ae17a5-577df2-009ef8-ff7670-00c790-00dcc7 */
@theme {
  --color-magentle: #ae17a5;
  --color-magentle-50: #fff0fc;
  --color-magentle-100: #ffe0fa;
  --color-magentle-200: #ffbff6;
  --color-magentle-300: #ff94f3;
  --color-magentle-400: #ea62de;
  --color-magentle-500: #cd3fc2;
  --color-magentle-600: #ae17a5;
  --color-magentle-700: #8e0086;
  --color-magentle-800: #70006a;
  --color-magentle-900: #580053;
  --color-magentle-950: #390036;
  --color-blue-yster-cult: #577df2;
  --color-blue-yster-cult-50: #f1f5ff;
  --color-blue-yster-cult-100: #e3ebff;
  --color-blue-yster-cult-200: #c7d7ff;
  --color-blue-yster-cult-300: #a7c0ff;
  --color-blue-yster-cult-400: #799dff;
  --color-blue-yster-cult-500: #577df2;
  --color-blue-yster-cult-600: #3f61d1;
  --color-blue-yster-cult-700: #2d4ab1;
  --color-blue-yster-cult-800: #203792;
  --color-blue-yster-cult-900: #162976;
  --color-blue-yster-cult-950: #0b184f;
  --color-fresh-blue-of-bel-air: #009ef8;
  --color-fresh-blue-of-bel-air-50: #e6f3ff;
  --color-fresh-blue-of-bel-air-100: #d0e9ff;
  --color-fresh-blue-of-bel-air-200: #a7d6ff;
  --color-fresh-blue-of-bel-air-300: #73bfff;
  --color-fresh-blue-of-bel-air-400: #009ef8;
  --color-fresh-blue-of-bel-air-500: #0084d0;
  --color-fresh-blue-of-bel-air-600: #006aa9;
  --color-fresh-blue-of-bel-air-700: #005588;
  --color-fresh-blue-of-bel-air-800: #00436d;
  --color-fresh-blue-of-bel-air-900: #003457;
  --color-fresh-blue-of-bel-air-950: #00213a;
  --color-embarrassment: #ff7670;
  --color-embarrassment-50: #fff4f3;
  --color-embarrassment-100: #ffe8e5;
  --color-embarrassment-200: #ffcdc9;
  --color-embarrassment-300: #ffada6;
  --color-embarrassment-400: #ff7670;
  --color-embarrassment-500: #de5855;
  --color-embarrassment-600: #bd3b3b;
  --color-embarrassment-700: #9d2327;
  --color-embarrassment-800: #7f1118;
  --color-embarrassment-900: #65050e;
  --color-embarrassment-950: #420105;
  --color-magical-malachite: #00c790;
  --color-magical-malachite-50: #e6fff3;
  --color-magical-malachite-100: #c4ffe3;
  --color-magical-malachite-200: #93f4ca;
  --color-magical-malachite-300: #6ce2b2;
  --color-magical-malachite-400: #00c790;
  --color-magical-malachite-500: #00a577;
  --color-magical-malachite-600: #00855f;
  --color-magical-malachite-700: #00694b;
  --color-magical-malachite-800: #005239;
  --color-magical-malachite-900: #003f2b;
  --color-magical-malachite-950: #002719;
  --color-ice-climber: #00dcc7;
  --color-ice-climber-50: #d2fff7;
  --color-ice-climber-100: #a3feef;
  --color-ice-climber-200: #7beddc;
  --color-ice-climber-300: #00dcc7;
  --color-ice-climber-400: #00b9a7;
  --color-ice-climber-500: #009a8b;
  --color-ice-climber-600: #007c70;
  --color-ice-climber-700: #006359;
  --color-ice-climber-800: #004d45;
  --color-ice-climber-900: #003c35;
  --color-ice-climber-950: #002621;
}

Similar palettes