Pleasant Purple to Persicus Color Palette

About this palette

Pleasant Purple to Persicus is a 4-color cool palette: #852E9A (Pleasant Purple), #5AA645 (Jungle Jewels), #00343F (Nordic Noir), #FFB397 (Persicus). It mixes purple, green, blue, orange tones and feels cool overall. The strongest text pairing is #00343F on #FFB397 with a contrast ratio of 7.77:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pleasant Purple	rgb(133, 46, 154)	hsl(288, 54%, 39%)
Jungle Jewels	rgb(90, 166, 69)	hsl(107, 41%, 46%)
Nordic Noir	rgb(0, 52, 63)	hsl(190, 100%, 12%)
Persicus	rgb(255, 179, 151)	hsl(16, 100%, 80%)

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.

Aa7.77:1 Very good#00343F on #FFB397
Aa7.77:1 Very good#FFB397 on #00343F
Aa4.46:1 Poor#5AA645 on #00343F
Aa4.46:1 Poor#00343F on #5AA645
Aa4.26:1 Poor#852E9A on #FFB397
Aa4.26:1 Poor#FFB397 on #852E9A

Color blindness preview

CSS variables

/* Pleasant Purple to Persicus — https://swatchly.xyz/palette/852e9a-5aa645-00343f-ffb397 */
:root {
  --pleasant-purple: #852e9a;
  --jungle-jewels: #5aa645;
  --nordic-noir: #00343f;
  --persicus: #ffb397;
}

Tailwind CSS v4

/* Pleasant Purple to Persicus — https://swatchly.xyz/palette/852e9a-5aa645-00343f-ffb397 */
@theme {
  --color-pleasant-purple: #852e9a;
  --color-pleasant-purple-50: #fcf1ff;
  --color-pleasant-purple-100: #f9e2ff;
  --color-pleasant-purple-200: #f3c6ff;
  --color-pleasant-purple-300: #eca4ff;
  --color-pleasant-purple-400: #d27fe8;
  --color-pleasant-purple-500: #b862ce;
  --color-pleasant-purple-600: #9c47b2;
  --color-pleasant-purple-700: #852e9a;
  --color-pleasant-purple-800: #6a207b;
  --color-pleasant-purple-900: #541463;
  --color-pleasant-purple-950: #370742;
  --color-jungle-jewels: #5aa645;
  --color-jungle-jewels-50: #e8ffe2;
  --color-jungle-jewels-100: #d0fec4;
  --color-jungle-jewels-200: #b8efaa;
  --color-jungle-jewels-300: #9ddc8d;
  --color-jungle-jewels-400: #78c065;
  --color-jungle-jewels-500: #5aa645;
  --color-jungle-jewels-600: #3d8826;
  --color-jungle-jewels-700: #266d09;
  --color-jungle-jewels-800: #195600;
  --color-jungle-jewels-900: #114200;
  --color-jungle-jewels-950: #072900;
  --color-nordic-noir: #00343f;
  --color-nordic-noir-50: #e5f9ff;
  --color-nordic-noir-100: #d4f1fa;
  --color-nordic-noir-200: #bbdfe9;
  --color-nordic-noir-300: #a0c9d4;
  --color-nordic-noir-400: #7ca9b5;
  --color-nordic-noir-500: #5e8c99;
  --color-nordic-noir-600: #44717d;
  --color-nordic-noir-700: #305863;
  --color-nordic-noir-800: #20444d;
  --color-nordic-noir-900: #00343f;
  --color-nordic-noir-950: #0a1f24;
  --color-persicus: #ffb397;
  --color-persicus-50: #fff7f4;
  --color-persicus-100: #ffebe4;
  --color-persicus-200: #ffd2c2;
  --color-persicus-300: #ffb397;
  --color-persicus-400: #d9947a;
  --color-persicus-500: #bc765c;
  --color-persicus-600: #9e5b41;
  --color-persicus-700: #81442d;
  --color-persicus-800: #67321e;
  --color-persicus-900: #512413;
  --color-persicus-950: #351508;
}