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
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Purple Sultan | rgb(134, 49, 126) | hsl(306, 46%, 36%) | |
| Fluorescence | rgb(156, 205, 110) | hsl(91, 49%, 62%) | |
| Dark Olive | rgb(40, 61, 0) | hsl(81, 100%, 12%) | |
| Je t’aime | rgb(177, 108, 166) | hsl(310, 31%, 56%) | |
| Bubbles | rgb(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 #283D00 on #E4FFFE
- Aa11.40:1 #E4FFFE on #283D00
- Aa7.27:1 #86317E on #E4FFFE
- Aa7.27:1 #E4FFFE on #86317E
- Aa6.47:1 #9CCD6E on #283D00
- Aa6.47:1 #283D00 on #9CCD6E
- Aa4.13:1 #86317E on #9CCD6E
- Aa4.13:1 #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
- 77475C004232A5D0BEBA6D8CD494AAE7FFF6Nocturne Red to Snow White
- C5E4FFA3C76DC561830073B5723640272E00Salty Ice to Darkest Forest
- 35401D764FA4A48FC1A3C787EADEFEForestry to Grape Taffy
- A172C9E5FEFFF2B8000021235037009240AEViola to Pleasant Purple
- 244D3280459EBE768993D598E4D7FFPalm Leaf to Scented Spring
- 526BF7DEEBFF87107FA4C8622B3100Secret of Mana to Wasabi Nori
- 004E1B9A61994EC988FFF1FCMysterious Mixture to Partial Pink
- 7A1B5C007B53B76D9F8AD9A5E7FFF0Velvet to Snow White