La la Love to Bruise color palette

About this palette

La la Love to Bruise is a 5-color warm, vintage, monochromatic palette: #C694BB (La la Love), #463141 (Voodoo), #9B5E94 (Bermuda Onion), #DEAFD7 (Blushing Sky), #7D3F6B (Bruise). It mixes pink, purple tones and feels warm overall. The strongest text pairing is #463141 on #DEAFD7 with a contrast ratio of 6.32:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
La la Lovergb(198, 148, 187)hsl(313, 30%, 68%)
Voodoorgb(70, 49, 65)hsl(314, 18%, 23%)
Bermuda Onionrgb(155, 94, 148)hsl(307, 24%, 49%)
Blushing Skyrgb(222, 175, 215)hsl(309, 42%, 78%)
Bruisergb(125, 63, 107)hsl(317, 33%, 37%)

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.

  • Aa6.32:1 Good#463141 on #DEAFD7
  • Aa6.32:1 Good#DEAFD7 on #463141
  • Aa4.70:1 Good#C694BB on #463141
  • Aa4.70:1 Good#463141 on #C694BB
  • Aa4.01:1 Poor#DEAFD7 on #7D3F6B
  • Aa4.01:1 Poor#7D3F6B on #DEAFD7

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* La la Love to Bruise — https://swatchly.xyz/palette/c694bb-463141-9b5e94-deafd7-7d3f6b */
:root {
  --la-la-love: #c694bb;
  --voodoo: #463141;
  --bermuda-onion: #9b5e94;
  --blushing-sky: #deafd7;
  --bruise: #7d3f6b;
}

Tailwind CSS v4

/* La la Love to Bruise — https://swatchly.xyz/palette/c694bb-463141-9b5e94-deafd7-7d3f6b */
@theme {
  --color-la-la-love: #c694bb;
  --color-la-la-love-50: #fff3fc;
  --color-la-la-love-100: #ffe5f9;
  --color-la-la-love-200: #f4cdeb;
  --color-la-la-love-300: #e1b6d7;
  --color-la-la-love-400: #c694bb;
  --color-la-la-love-500: #a8789e;
  --color-la-la-love-600: #8b5d82;
  --color-la-la-love-700: #714768;
  --color-la-la-love-800: #5a3552;
  --color-la-la-love-900: #462740;
  --color-la-la-love-950: #2c1728;
  --color-voodoo: #463141;
  --color-voodoo-50: #fff0fb;
  --color-voodoo-100: #f6e5f2;
  --color-voodoo-200: #e5d1df;
  --color-voodoo-300: #d0b9ca;
  --color-voodoo-400: #b39aac;
  --color-voodoo-500: #988092;
  --color-voodoo-600: #7e6778;
  --color-voodoo-700: #675262;
  --color-voodoo-800: #54414f;
  --color-voodoo-900: #463141;
  --color-voodoo-950: #2c1f29;
  --color-bermuda-onion: #9b5e94;
  --color-bermuda-onion-50: #fff0fc;
  --color-bermuda-onion-100: #ffe4fb;
  --color-bermuda-onion-200: #facaf3;
  --color-bermuda-onion-300: #e9b2e2;
  --color-bermuda-onion-400: #cf92c7;
  --color-bermuda-onion-500: #b577ae;
  --color-bermuda-onion-600: #9b5e94;
  --color-bermuda-onion-700: #7f4779;
  --color-bermuda-onion-800: #663460;
  --color-bermuda-onion-900: #50254b;
  --color-bermuda-onion-950: #331530;
  --color-blushing-sky: #deafd7;
  --color-blushing-sky-50: #ffeffc;
  --color-blushing-sky-100: #fee0f9;
  --color-blushing-sky-200: #eecae8;
  --color-blushing-sky-300: #deafd7;
  --color-blushing-sky-400: #bc91b6;
  --color-blushing-sky-500: #a1759b;
  --color-blushing-sky-600: #855b7f;
  --color-blushing-sky-700: #6c4667;
  --color-blushing-sky-800: #563552;
  --color-blushing-sky-900: #432840;
  --color-blushing-sky-950: #2b1729;
  --color-bruise: #7d3f6b;
  --color-bruise-50: #fff0fa;
  --color-bruise-100: #ffe1f4;
  --color-bruise-200: #fbc5e9;
  --color-bruise-300: #e9acd5;
  --color-bruise-400: #cd8bb7;
  --color-bruise-500: #b16f9d;
  --color-bruise-600: #955682;
  --color-bruise-700: #7d3f6b;
  --color-bruise-800: #633054;
  --color-bruise-900: #4e2342;
  --color-bruise-950: #33142a;
}

Similar palettes