Mai Tai to Night Fever Color Palette

About this palette

Mai Tai to Night Fever is a 5-color cool, vintage palette: #A16125 (Mai Tai), #FFCA92 (Torchlight), #5FB0A2 (Water Park), #002018 (Nightmare), #592F94 (Night Fever). It mixes brown, orange, turquoise, purple tones and feels cool overall. The strongest text pairing is #FFCA92 on #002018 with a contrast ratio of 11.57:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mai Tai	rgb(161, 97, 37)	hsl(29, 63%, 39%)
Torchlight	rgb(255, 202, 146)	hsl(31, 100%, 79%)
Water Park	rgb(95, 176, 162)	hsl(170, 34%, 53%)
Nightmare	rgb(0, 32, 24)	hsl(165, 100%, 6%)
Night Fever	rgb(89, 47, 148)	hsl(265, 52%, 38%)

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.57:1 Very good#FFCA92 on #002018
Aa11.57:1 Very good#002018 on #FFCA92
Aa6.74:1 Good#5FB0A2 on #002018
Aa6.74:1 Good#002018 on #5FB0A2
Aa6.25:1 Good#FFCA92 on #592F94
Aa6.25:1 Good#592F94 on #FFCA92
Aa3.64:1 Poor#5FB0A2 on #592F94
Aa3.64:1 Poor#592F94 on #5FB0A2

Color blindness preview

CSS variables

/* Mai Tai to Night Fever — https://swatchly.xyz/palette/a16125-ffca92-5fb0a2-002018-592f94 */
:root {
  --mai-tai: #a16125;
  --torchlight: #ffca92;
  --water-park: #5fb0a2;
  --nightmare: #002018;
  --night-fever: #592f94;
}

Tailwind CSS v4

/* Mai Tai to Night Fever — https://swatchly.xyz/palette/a16125-ffca92-5fb0a2-002018-592f94 */
@theme {
  --color-mai-tai: #a16125;
  --color-mai-tai-50: #fff3e9;
  --color-mai-tai-100: #ffe8d6;
  --color-mai-tai-200: #ffcfaa;
  --color-mai-tai-300: #f2b787;
  --color-mai-tai-400: #d79660;
  --color-mai-tai-500: #bd7b41;
  --color-mai-tai-600: #a16125;
  --color-mai-tai-700: #844a0d;
  --color-mai-tai-800: #6a3800;
  --color-mai-tai-900: #522a00;
  --color-mai-tai-950: #351900;
  --color-torchlight: #ffca92;
  --color-torchlight-50: #fff1e3;
  --color-torchlight-100: #ffe4c9;
  --color-torchlight-200: #ffca92;
  --color-torchlight-300: #e2b687;
  --color-torchlight-400: #c69561;
  --color-torchlight-500: #ab7a43;
  --color-torchlight-600: #8e602a;
  --color-torchlight-700: #744b16;
  --color-torchlight-800: #5e3908;
  --color-torchlight-900: #4a2b01;
  --color-torchlight-950: #301900;
  --color-water-park: #5fb0a2;
  --color-water-park-50: #d4fff6;
  --color-water-park-100: #c5f6ec;
  --color-water-park-200: #a9e4d8;
  --color-water-park-300: #8acec1;
  --color-water-park-400: #5fb0a2;
  --color-water-park-500: #429487;
  --color-water-park-600: #26796d;
  --color-water-park-700: #0d6257;
  --color-water-park-800: #004d44;
  --color-water-park-900: #003c34;
  --color-water-park-950: #002620;
  --color-nightmare: #002018;
  --color-nightmare-50: #e7faf4;
  --color-nightmare-100: #dbf1e9;
  --color-nightmare-200: #c4dfd5;
  --color-nightmare-300: #aac9bf;
  --color-nightmare-400: #89aa9f;
  --color-nightmare-500: #6c8e83;
  --color-nightmare-600: #517267;
  --color-nightmare-700: #3c5950;
  --color-nightmare-800: #2b443d;
  --color-nightmare-900: #1e332d;
  --color-nightmare-950: #002018;
  --color-night-fever: #592f94;
  --color-night-fever-50: #f6f3ff;
  --color-night-fever-100: #eee7ff;
  --color-night-fever-200: #dbccff;
  --color-night-fever-300: #c7acff;
  --color-night-fever-400: #a985ee;
  --color-night-fever-500: #8c66cf;
  --color-night-fever-600: #704aad;
  --color-night-fever-700: #592f94;
  --color-night-fever-800: #452672;
  --color-night-fever-900: #351b5b;
  --color-night-fever-950: #210e3c;
}