Mai Tai to Acapulco Dive color palette

A96327Mai Tai E5E1B8Buttered 2E5990Glimpse of Void 482416Torrefacto Roast 72A7E9Acapulco Dive

About this palette

Mai Tai to Acapulco Dive is a 5-color warm, earthy, vintage palette: #A96327 (Mai Tai), #E5E1B8 (Buttered), #2E5990 (Glimpse of Void), #482416 (Torrefacto Roast), #72A7E9 (Acapulco Dive). It mixes brown, yellow, blue tones and feels warm overall. The strongest text pairing is #E5E1B8 on #482416 with a contrast ratio of 10.26:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mai Tai	rgb(169, 99, 39)	hsl(28, 62%, 41%)
Buttered	rgb(229, 225, 184)	hsl(55, 46%, 81%)
Glimpse of Void	rgb(46, 89, 144)	hsl(214, 52%, 37%)
Torrefacto Roast	rgb(72, 36, 22)	hsl(17, 53%, 18%)
Acapulco Dive	rgb(114, 167, 233)	hsl(213, 73%, 68%)

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.

Aa10.26:1 Very good#E5E1B8 on #482416
Aa10.26:1 Very good#482416 on #E5E1B8
Aa5.47:1 Good#482416 on #72A7E9
Aa5.47:1 Good#72A7E9 on #482416
Aa5.36:1 Good#E5E1B8 on #2E5990
Aa5.36:1 Good#2E5990 on #E5E1B8
Aa3.51:1 Poor#A96327 on #E5E1B8
Aa3.51:1 Poor#E5E1B8 on #A96327

Color blindness preview

CSS variables

/* Mai Tai to Acapulco Dive — https://swatchly.xyz/palette/a96327-e5e1b8-2e5990-482416-72a7e9 */
:root {
  --mai-tai: #a96327;
  --buttered: #e5e1b8;
  --glimpse-of-void: #2e5990;
  --torrefacto-roast: #482416;
  --acapulco-dive: #72a7e9;
}

Tailwind CSS v4

/* Mai Tai to Acapulco Dive — https://swatchly.xyz/palette/a96327-e5e1b8-2e5990-482416-72a7e9 */
@theme {
  --color-mai-tai: #a96327;
  --color-mai-tai-50: #fff2ea;
  --color-mai-tai-100: #ffe8d9;
  --color-mai-tai-200: #ffd1b0;
  --color-mai-tai-300: #f7b889;
  --color-mai-tai-400: #dd9762;
  --color-mai-tai-500: #c47c43;
  --color-mai-tai-600: #a96327;
  --color-mai-tai-700: #8b4b0c;
  --color-mai-tai-800: #6f3900;
  --color-mai-tai-900: #562b00;
  --color-mai-tai-950: #381900;
  --color-buttered: #e5e1b8;
  --color-buttered-50: #fdfbe6;
  --color-buttered-100: #f5f3db;
  --color-buttered-200: #e5e1b8;
  --color-buttered-300: #ccc9a8;
  --color-buttered-400: #aca883;
  --color-buttered-500: #8f8b65;
  --color-buttered-600: #73704b;
  --color-buttered-700: #5b5836;
  --color-buttered-800: #474326;
  --color-buttered-900: #37341b;
  --color-buttered-950: #22200e;
  --color-glimpse-of-void: #2e5990;
  --color-glimpse-of-void-50: #eff6ff;
  --color-glimpse-of-void-100: #dfedff;
  --color-glimpse-of-void-200: #bfdbff;
  --color-glimpse-of-void-300: #9dc5fa;
  --color-glimpse-of-void-400: #7aa6e0;
  --color-glimpse-of-void-500: #5e8ac5;
  --color-glimpse-of-void-600: #4570a8;
  --color-glimpse-of-void-700: #2e5990;
  --color-glimpse-of-void-800: #224572;
  --color-glimpse-of-void-900: #17355b;
  --color-glimpse-of-void-950: #0b213c;
  --color-torrefacto-roast: #482416;
  --color-torrefacto-roast-50: #fff2ed;
  --color-torrefacto-roast-100: #ffe5db;
  --color-torrefacto-roast-200: #f2cfc1;
  --color-torrefacto-roast-300: #dfb7a8;
  --color-torrefacto-roast-400: #c19585;
  --color-torrefacto-roast-500: #a47969;
  --color-torrefacto-roast-600: #875f4f;
  --color-torrefacto-roast-700: #6d493b;
  --color-torrefacto-roast-800: #55362b;
  --color-torrefacto-roast-900: #482416;
  --color-torrefacto-roast-950: #291710;
  --color-acapulco-dive: #72a7e9;
  --color-acapulco-dive-50: #f0f7ff;
  --color-acapulco-dive-100: #e1eeff;
  --color-acapulco-dive-200: #c0dcff;
  --color-acapulco-dive-300: #9ac6ff;
  --color-acapulco-dive-400: #72a7e9;
  --color-acapulco-dive-500: #578bca;
  --color-acapulco-dive-600: #3d6fac;
  --color-acapulco-dive-700: #29578f;
  --color-acapulco-dive-800: #1a4474;
  --color-acapulco-dive-900: #10335c;
  --color-acapulco-dive-950: #061f3d;
}