Gold Winged to Black Market color palette

E8D784Gold Winged C09F56Steampunk Gold 8E834ARural Green 4C4C79Tangent Periwinkle 1D2247Black Market

Open in generator Export PNG, PDF, ASE…

About this palette

Gold Winged to Black Market is a 5-color warm, earthy, vintage palette: #E8D784 (Gold Winged), #C09F56 (Steampunk Gold), #8E834A (Rural Green), #4C4C79 (Tangent Periwinkle), #1D2247 (Black Market). It mixes yellow, purple tones and feels warm overall. The strongest text pairing is #E8D784 on #1D2247 with a contrast ratio of 10.56:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Gold Winged	rgb(232, 215, 132)	hsl(50, 68%, 71%)
Steampunk Gold	rgb(192, 159, 86)	hsl(41, 46%, 55%)
Rural Green	rgb(142, 131, 74)	hsl(50, 31%, 42%)
Tangent Periwinkle	rgb(76, 76, 121)	hsl(240, 23%, 39%)
Black Market	rgb(29, 34, 71)	hsl(233, 42%, 20%)

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.56:1 Very good#E8D784 on #1D2247
Aa10.56:1 Very good#1D2247 on #E8D784
Aa6.07:1 Good#C09F56 on #1D2247
Aa6.07:1 Good#1D2247 on #C09F56
Aa5.53:1 Good#E8D784 on #4C4C79
Aa5.53:1 Good#4C4C79 on #E8D784
Aa4.01:1 Poor#8E834A on #1D2247
Aa4.01:1 Poor#1D2247 on #8E834A

Color blindness preview

CSS variables

/* Gold Winged to Black Market — https://swatchly.xyz/palette/e8d784-c09f56-8e834a-4c4c79-1d2247 */
:root {
  --gold-winged: #e8d784;
  --steampunk-gold: #c09f56;
  --rural-green: #8e834a;
  --tangent-periwinkle: #4c4c79;
  --black-market: #1d2247;
}

Tailwind CSS v4

/* Gold Winged to Black Market — https://swatchly.xyz/palette/e8d784-c09f56-8e834a-4c4c79-1d2247 */
@theme {
  --color-gold-winged: #e8d784;
  --color-gold-winged-50: #fef5c8;
  --color-gold-winged-100: #f5ebb9;
  --color-gold-winged-200: #e8d784;
  --color-gold-winged-300: #cfc17b;
  --color-gold-winged-400: #b1a153;
  --color-gold-winged-500: #968632;
  --color-gold-winged-600: #7b6b11;
  --color-gold-winged-700: #635500;
  --color-gold-winged-800: #4e4200;
  --color-gold-winged-900: #3c3300;
  --color-gold-winged-950: #261f00;
  --color-steampunk-gold: #c09f56;
  --color-steampunk-gold-50: #fff5e0;
  --color-steampunk-gold-100: #ffeabe;
  --color-steampunk-gold-200: #efd6a2;
  --color-steampunk-gold-300: #dcbf83;
  --color-steampunk-gold-400: #c09f56;
  --color-steampunk-gold-500: #a38339;
  --color-steampunk-gold-600: #87681b;
  --color-steampunk-gold-700: #6d5100;
  --color-steampunk-gold-800: #563f00;
  --color-steampunk-gold-900: #423000;
  --color-steampunk-gold-950: #2a1d00;
  --color-rural-green: #8e834a;
  --color-rural-green-50: #fbf5d5;
  --color-rural-green-100: #f2ebc6;
  --color-rural-green-200: #dfd7aa;
  --color-rural-green-300: #c9bf8d;
  --color-rural-green-400: #aa9f67;
  --color-rural-green-500: #8e834a;
  --color-rural-green-600: #746932;
  --color-rural-green-700: #5d5320;
  --color-rural-green-800: #494112;
  --color-rural-green-900: #393209;
  --color-rural-green-950: #241f03;
  --color-tangent-periwinkle: #4c4c79;
  --color-tangent-periwinkle-50: #f3f4ff;
  --color-tangent-periwinkle-100: #e8e9ff;
  --color-tangent-periwinkle-200: #d1d3fb;
  --color-tangent-periwinkle-300: #b9bbe8;
  --color-tangent-periwinkle-400: #999acb;
  --color-tangent-periwinkle-500: #7d7eaf;
  --color-tangent-periwinkle-600: #636391;
  --color-tangent-periwinkle-700: #4c4c79;
  --color-tangent-periwinkle-800: #3b3b5f;
  --color-tangent-periwinkle-900: #2d2d4b;
  --color-tangent-periwinkle-950: #1b1b30;
  --color-black-market: #1d2247;
  --color-black-market-50: #f2f5ff;
  --color-black-market-100: #e5eaff;
  --color-black-market-200: #cdd6fa;
  --color-black-market-300: #b5bfe7;
  --color-black-market-400: #959fcb;
  --color-black-market-500: #7b85b1;
  --color-black-market-600: #636c96;
  --color-black-market-700: #4f567d;
  --color-black-market-800: #3e4568;
  --color-black-market-900: #313755;
  --color-black-market-950: #1d2247;
}