Start generating

Merguez to Lavender Candy color palette

5F0021Merguez773A68Bruise8E55AAVicious VioletC964D5LavenderF79297Fruity LiciousFFB4DBLavender Candy
Open in generator Export PNG, PDF, ASE…

About this palette

Merguez to Lavender Candy is a 6-color warm, gradient palette: #5F0021 (Merguez), #773A68 (Bruise), #8E55AA (Vicious Violet), #C964D5 (Lavender), #F79297 (Fruity Licious), #FFB4DB (Lavender Candy). It mixes red, purple, pink tones and feels warm overall. The strongest text pairing is #5F0021 on #FFB4DB with a contrast ratio of 8.49:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Merguezrgb(95, 0, 33)hsl(339, 100%, 19%)
Bruisergb(119, 58, 104)hsl(315, 34%, 35%)
Vicious Violetrgb(142, 85, 170)hsl(280, 33%, 50%)
Lavenderrgb(201, 100, 213)hsl(294, 57%, 61%)
Fruity Liciousrgb(247, 146, 151)hsl(357, 86%, 77%)
Lavender Candyrgb(255, 180, 219)hsl(329, 100%, 85%)

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.

  • Aa8.49:1 Very good#5F0021 on #FFB4DB
  • Aa8.49:1 Very good#FFB4DB on #5F0021
  • Aa6.31:1 Good#5F0021 on #F79297
  • Aa6.31:1 Good#F79297 on #5F0021
  • Aa4.94:1 Good#773A68 on #FFB4DB
  • Aa4.94:1 Good#FFB4DB on #773A68
  • Aa4.15:1 Poor#5F0021 on #C964D5
  • Aa4.15:1 Poor#C964D5 on #5F0021

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Merguez to Lavender Candy — https://swatchly.xyz/palette/5f0021-773a68-8e55aa-c964d5-f79297-ffb4db */
:root {
  --merguez: #5f0021;
  --bruise: #773a68;
  --vicious-violet: #8e55aa;
  --lavender: #c964d5;
  --fruity-licious: #f79297;
  --lavender-candy: #ffb4db;
}

Tailwind CSS v4

/* Merguez to Lavender Candy — https://swatchly.xyz/palette/5f0021-773a68-8e55aa-c964d5-f79297-ffb4db */
@theme {
  --color-merguez: #5f0021;
  --color-merguez-50: #fff1f3;
  --color-merguez-100: #ffe3e6;
  --color-merguez-200: #ffc6cd;
  --color-merguez-300: #fda4b1;
  --color-merguez-400: #e0808f;
  --color-merguez-500: #c36373;
  --color-merguez-600: #a44859;
  --color-merguez-700: #863344;
  --color-merguez-800: #6b2433;
  --color-merguez-900: #5f0021;
  --color-merguez-950: #370c16;
  --color-bruise: #773a68;
  --color-bruise-50: #fff0fa;
  --color-bruise-100: #ffe1f6;
  --color-bruise-200: #fac4ea;
  --color-bruise-300: #e7aad5;
  --color-bruise-400: #c988b7;
  --color-bruise-500: #ad6b9b;
  --color-bruise-600: #8f517f;
  --color-bruise-700: #773a68;
  --color-bruise-800: #5d2d51;
  --color-bruise-900: #4a2040;
  --color-bruise-950: #2f1228;
  --color-vicious-violet: #8e55aa;
  --color-vicious-violet-50: #faf1ff;
  --color-vicious-violet-100: #f6e5ff;
  --color-vicious-violet-200: #edcbff;
  --color-vicious-violet-300: #dfadfa;
  --color-vicious-violet-400: #c38be0;
  --color-vicious-violet-500: #a96fc6;
  --color-vicious-violet-600: #8e55aa;
  --color-vicious-violet-700: #733f8d;
  --color-vicious-violet-800: #5c2e72;
  --color-vicious-violet-900: #48205b;
  --color-vicious-violet-950: #2e113c;
  --color-lavender: #c964d5;
  --color-lavender-50: #fef4ff;
  --color-lavender-100: #fde8ff;
  --color-lavender-200: #facdff;
  --color-lavender-300: #f7aaff;
  --color-lavender-400: #e183ec;
  --color-lavender-500: #c964d5;
  --color-lavender-600: #a945b5;
  --color-lavender-700: #8b2c96;
  --color-lavender-800: #70197a;
  --color-lavender-900: #570b60;
  --color-lavender-950: #38033e;
  --color-fruity-licious: #f79297;
  --color-fruity-licious-50: #ffe8e8;
  --color-fruity-licious-100: #ffd6d7;
  --color-fruity-licious-200: #ffb6b8;
  --color-fruity-licious-300: #f79297;
  --color-fruity-licious-400: #d6767c;
  --color-fruity-licious-500: #bb5c63;
  --color-fruity-licious-600: #9e454c;
  --color-fruity-licious-700: #83333b;
  --color-fruity-licious-800: #6c252c;
  --color-fruity-licious-900: #581a22;
  --color-fruity-licious-950: #3a0d13;
  --color-lavender-candy: #ffb4db;
  --color-lavender-candy-50: #ffe7f3;
  --color-lavender-candy-100: #ffd6ea;
  --color-lavender-candy-200: #ffb4db;
  --color-lavender-candy-300: #e4a3c4;
  --color-lavender-candy-400: #c883a7;
  --color-lavender-candy-500: #ad698e;
  --color-lavender-candy-600: #915174;
  --color-lavender-candy-700: #783d5e;
  --color-lavender-candy-800: #612e4b;
  --color-lavender-candy-900: #4d213a;
  --color-lavender-candy-950: #321324;
}

Similar palettes