Lunatic Lynx to Macaroon Color Palette

About this palette

Lunatic Lynx to Macaroon is a 5-color cool, vintage palette: #E5AD91 (Lunatic Lynx), #1B455E (One Year of Rain), #36607B (Atlantis), #2E97B2 (Enchanted Well), #BA9077 (Macaroon). It mixes orange, blue tones and feels cool overall. The strongest text pairing is #E5AD91 on #1B455E with a contrast ratio of 5.20:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lunatic Lynx	rgb(229, 173, 145)	hsl(20, 62%, 73%)
One Year of Rain	rgb(27, 69, 94)	hsl(202, 55%, 24%)
Atlantis	rgb(54, 96, 123)	hsl(203, 39%, 35%)
Enchanted Well	rgb(46, 151, 178)	hsl(192, 59%, 44%)
Macaroon	rgb(186, 144, 119)	hsl(22, 33%, 60%)

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.

Aa5.20:1 Good#E5AD91 on #1B455E
Aa5.20:1 Good#1B455E on #E5AD91
Aa3.57:1 Poor#1B455E on #BA9077
Aa3.57:1 Poor#BA9077 on #1B455E
Aa3.44:1 Poor#E5AD91 on #36607B
Aa3.44:1 Poor#36607B on #E5AD91
Aa3.00:1 Poor#1B455E on #2E97B2
Aa3.00:1 Poor#2E97B2 on #1B455E

Color blindness preview

CSS variables

/* Lunatic Lynx to Macaroon — https://swatchly.xyz/palette/e5ad91-1b455e-36607b-2e97b2-ba9077 */
:root {
  --lunatic-lynx: #e5ad91;
  --one-year-of-rain: #1b455e;
  --atlantis: #36607b;
  --enchanted-well: #2e97b2;
  --macaroon: #ba9077;
}

Tailwind CSS v4

/* Lunatic Lynx to Macaroon — https://swatchly.xyz/palette/e5ad91-1b455e-36607b-2e97b2-ba9077 */
@theme {
  --color-lunatic-lynx: #e5ad91;
  --color-lunatic-lynx-50: #ffeee6;
  --color-lunatic-lynx-100: #ffe0d1;
  --color-lunatic-lynx-200: #f4c8b2;
  --color-lunatic-lynx-300: #e5ad91;
  --color-lunatic-lynx-400: #c48f75;
  --color-lunatic-lynx-500: #a9755a;
  --color-lunatic-lynx-600: #8d5c43;
  --color-lunatic-lynx-700: #734730;
  --color-lunatic-lynx-800: #5d3622;
  --color-lunatic-lynx-900: #4a2918;
  --color-lunatic-lynx-950: #30180c;
  --color-one-year-of-rain: #1b455e;
  --color-one-year-of-rain-50: #ecf7ff;
  --color-one-year-of-rain-100: #d8efff;
  --color-one-year-of-rain-200: #bcddf3;
  --color-one-year-of-rain-300: #a1c6e0;
  --color-one-year-of-rain-400: #7da7c3;
  --color-one-year-of-rain-500: #608ba7;
  --color-one-year-of-rain-600: #47708a;
  --color-one-year-of-rain-700: #335870;
  --color-one-year-of-rain-800: #1b455e;
  --color-one-year-of-rain-900: #193546;
  --color-one-year-of-rain-950: #0c202d;
  --color-atlantis: #36607b;
  --color-atlantis-50: #ecf7ff;
  --color-atlantis-100: #d8efff;
  --color-atlantis-200: #bddef5;
  --color-atlantis-300: #a3c9e3;
  --color-atlantis-400: #81abc7;
  --color-atlantis-500: #6590ad;
  --color-atlantis-600: #4c7692;
  --color-atlantis-700: #36607b;
  --color-atlantis-800: #284b61;
  --color-atlantis-900: #1c3a4d;
  --color-atlantis-950: #0e2432;
  --color-enchanted-well: #2e97b2;
  --color-enchanted-well-50: #e8f9ff;
  --color-enchanted-well-100: #cff3ff;
  --color-enchanted-well-200: #a2e5fa;
  --color-enchanted-well-300: #81d0e8;
  --color-enchanted-well-400: #55b2cd;
  --color-enchanted-well-500: #2e97b2;
  --color-enchanted-well-600: #007b94;
  --color-enchanted-well-700: #006176;
  --color-enchanted-well-800: #004c5d;
  --color-enchanted-well-900: #003a48;
  --color-enchanted-well-950: #00242e;
  --color-macaroon: #ba9077;
  --color-macaroon-50: #ffefe6;
  --color-macaroon-100: #fee1cf;
  --color-macaroon-200: #edcab6;
  --color-macaroon-300: #d8b29b;
  --color-macaroon-400: #ba9077;
  --color-macaroon-500: #9f765e;
  --color-macaroon-600: #845e47;
  --color-macaroon-700: #6b4934;
  --color-macaroon-800: #563826;
  --color-macaroon-900: #442b1b;
  --color-macaroon-950: #2d1a0f;
}