Aquamarine to Widowmaker Color Palette

About this palette

Aquamarine to Widowmaker is a 6-color vibrant, cool palette: #00DFB9 (Aquamarine), #FF5C5E (Fusion Red), #8A7EFF (Periwinkle), #0096A0 (Oasis), #B95700 (Bloodhound), #A0A4FF (Widowmaker). It mixes turquoise, red, purple, brown tones and feels cool overall. The strongest text pairing is #00DFB9 on #B95700 with a contrast ratio of 2.77:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Aquamarine	rgb(0, 223, 185)	hsl(170, 100%, 44%)
Fusion Red	rgb(255, 92, 94)	hsl(359, 100%, 68%)
Periwinkle	rgb(138, 126, 255)	hsl(246, 100%, 75%)
Oasis	rgb(0, 150, 160)	hsl(184, 100%, 31%)
Bloodhound	rgb(185, 87, 0)	hsl(28, 100%, 36%)
Widowmaker	rgb(160, 164, 255)	hsl(237, 100%, 81%)

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

/* Aquamarine to Widowmaker — https://swatchly.xyz/palette/00dfb9-ff5c5e-8a7eff-0096a0-b95700-a0a4ff */
:root {
  --aquamarine: #00dfb9;
  --fusion-red: #ff5c5e;
  --periwinkle: #8a7eff;
  --oasis: #0096a0;
  --bloodhound: #b95700;
  --widowmaker: #a0a4ff;
}

Tailwind CSS v4

/* Aquamarine to Widowmaker — https://swatchly.xyz/palette/00dfb9-ff5c5e-8a7eff-0096a0-b95700-a0a4ff */
@theme {
  --color-aquamarine: #00dfb9;
  --color-aquamarine-50: #d7fff2;
  --color-aquamarine-100: #a7ffe6;
  --color-aquamarine-200: #7defd1;
  --color-aquamarine-300: #00dfb9;
  --color-aquamarine-400: #00bb9b;
  --color-aquamarine-500: #009c81;
  --color-aquamarine-600: #007e67;
  --color-aquamarine-700: #006452;
  --color-aquamarine-800: #004e40;
  --color-aquamarine-900: #003d31;
  --color-aquamarine-950: #00261e;
  --color-fusion-red: #ff5c5e;
  --color-fusion-red-50: #ffefed;
  --color-fusion-red-100: #ffe0dd;
  --color-fusion-red-200: #ffc2be;
  --color-fusion-red-300: #ff9d98;
  --color-fusion-red-400: #ff5c5e;
  --color-fusion-red-500: #df3d44;
  --color-fusion-red-600: #bf1c2d;
  --color-fusion-red-700: #9e001d;
  --color-fusion-red-800: #7e0015;
  --color-fusion-red-900: #64000e;
  --color-fusion-red-950: #430006;
  --color-periwinkle: #8a7eff;
  --color-periwinkle-50: #eeefff;
  --color-periwinkle-100: #e0e1ff;
  --color-periwinkle-200: #c7c8ff;
  --color-periwinkle-300: #acaaff;
  --color-periwinkle-400: #8a7eff;
  --color-periwinkle-500: #7364e2;
  --color-periwinkle-600: #5d4bc3;
  --color-periwinkle-700: #4a38a5;
  --color-periwinkle-800: #3a2989;
  --color-periwinkle-900: #2e1e71;
  --color-periwinkle-950: #1d114e;
  --color-oasis: #0096a0;
  --color-oasis-50: #dbfcff;
  --color-oasis-100: #b7f8fe;
  --color-oasis-200: #97e6ed;
  --color-oasis-300: #73d1d9;
  --color-oasis-400: #41b2bc;
  --color-oasis-500: #0096a0;
  --color-oasis-600: #007981;
  --color-oasis-700: #006067;
  --color-oasis-800: #004b51;
  --color-oasis-900: #003a3f;
  --color-oasis-950: #002428;
  --color-bloodhound: #b95700;
  --color-bloodhound-50: #fff2eb;
  --color-bloodhound-100: #ffe8dc;
  --color-bloodhound-200: #ffd1b7;
  --color-bloodhound-300: #ffb387;
  --color-bloodhound-400: #ee8d51;
  --color-bloodhound-500: #d5712e;
  --color-bloodhound-600: #b95700;
  --color-bloodhound-700: #944400;
  --color-bloodhound-800: #753400;
  --color-bloodhound-900: #5a2700;
  --color-bloodhound-950: #3a1700;
  --color-widowmaker: #a0a4ff;
  --color-widowmaker-50: #f9f9ff;
  --color-widowmaker-100: #eff1ff;
  --color-widowmaker-200: #dadeff;
  --color-widowmaker-300: #c2c7ff;
  --color-widowmaker-400: #a0a4ff;
  --color-widowmaker-500: #8386dd;
  --color-widowmaker-600: #6768bd;
  --color-widowmaker-700: #50509e;
  --color-widowmaker-800: #3d3c80;
  --color-widowmaker-900: #2d2b65;
  --color-widowmaker-950: #1a1941;
}