Skinny Jeans to Mona Lisa Color Palette

About this palette

Skinny Jeans to Mona Lisa is a 4-color vibrant, neon palette: #5284FF (Skinny Jeans), #8C37FF (Purple Climax), #C1A100 (Mustard Seed), #FF9585 (Mona Lisa). It mixes blue, purple, yellow, red tones and feels balanced overall. The strongest text pairing is #8C37FF on #FF9585 with a contrast ratio of 2.41:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Skinny Jeans	rgb(82, 132, 255)	hsl(223, 100%, 66%)
Purple Climax	rgb(140, 55, 255)	hsl(266, 100%, 61%)
Mustard Seed	rgb(193, 161, 0)	hsl(50, 100%, 38%)
Mona Lisa	rgb(255, 149, 133)	hsl(8, 100%, 76%)

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

CSS variables

/* Skinny Jeans to Mona Lisa — https://swatchly.xyz/palette/5284ff-8c37ff-c1a100-ff9585 */
:root {
  --skinny-jeans: #5284ff;
  --purple-climax: #8c37ff;
  --mustard-seed: #c1a100;
  --mona-lisa: #ff9585;
}

Tailwind CSS v4

/* Skinny Jeans to Mona Lisa — https://swatchly.xyz/palette/5284ff-8c37ff-c1a100-ff9585 */
@theme {
  --color-skinny-jeans: #5284ff;
  --color-skinny-jeans-50: #f2f6ff;
  --color-skinny-jeans-100: #e5eeff;
  --color-skinny-jeans-200: #cadbff;
  --color-skinny-jeans-300: #aac5ff;
  --color-skinny-jeans-400: #7ca4ff;
  --color-skinny-jeans-500: #5284ff;
  --color-skinny-jeans-600: #3966dd;
  --color-skinny-jeans-700: #264ebc;
  --color-skinny-jeans-800: #183a9b;
  --color-skinny-jeans-900: #0e2a7d;
  --color-skinny-jeans-950: #051854;
  --color-purple-climax: #8c37ff;
  --color-purple-climax-50: #f6f3ff;
  --color-purple-climax-100: #efeaff;
  --color-purple-climax-200: #dfd5ff;
  --color-purple-climax-300: #ccbbff;
  --color-purple-climax-400: #b394ff;
  --color-purple-climax-500: #9e6cff;
  --color-purple-climax-600: #8c37ff;
  --color-purple-climax-700: #7311da;
  --color-purple-climax-800: #5a00b1;
  --color-purple-climax-900: #45008a;
  --color-purple-climax-950: #2c005c;
  --color-mustard-seed: #c1a100;
  --color-mustard-seed-50: #fff6d5;
  --color-mustard-seed-100: #ffeca8;
  --color-mustard-seed-200: #efd884;
  --color-mustard-seed-300: #dcc15c;
  --color-mustard-seed-400: #c1a100;
  --color-mustard-seed-500: #a18600;
  --color-mustard-seed-600: #816b00;
  --color-mustard-seed-700: #675500;
  --color-mustard-seed-800: #504200;
  --color-mustard-seed-900: #3e3200;
  --color-mustard-seed-950: #271f00;
  --color-mona-lisa: #ff9585;
  --color-mona-lisa-50: #ffeae7;
  --color-mona-lisa-100: #ffdad4;
  --color-mona-lisa-200: #ffbcb0;
  --color-mona-lisa-300: #ff9585;
  --color-mona-lisa-400: #dd786a;
  --color-mona-lisa-500: #c15e50;
  --color-mona-lisa-600: #a44539;
  --color-mona-lisa-700: #883228;
  --color-mona-lisa-800: #6f241c;
  --color-mona-lisa-900: #5a1912;
  --color-mona-lisa-950: #3b0d08;
}