Spicy Berry to Mustard Color Palette

About this palette

Spicy Berry to Mustard is a 6-color vibrant palette: #C23763 (Spicy Berry), #98C200 (Bergamot), #5CA0FF (Polar Glow), #9D7D00 (Bronze), #8BA600 (Noxious), #D1B600 (Mustard). It mixes red, green, blue, yellow tones and feels balanced overall. The strongest text pairing is #C23763 on #D1B600 with a contrast ratio of 2.59:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Spicy Berry	rgb(194, 55, 99)	hsl(341, 56%, 49%)
Bergamot	rgb(152, 194, 0)	hsl(73, 100%, 38%)
Polar Glow	rgb(92, 160, 255)	hsl(215, 100%, 68%)
Bronze	rgb(157, 125, 0)	hsl(48, 100%, 31%)
Noxious	rgb(139, 166, 0)	hsl(70, 100%, 33%)
Mustard	rgb(209, 182, 0)	hsl(52, 100%, 41%)

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

/* Spicy Berry to Mustard — https://swatchly.xyz/palette/c23763-98c200-5ca0ff-9d7d00-8ba600-d1b600 */
:root {
  --spicy-berry: #c23763;
  --bergamot: #98c200;
  --polar-glow: #5ca0ff;
  --bronze: #9d7d00;
  --noxious: #8ba600;
  --mustard: #d1b600;
}

Tailwind CSS v4

/* Spicy Berry to Mustard — https://swatchly.xyz/palette/c23763-98c200-5ca0ff-9d7d00-8ba600-d1b600 */
@theme {
  --color-spicy-berry: #c23763;
  --color-spicy-berry-50: #fff1f3;
  --color-spicy-berry-100: #ffe5e9;
  --color-spicy-berry-200: #ffcad4;
  --color-spicy-berry-300: #ffa9bb;
  --color-spicy-berry-400: #fb7496;
  --color-spicy-berry-500: #e0547c;
  --color-spicy-berry-600: #c23763;
  --color-spicy-berry-700: #a11e4c;
  --color-spicy-berry-800: #83093a;
  --color-spicy-berry-900: #68002b;
  --color-spicy-berry-950: #44001a;
  --color-bergamot: #98c200;
  --color-bergamot-50: #f5ffe4;
  --color-bergamot-100: #e5ffb3;
  --color-bergamot-200: #d0f08f;
  --color-bergamot-300: #b9dd69;
  --color-bergamot-400: #98c200;
  --color-bergamot-500: #7ea100;
  --color-bergamot-600: #648100;
  --color-bergamot-700: #4e6600;
  --color-bergamot-800: #3c4e00;
  --color-bergamot-900: #2c3b00;
  --color-bergamot-950: #192400;
  --color-polar-glow: #5ca0ff;
  --color-polar-glow-50: #eef5ff;
  --color-polar-glow-100: #deebff;
  --color-polar-glow-200: #bdd8ff;
  --color-polar-glow-300: #96c2ff;
  --color-polar-glow-400: #5ca0ff;
  --color-polar-glow-500: #4184e0;
  --color-polar-glow-600: #2769c1;
  --color-polar-glow-700: #1252a2;
  --color-polar-glow-800: #043f85;
  --color-polar-glow-900: #00306b;
  --color-polar-glow-950: #001d47;
  --color-bronze: #9d7d00;
  --color-bronze-50: #fff4d4;
  --color-bronze-100: #fde8ae;
  --color-bronze-200: #ecd38d;
  --color-bronze-300: #d7bb69;
  --color-bronze-400: #b99a39;
  --color-bronze-500: #9d7d00;
  --color-bronze-600: #7f6400;
  --color-bronze-700: #654f00;
  --color-bronze-800: #4f3e00;
  --color-bronze-900: #3e3000;
  --color-bronze-950: #271d00;
  --color-noxious: #8ba600;
  --color-noxious-50: #e9fcb5;
  --color-noxious-100: #dcf1a1;
  --color-noxious-200: #c5de7c;
  --color-noxious-300: #acc654;
  --color-noxious-400: #8ba600;
  --color-noxious-500: #738a00;
  --color-noxious-600: #5d7000;
  --color-noxious-700: #4a5900;
  --color-noxious-800: #394600;
  --color-noxious-900: #2c3700;
  --color-noxious-950: #1c2300;
  --color-mustard: #d1b600;
  --color-mustard-50: #fff1a9;
  --color-mustard-100: #f6e590;
  --color-mustard-200: #e4cf67;
  --color-mustard-300: #d1b600;
  --color-mustard-400: #b09900;
  --color-mustard-500: #937f00;
  --color-mustard-600: #776700;
  --color-mustard-700: #5f5200;
  --color-mustard-800: #4c4100;
  --color-mustard-900: #3c3300;
  --color-mustard-950: #251f00;
}