Banner Gold to Opera Color Palette

About this palette

Banner Gold to Opera is a 5-color muted, vintage palette: #9E8862 (Banner Gold), #2A4D43 (Pine Needle), #96ABC0 (Lost in Time), #E9D0DA (Ephemeral Red), #836071 (Opera). It mixes yellow, turquoise, blue, gray, red tones and feels balanced overall. The strongest text pairing is #2A4D43 on #E9D0DA with a contrast ratio of 6.47:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Banner Gold	rgb(158, 136, 98)	hsl(38, 24%, 50%)
Pine Needle	rgb(42, 77, 67)	hsl(163, 29%, 23%)
Lost in Time	rgb(150, 171, 192)	hsl(210, 25%, 67%)
Ephemeral Red	rgb(233, 208, 218)	hsl(336, 36%, 86%)
Opera	rgb(131, 96, 113)	hsl(331, 15%, 45%)

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.

Aa6.47:1 Good#2A4D43 on #E9D0DA
Aa6.47:1 Good#E9D0DA on #2A4D43
Aa3.96:1 Poor#2A4D43 on #96ABC0
Aa3.96:1 Poor#96ABC0 on #2A4D43
Aa3.74:1 Poor#E9D0DA on #836071
Aa3.74:1 Poor#836071 on #E9D0DA

Color blindness preview

CSS variables

/* Banner Gold to Opera — https://swatchly.xyz/palette/9e8862-2a4d43-96abc0-e9d0da-836071 */
:root {
  --banner-gold: #9e8862;
  --pine-needle: #2a4d43;
  --lost-in-time: #96abc0;
  --ephemeral-red: #e9d0da;
  --opera: #836071;
}

Tailwind CSS v4

/* Banner Gold to Opera — https://swatchly.xyz/palette/9e8862-2a4d43-96abc0-e9d0da-836071 */
@theme {
  --color-banner-gold: #9e8862;
  --color-banner-gold-50: #fff5e4;
  --color-banner-gold-100: #faebd3;
  --color-banner-gold-200: #e9d8bb;
  --color-banner-gold-300: #d5c2a1;
  --color-banner-gold-400: #b8a37e;
  --color-banner-gold-500: #9e8862;
  --color-banner-gold-600: #826d48;
  --color-banner-gold-700: #685533;
  --color-banner-gold-800: #534224;
  --color-banner-gold-900: #403218;
  --color-banner-gold-950: #281e0c;
  --color-pine-needle: #2a4d43;
  --color-pine-needle-50: #e5fbf4;
  --color-pine-needle-100: #d9f2e9;
  --color-pine-needle-200: #c2dfd6;
  --color-pine-needle-300: #a9cabf;
  --color-pine-needle-400: #88aca0;
  --color-pine-needle-500: #6c9185;
  --color-pine-needle-600: #53766c;
  --color-pine-needle-700: #3f5f56;
  --color-pine-needle-800: #2a4d43;
  --color-pine-needle-900: #223b33;
  --color-pine-needle-950: #132520;
  --color-lost-in-time: #96abc0;
  --color-lost-in-time-50: #f2f8ff;
  --color-lost-in-time-100: #e3f1fe;
  --color-lost-in-time-200: #cfdeee;
  --color-lost-in-time-300: #b7c9db;
  --color-lost-in-time-400: #96abc0;
  --color-lost-in-time-500: #7a8ea2;
  --color-lost-in-time-600: #5f7286;
  --color-lost-in-time-700: #495a6c;
  --color-lost-in-time-800: #374655;
  --color-lost-in-time-900: #283542;
  --color-lost-in-time-950: #172029;
  --color-ephemeral-red: #e9d0da;
  --color-ephemeral-red-50: #fff1f7;
  --color-ephemeral-red-100: #f6e7ed;
  --color-ephemeral-red-200: #e9d0da;
  --color-ephemeral-red-300: #d0bbc3;
  --color-ephemeral-red-400: #b19ba4;
  --color-ephemeral-red-500: #967f88;
  --color-ephemeral-red-600: #7a656e;
  --color-ephemeral-red-700: #624f57;
  --color-ephemeral-red-800: #4e3d44;
  --color-ephemeral-red-900: #3c2e34;
  --color-ephemeral-red-950: #261c20;
  --color-opera: #836071;
  --color-opera-50: #fff1f7;
  --color-opera-100: #fde3ef;
  --color-opera-200: #eccedc;
  --color-opera-300: #d8b6c6;
  --color-opera-400: #ba96a7;
  --color-opera-500: #9f7a8c;
  --color-opera-600: #836071;
  --color-opera-700: #6a4b5a;
  --color-opera-800: #543946;
  --color-opera-900: #422b36;
  --color-opera-950: #2a1a22;
}