Vivid Violet to Bronze Color Palette

About this palette

Vivid Violet to Bronze is a 4-color vibrant, warm, neon palette: #A509FE (Vivid Violet), #EB7900 (Pumpkin Cat), #FF83E7 (Technolust), #AC7D00 (Bronze). It mixes purple, orange, pink, yellow tones and feels warm overall. The strongest text pairing is #A509FE on #FF83E7 with a contrast ratio of 2.37:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Vivid Violet	rgb(165, 9, 254)	hsl(278, 99%, 52%)
Pumpkin Cat	rgb(235, 121, 0)	hsl(31, 100%, 46%)
Technolust	rgb(255, 131, 231)	hsl(312, 100%, 76%)
Bronze	rgb(172, 125, 0)	hsl(44, 100%, 34%)

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

/* Vivid Violet to Bronze — https://swatchly.xyz/palette/a509fe-eb7900-ff83e7-ac7d00 */
:root {
  --vivid-violet: #a509fe;
  --pumpkin-cat: #eb7900;
  --technolust: #ff83e7;
  --bronze: #ac7d00;
}

Tailwind CSS v4

/* Vivid Violet to Bronze — https://swatchly.xyz/palette/a509fe-eb7900-ff83e7-ac7d00 */
@theme {
  --color-vivid-violet: #a509fe;
  --color-vivid-violet-50: #f6efff;
  --color-vivid-violet-100: #eddfff;
  --color-vivid-violet-200: #dec2ff;
  --color-vivid-violet-300: #cd9fff;
  --color-vivid-violet-400: #b868ff;
  --color-vivid-violet-500: #a509fe;
  --color-vivid-violet-600: #8600d0;
  --color-vivid-violet-700: #6b00a8;
  --color-vivid-violet-800: #550087;
  --color-vivid-violet-900: #43006c;
  --color-vivid-violet-950: #2c0049;
  --color-pumpkin-cat: #eb7900;
  --color-pumpkin-cat-50: #fff0e7;
  --color-pumpkin-cat-100: #ffe2d0;
  --color-pumpkin-cat-200: #ffc6a1;
  --color-pumpkin-cat-300: #ffa463;
  --color-pumpkin-cat-400: #eb7900;
  --color-pumpkin-cat-500: #c56400;
  --color-pumpkin-cat-600: #9f5000;
  --color-pumpkin-cat-700: #803f00;
  --color-pumpkin-cat-800: #653000;
  --color-pumpkin-cat-900: #502500;
  --color-pumpkin-cat-950: #341600;
  --color-technolust: #ff83e7;
  --color-technolust-50: #ffe9f9;
  --color-technolust-100: #ffd6f5;
  --color-technolust-200: #ffb3ee;
  --color-technolust-300: #ff83e7;
  --color-technolust-400: #dc66c7;
  --color-technolust-500: #c149ac;
  --color-technolust-600: #a32f91;
  --color-technolust-700: #871a77;
  --color-technolust-800: #6f0a61;
  --color-technolust-900: #59014e;
  --color-technolust-950: #3b0033;
  --color-bronze: #ac7d00;
  --color-bronze-50: #fff4e0;
  --color-bronze-100: #ffe8bf;
  --color-bronze-200: #f7d28e;
  --color-bronze-300: #e4ba6b;
  --color-bronze-400: #c7993b;
  --color-bronze-500: #ac7d00;
  --color-bronze-600: #8b6400;
  --color-bronze-700: #6f4f00;
  --color-bronze-800: #573d00;
  --color-bronze-900: #432f00;
  --color-bronze-950: #2b1c00;
}