Purple Sultan to Bubbles color palette

About this palette

Purple Sultan to Bubbles is a 5-color palette: #86317E (Purple Sultan), #9CCD6E (Fluorescence), #283D00 (Dark Olive), #B16CA6 (Je t’aime), #E4FFFE (Bubbles). It mixes pink, green, white tones and feels balanced overall. The strongest text pairing is #283D00 on #E4FFFE with a contrast ratio of 11.40:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Purple Sultanrgb(134, 49, 126)hsl(306, 46%, 36%)
Fluorescencergb(156, 205, 110)hsl(91, 49%, 62%)
Dark Olivergb(40, 61, 0)hsl(81, 100%, 12%)
Je t’aimergb(177, 108, 166)hsl(310, 31%, 56%)
Bubblesrgb(228, 255, 254)hsl(178, 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.

  • Aa11.40:1 Very good#283D00 on #E4FFFE
  • Aa11.40:1 Very good#E4FFFE on #283D00
  • Aa7.27:1 Very good#86317E on #E4FFFE
  • Aa7.27:1 Very good#E4FFFE on #86317E
  • Aa6.47:1 Good#9CCD6E on #283D00
  • Aa6.47:1 Good#283D00 on #9CCD6E
  • Aa4.13:1 Poor#86317E on #9CCD6E
  • Aa4.13:1 Poor#9CCD6E on #86317E

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Purple Sultan to Bubbles — https://swatchly.xyz/palette/86317e-9ccd6e-283d00-b16ca6-e4fffe */
:root {
  --purple-sultan: #86317e;
  --fluorescence: #9ccd6e;
  --dark-olive: #283d00;
  --je-t-aime: #b16ca6;
  --bubbles: #e4fffe;
}

Tailwind CSS v4

/* Purple Sultan to Bubbles — https://swatchly.xyz/palette/86317e-9ccd6e-283d00-b16ca6-e4fffe */
@theme {
  --color-purple-sultan: #86317e;
  --color-purple-sultan-50: #fff0fc;
  --color-purple-sultan-100: #ffe0fa;
  --color-purple-sultan-200: #ffc1f6;
  --color-purple-sultan-300: #f2a3e7;
  --color-purple-sultan-400: #d780cc;
  --color-purple-sultan-500: #bb63b1;
  --color-purple-sultan-600: #9e4995;
  --color-purple-sultan-700: #86317e;
  --color-purple-sultan-800: #6a2464;
  --color-purple-sultan-900: #54184f;
  --color-purple-sultan-950: #370b33;
  --color-fluorescence: #9ccd6e;
  --color-fluorescence-50: #e0fec8;
  --color-fluorescence-100: #d3f4b7;
  --color-fluorescence-200: #bbe199;
  --color-fluorescence-300: #9ccd6e;
  --color-fluorescence-400: #7fad52;
  --color-fluorescence-500: #659333;
  --color-fluorescence-600: #4d7816;
  --color-fluorescence-700: #3a6000;
  --color-fluorescence-800: #2d4c00;
  --color-fluorescence-900: #223b00;
  --color-fluorescence-950: #132500;
  --color-dark-olive: #283d00;
  --color-dark-olive-50: #ecfcda;
  --color-dark-olive-100: #e1f3cd;
  --color-dark-olive-200: #cbe0b3;
  --color-dark-olive-300: #b3cb98;
  --color-dark-olive-400: #93ac74;
  --color-dark-olive-500: #789158;
  --color-dark-olive-600: #5f773f;
  --color-dark-olive-700: #4a5f2c;
  --color-dark-olive-800: #394c1e;
  --color-dark-olive-900: #283d00;
  --color-dark-olive-950: #1a2608;
  --color-je-t-aime: #b16ca6;
  --color-je-t-aime-50: #fff0fc;
  --color-je-t-aime-100: #ffe1f9;
  --color-je-t-aime-200: #fbc4f1;
  --color-je-t-aime-300: #e9abde;
  --color-je-t-aime-400: #cc88c1;
  --color-je-t-aime-500: #b16ca6;
  --color-je-t-aime-600: #94528a;
  --color-je-t-aime-700: #793d70;
  --color-je-t-aime-800: #612c59;
  --color-je-t-aime-900: #4c2046;
  --color-je-t-aime-950: #31112d;
  --color-bubbles: #e4fffe;
  --color-bubbles-50: #e4fffe;
  --color-bubbles-100: #e2f2f1;
  --color-bubbles-200: #cbdedd;
  --color-bubbles-300: #b2c8c7;
  --color-bubbles-400: #90a8a7;
  --color-bubbles-500: #748c8b;
  --color-bubbles-600: #5a7170;
  --color-bubbles-700: #455a59;
  --color-bubbles-800: #344646;
  --color-bubbles-900: #263636;
  --color-bubbles-950: #162221;
}

Similar palettes