Extra Life to Black Market Color Palette

About this palette

Extra Life to Black Market is a 5-color vibrant, cool palette: #73B700 (Extra Life), #7C0351 (Velvet), #7A64D9 (Venus Violet), #B4EDA8 (Ice Ice), #23224B (Black Market). It mixes green, red, purple tones and feels cool overall. The strongest text pairing is #B4EDA8 on #23224B with a contrast ratio of 11.14:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Extra Life	rgb(115, 183, 0)	hsl(82, 100%, 36%)
Velvet	rgb(124, 3, 81)	hsl(321, 95%, 25%)
Venus Violet	rgb(122, 100, 217)	hsl(251, 61%, 62%)
Ice Ice	rgb(180, 237, 168)	hsl(110, 66%, 79%)
Black Market	rgb(35, 34, 75)	hsl(241, 38%, 21%)

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.

Aa11.14:1 Very good#B4EDA8 on #23224B
Aa11.14:1 Very good#23224B on #B4EDA8
Aa7.85:1 Very good#7C0351 on #B4EDA8
Aa7.85:1 Very good#B4EDA8 on #7C0351
Aa6.06:1 Good#73B700 on #23224B
Aa6.06:1 Good#23224B on #73B700
Aa4.27:1 Poor#73B700 on #7C0351
Aa4.27:1 Poor#7C0351 on #73B700

Color blindness preview

CSS variables

/* Extra Life to Black Market — https://swatchly.xyz/palette/73b700-7c0351-7a64d9-b4eda8-23224b */
:root {
  --extra-life: #73b700;
  --velvet: #7c0351;
  --venus-violet: #7a64d9;
  --ice-ice: #b4eda8;
  --black-market: #23224b;
}

Tailwind CSS v4

/* Extra Life to Black Market — https://swatchly.xyz/palette/73b700-7c0351-7a64d9-b4eda8-23224b */
@theme {
  --color-extra-life: #73b700;
  --color-extra-life-50: #e5ffcf;
  --color-extra-life-100: #cefca6;
  --color-extra-life-200: #b5ea83;
  --color-extra-life-300: #99d55b;
  --color-extra-life-400: #73b700;
  --color-extra-life-500: #5f9800;
  --color-extra-life-600: #4c7b00;
  --color-extra-life-700: #3b6200;
  --color-extra-life-800: #2d4c00;
  --color-extra-life-900: #223b00;
  --color-extra-life-950: #132500;
  --color-velvet: #7c0351;
  --color-velvet-50: #fff1f7;
  --color-velvet-100: #ffe2ef;
  --color-velvet-200: #ffc4df;
  --color-velvet-300: #ff9ece;
  --color-velvet-400: #e777b1;
  --color-velvet-500: #cb5996;
  --color-velvet-600: #ac3e7b;
  --color-velvet-700: #8f2963;
  --color-velvet-800: #7c0351;
  --color-velvet-900: #5d0e3e;
  --color-velvet-950: #3e0527;
  --color-venus-violet: #7a64d9;
  --color-venus-violet-50: #f2f1ff;
  --color-venus-violet-100: #e5e4ff;
  --color-venus-violet-200: #cfcaff;
  --color-venus-violet-300: #b6adff;
  --color-venus-violet-400: #9683f8;
  --color-venus-violet-500: #7a64d9;
  --color-venus-violet-600: #634cba;
  --color-venus-violet-700: #4f389c;
  --color-venus-violet-800: #3e2980;
  --color-venus-violet-900: #301e68;
  --color-venus-violet-950: #1e1047;
  --color-ice-ice: #b4eda8;
  --color-ice-ice-50: #e9ffe4;
  --color-ice-ice-100: #d7f9d0;
  --color-ice-ice-200: #b4eda8;
  --color-ice-ice-300: #a4d39a;
  --color-ice-ice-400: #80b475;
  --color-ice-ice-500: #629857;
  --color-ice-ice-600: #487c3d;
  --color-ice-ice-700: #34632a;
  --color-ice-ice-800: #244e1b;
  --color-ice-ice-900: #193c11;
  --color-ice-ice-950: #0c2607;
  --color-black-market: #23224b;
  --color-black-market-50: #f3f4ff;
  --color-black-market-100: #e7e9ff;
  --color-black-market-200: #d1d4fc;
  --color-black-market-300: #b9bde9;
  --color-black-market-400: #9a9dcd;
  --color-black-market-500: #8083b4;
  --color-black-market-600: #686a99;
  --color-black-market-700: #545681;
  --color-black-market-800: #43446b;
  --color-black-market-900: #363759;
  --color-black-market-950: #23224b;
}