Start generating

Viola to Pleasant Purple color palette

A172C9ViolaE5FEFFBubblesF2B800Curry Bubbles002123Sunken Ship503700Pineapple9240AEPleasant Purple
Open in generator Export PNG, PDF, ASE…

About this palette

Viola to Pleasant Purple is a 6-color palette: #A172C9 (Viola), #E5FEFF (Bubbles), #F2B800 (Curry Bubbles), #002123 (Sunken Ship), #503700 (Pineapple), #9240AE (Pleasant Purple). It mixes purple, white, yellow, turquoise, brown tones and feels cool overall. The strongest text pairing is #E5FEFF on #002123 with a contrast ratio of 16.07:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Violargb(161, 114, 201)hsl(272, 45%, 62%)
Bubblesrgb(229, 254, 255)hsl(182, 100%, 95%)
Curry Bubblesrgb(242, 184, 0)hsl(46, 100%, 47%)
Sunken Shiprgb(0, 33, 35)hsl(183, 100%, 7%)
Pineapplergb(80, 55, 0)hsl(41, 100%, 16%)
Pleasant Purplergb(146, 64, 174)hsl(285, 46%, 47%)

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.

  • Aa16.07:1 Super#E5FEFF on #002123
  • Aa16.07:1 Super#002123 on #E5FEFF
  • Aa10.57:1 Very good#E5FEFF on #503700
  • Aa10.57:1 Very good#503700 on #E5FEFF
  • Aa9.37:1 Very good#F2B800 on #002123
  • Aa9.37:1 Very good#002123 on #F2B800
  • Aa6.16:1 Good#F2B800 on #503700
  • Aa6.16:1 Good#503700 on #F2B800

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Viola to Pleasant Purple — https://swatchly.xyz/palette/a172c9-e5feff-f2b800-002123-503700-9240ae */
:root {
  --viola: #a172c9;
  --bubbles: #e5feff;
  --curry-bubbles: #f2b800;
  --sunken-ship: #002123;
  --pineapple: #503700;
  --pleasant-purple: #9240ae;
}

Tailwind CSS v4

/* Viola to Pleasant Purple — https://swatchly.xyz/palette/a172c9-e5feff-f2b800-002123-503700-9240ae */
@theme {
  --color-viola: #a172c9;
  --color-viola-50: #f9f3ff;
  --color-viola-100: #f3e7ff;
  --color-viola-200: #e7ceff;
  --color-viola-300: #d8b0fd;
  --color-viola-400: #bb8ee3;
  --color-viola-500: #a172c9;
  --color-viola-600: #8557aa;
  --color-viola-700: #6b418d;
  --color-viola-800: #552f73;
  --color-viola-900: #42225b;
  --color-viola-950: #2a133c;
  --color-bubbles: #e5feff;
  --color-bubbles-50: #e5feff;
  --color-bubbles-100: #e2f1f2;
  --color-bubbles-200: #ccdede;
  --color-bubbles-300: #b3c7c8;
  --color-bubbles-400: #91a7a8;
  --color-bubbles-500: #758c8d;
  --color-bubbles-600: #5b7171;
  --color-bubbles-700: #465a5a;
  --color-bubbles-800: #354647;
  --color-bubbles-900: #273637;
  --color-bubbles-950: #172122;
  --color-curry-bubbles: #f2b800;
  --color-curry-bubbles-50: #fff5df;
  --color-curry-bubbles-100: #ffeabd;
  --color-curry-bubbles-200: #fdd274;
  --color-curry-bubbles-300: #f2b800;
  --color-curry-bubbles-400: #cb9a00;
  --color-curry-bubbles-500: #a98000;
  --color-curry-bubbles-600: #886600;
  --color-curry-bubbles-700: #6d5100;
  --color-curry-bubbles-800: #553f00;
  --color-curry-bubbles-900: #423000;
  --color-curry-bubbles-950: #2a1d00;
  --color-sunken-ship: #002123;
  --color-sunken-ship-50: #e6fafb;
  --color-sunken-ship-100: #daf0f2;
  --color-sunken-ship-200: #c3dedf;
  --color-sunken-ship-300: #a9c8c9;
  --color-sunken-ship-400: #87a9ab;
  --color-sunken-ship-500: #6b8d8f;
  --color-sunken-ship-600: #517173;
  --color-sunken-ship-700: #3c595b;
  --color-sunken-ship-800: #2b4547;
  --color-sunken-ship-900: #1e3435;
  --color-sunken-ship-950: #002123;
  --color-pineapple: #503700;
  --color-pineapple-50: #fff4e1;
  --color-pineapple-100: #fbe9ca;
  --color-pineapple-200: #ebd4af;
  --color-pineapple-300: #d5bc92;
  --color-pineapple-400: #b69b6c;
  --color-pineapple-500: #9a7e4e;
  --color-pineapple-600: #7d6334;
  --color-pineapple-700: #634c21;
  --color-pineapple-800: #503700;
  --color-pineapple-900: #3b2b0b;
  --color-pineapple-950: #251904;
  --color-pleasant-purple: #9240ae;
  --color-pleasant-purple-50: #fbf1ff;
  --color-pleasant-purple-100: #f7e3ff;
  --color-pleasant-purple-200: #efc5ff;
  --color-pleasant-purple-300: #e6a2ff;
  --color-pleasant-purple-400: #ca7be7;
  --color-pleasant-purple-500: #af5ccc;
  --color-pleasant-purple-600: #9240ae;
  --color-pleasant-purple-700: #772c90;
  --color-pleasant-purple-800: #601d75;
  --color-pleasant-purple-900: #4b115e;
  --color-pleasant-purple-950: #31073e;
}

Similar palettes