Start generating

Magentle to Rock’n’Rose color palette

A900B3MagentleE30089Benevolent PinkB17CF5Illicit PurpleFA9000Shiritorier’s OrangeFF8E9ERock’n’Rose
Open in generator Export PNG, PDF, ASE…

About this palette

Magentle to Rock’n’Rose is a 5-color vibrant, warm, neon palette: #A900B3 (Magentle), #E30089 (Benevolent Pink), #B17CF5 (Illicit Purple), #FA9000 (Shiritorier’s Orange), #FF8E9E (Rock’n’Rose). It mixes pink, red, purple, orange tones and feels warm overall. The strongest text pairing is #A900B3 on #FF8E9E with a contrast ratio of 2.88:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Magentlergb(169, 0, 179)hsl(297, 100%, 35%)
Benevolent Pinkrgb(227, 0, 137)hsl(324, 100%, 45%)
Illicit Purplergb(177, 124, 245)hsl(266, 86%, 72%)
Shiritorier’s Orangergb(250, 144, 0)hsl(35, 100%, 49%)
Rock’n’Rosergb(255, 142, 158)hsl(352, 100%, 78%)

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.

    Color blindness preview

    • Protanopia
    • Deuteranopia
    • Tritanopia
    • Achromatopsia
    • Dog vision

    CSS variables

    /* Magentle to Rock’n’Rose — https://swatchly.xyz/palette/a900b3-e30089-b17cf5-fa9000-ff8e9e */
:root {
  --magentle: #a900b3;
  --benevolent-pink: #e30089;
  --illicit-purple: #b17cf5;
  --shiritorier-s-orange: #fa9000;
  --rock-n-rose: #ff8e9e;
}

    Tailwind CSS v4

    /* Magentle to Rock’n’Rose — https://swatchly.xyz/palette/a900b3-e30089-b17cf5-fa9000-ff8e9e */
@theme {
  --color-magentle: #a900b3;
  --color-magentle-50: #ffefff;
  --color-magentle-100: #fedfff;
  --color-magentle-200: #fdbdff;
  --color-magentle-300: #fa92ff;
  --color-magentle-400: #e55ded;
  --color-magentle-500: #c837d1;
  --color-magentle-600: #a900b3;
  --color-magentle-700: #87008f;
  --color-magentle-800: #6b0072;
  --color-magentle-900: #540059;
  --color-magentle-950: #36003a;
  --color-benevolent-pink: #e30089;
  --color-benevolent-pink-50: #ffeff5;
  --color-benevolent-pink-100: #ffdfea;
  --color-benevolent-pink-200: #ffbfd7;
  --color-benevolent-pink-300: #ff97c2;
  --color-benevolent-pink-400: #ff4ba5;
  --color-benevolent-pink-500: #e30089;
  --color-benevolent-pink-600: #b8006e;
  --color-benevolent-pink-700: #940058;
  --color-benevolent-pink-800: #760045;
  --color-benevolent-pink-900: #5d0035;
  --color-benevolent-pink-950: #3e0021;
  --color-illicit-purple: #b17cf5;
  --color-illicit-purple-50: #f5f0ff;
  --color-illicit-purple-100: #ede2ff;
  --color-illicit-purple-200: #ddc7ff;
  --color-illicit-purple-300: #cba8ff;
  --color-illicit-purple-400: #b17cf5;
  --color-illicit-purple-500: #9661d7;
  --color-illicit-purple-600: #7c47b9;
  --color-illicit-purple-700: #65339b;
  --color-illicit-purple-800: #51247f;
  --color-illicit-purple-900: #401867;
  --color-illicit-purple-950: #290c46;
  --color-shiritorier-s-orange: #fa9000;
  --color-shiritorier-s-orange-50: #fff8f3;
  --color-shiritorier-s-orange-100: #ffefe1;
  --color-shiritorier-s-orange-200: #ffd8b8;
  --color-shiritorier-s-orange-300: #ffbc81;
  --color-shiritorier-s-orange-400: #fa9000;
  --color-shiritorier-s-orange-500: #d07700;
  --color-shiritorier-s-orange-600: #a85f00;
  --color-shiritorier-s-orange-700: #854a00;
  --color-shiritorier-s-orange-800: #683800;
  --color-shiritorier-s-orange-900: #4f2a00;
  --color-shiritorier-s-orange-950: #321800;
  --color-rock-n-rose: #ff8e9e;
  --color-rock-n-rose-50: #ffe9ea;
  --color-rock-n-rose-100: #ffd7db;
  --color-rock-n-rose-200: #ffb7bf;
  --color-rock-n-rose-300: #ff8e9e;
  --color-rock-n-rose-400: #dd7282;
  --color-rock-n-rose-500: #c25769;
  --color-rock-n-rose-600: #a43f52;
  --color-rock-n-rose-700: #882d3f;
  --color-rock-n-rose-800: #701f31;
  --color-rock-n-rose-900: #5b1525;
  --color-rock-n-rose-950: #3c0915;
}

    Similar palettes