Golden Mean to Very Coffee color palette

BB9C42Golden Mean BDC5FFInnocent Snowdrop 161626Eigengrau 896900Muddy Brown E3E6FFCloudless 564A00Very Coffee

Open in generator Export PNG, PDF, ASE…

About this palette

Golden Mean to Very Coffee is a 6-color vintage palette: #BB9C42 (Golden Mean), #BDC5FF (Innocent Snowdrop), #161626 (Eigengrau), #896900 (Muddy Brown), #E3E6FF (Cloudless), #564A00 (Very Coffee). It mixes yellow, purple, black, brown, white tones and feels warm overall. The strongest text pairing is #161626 on #E3E6FF with a contrast ratio of 14.47:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Golden Mean	rgb(187, 156, 66)	hsl(45, 48%, 50%)
Innocent Snowdrop	rgb(189, 197, 255)	hsl(233, 100%, 87%)
Eigengrau	rgb(22, 22, 38)	hsl(240, 27%, 12%)
Muddy Brown	rgb(137, 105, 0)	hsl(46, 100%, 27%)
Cloudless	rgb(227, 230, 255)	hsl(234, 100%, 95%)
Very Coffee	rgb(86, 74, 0)	hsl(52, 100%, 17%)

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.

Aa14.47:1 Super#161626 on #E3E6FF
Aa14.47:1 Super#E3E6FF on #161626
Aa10.70:1 Very good#BDC5FF on #161626
Aa10.70:1 Very good#161626 on #BDC5FF
Aa7.17:1 Very good#E3E6FF on #564A00
Aa7.17:1 Very good#564A00 on #E3E6FF
Aa6.75:1 Good#BB9C42 on #161626
Aa6.75:1 Good#161626 on #BB9C42

Color blindness preview

CSS variables

/* Golden Mean to Very Coffee — https://swatchly.xyz/palette/bb9c42-bdc5ff-161626-896900-e3e6ff-564a00 */
:root {
  --golden-mean: #bb9c42;
  --innocent-snowdrop: #bdc5ff;
  --eigengrau: #161626;
  --muddy-brown: #896900;
  --cloudless: #e3e6ff;
  --very-coffee: #564a00;
}

Tailwind CSS v4

/* Golden Mean to Very Coffee — https://swatchly.xyz/palette/bb9c42-bdc5ff-161626-896900-e3e6ff-564a00 */
@theme {
  --color-golden-mean: #bb9c42;
  --color-golden-mean-50: #fff4d6;
  --color-golden-mean-100: #fde9b4;
  --color-golden-mean-200: #ecd495;
  --color-golden-mean-300: #d8bd73;
  --color-golden-mean-400: #bb9c42;
  --color-golden-mean-500: #9f8121;
  --color-golden-mean-600: #836700;
  --color-golden-mean-700: #685100;
  --color-golden-mean-800: #523f00;
  --color-golden-mean-900: #3f3100;
  --color-golden-mean-950: #281e00;
  --color-innocent-snowdrop: #bdc5ff;
  --color-innocent-snowdrop-50: #f8f9ff;
  --color-innocent-snowdrop-100: #eef0ff;
  --color-innocent-snowdrop-200: #d7ddff;
  --color-innocent-snowdrop-300: #bdc5ff;
  --color-innocent-snowdrop-400: #9da4d9;
  --color-innocent-snowdrop-500: #8087bd;
  --color-innocent-snowdrop-600: #656b9e;
  --color-innocent-snowdrop-700: #4e5382;
  --color-innocent-snowdrop-800: #3b3f68;
  --color-innocent-snowdrop-900: #2c2f51;
  --color-innocent-snowdrop-950: #1a1d35;
  --color-eigengrau: #161626;
  --color-eigengrau-50: #f3f4ff;
  --color-eigengrau-100: #e9eaf8;
  --color-eigengrau-200: #d5d6e7;
  --color-eigengrau-300: #bebfd2;
  --color-eigengrau-400: #9e9fb4;
  --color-eigengrau-500: #828397;
  --color-eigengrau-600: #66677a;
  --color-eigengrau-700: #4e4f61;
  --color-eigengrau-800: #3b3b4a;
  --color-eigengrau-900: #2b2b37;
  --color-eigengrau-950: #161626;
  --color-muddy-brown: #896900;
  --color-muddy-brown-50: #fff4db;
  --color-muddy-brown-100: #ffeab8;
  --color-muddy-brown-200: #efd69b;
  --color-muddy-brown-300: #dcbf7a;
  --color-muddy-brown-400: #bf9f50;
  --color-muddy-brown-500: #a4832d;
  --color-muddy-brown-600: #896900;
  --color-muddy-brown-700: #6d5300;
  --color-muddy-brown-800: #564000;
  --color-muddy-brown-900: #423100;
  --color-muddy-brown-950: #2a1e00;
  --color-cloudless: #e3e6ff;
  --color-cloudless-50: #f0f1ff;
  --color-cloudless-100: #e3e6ff;
  --color-cloudless-200: #d1d3e6;
  --color-cloudless-300: #bbbdd2;
  --color-cloudless-400: #9c9eb5;
  --color-cloudless-500: #81839a;
  --color-cloudless-600: #676a7f;
  --color-cloudless-700: #525467;
  --color-cloudless-800: #3f4152;
  --color-cloudless-900: #303240;
  --color-cloudless-950: #1d1e28;
  --color-very-coffee: #564a00;
  --color-very-coffee-50: #fdf6d3;
  --color-very-coffee-100: #f4ecc5;
  --color-very-coffee-200: #e2d9aa;
  --color-very-coffee-300: #cec48e;
  --color-very-coffee-400: #b1a66a;
  --color-very-coffee-500: #978b4d;
  --color-very-coffee-600: #7e7234;
  --color-very-coffee-700: #685c20;
  --color-very-coffee-800: #564a00;
  --color-very-coffee-900: #423907;
  --color-very-coffee-950: #2a2401;
}