Start generating

Annatto to Manhattan color palette

88573DAnnattoB39D77French OakB2646AHer VelourEDD29ESparkling Champagne59302AWorcestershire SauceE4AE85Manhattan
Open in generator Export PNG, PDF, ASE…

About this palette

Annatto to Manhattan is a 6-color warm, earthy, vintage palette: #88573D (Annatto), #B39D77 (French Oak), #B2646A (Her Velour), #EDD29E (Sparkling Champagne), #59302A (Worcestershire Sauce), #E4AE85 (Manhattan). It mixes brown, yellow, red, orange tones and feels warm overall. The strongest text pairing is #EDD29E on #59302A with a contrast ratio of 7.61:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Annattorgb(136, 87, 61)hsl(21, 38%, 39%)
French Oakrgb(179, 157, 119)hsl(38, 28%, 58%)
Her Velourrgb(178, 100, 106)hsl(355, 34%, 55%)
Sparkling Champagnergb(237, 210, 158)hsl(39, 69%, 77%)
Worcestershire Saucergb(89, 48, 42)hsl(8, 36%, 26%)
Manhattanrgb(228, 174, 133)hsl(26, 64%, 71%)

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.

  • Aa7.61:1 Very good#EDD29E on #59302A
  • Aa7.61:1 Very good#59302A on #EDD29E
  • Aa5.68:1 Good#59302A on #E4AE85
  • Aa5.68:1 Good#E4AE85 on #59302A
  • Aa4.26:1 Poor#B39D77 on #59302A
  • Aa4.26:1 Poor#59302A on #B39D77
  • Aa4.12:1 Poor#88573D on #EDD29E
  • Aa4.12:1 Poor#EDD29E on #88573D

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Annatto to Manhattan — https://swatchly.xyz/palette/88573d-b39d77-b2646a-edd29e-59302a-e4ae85 */
:root {
  --annatto: #88573d;
  --french-oak: #b39d77;
  --her-velour: #b2646a;
  --sparkling-champagne: #edd29e;
  --worcestershire-sauce: #59302a;
  --manhattan: #e4ae85;
}

Tailwind CSS v4

/* Annatto to Manhattan — https://swatchly.xyz/palette/88573d-b39d77-b2646a-edd29e-59302a-e4ae85 */
@theme {
  --color-annatto: #88573d;
  --color-annatto-50: #fff2ec;
  --color-annatto-100: #ffe3d5;
  --color-annatto-200: #f5cab4;
  --color-annatto-300: #e1b198;
  --color-annatto-400: #c38f74;
  --color-annatto-500: #a57257;
  --color-annatto-600: #88573d;
  --color-annatto-700: #6e442d;
  --color-annatto-800: #583320;
  --color-annatto-900: #462716;
  --color-annatto-950: #2d170b;
  --color-french-oak: #b39d77;
  --color-french-oak-50: #fff3df;
  --color-french-oak-100: #f7e9d0;
  --color-french-oak-200: #e5d4b7;
  --color-french-oak-300: #d1bd9c;
  --color-french-oak-400: #b39d77;
  --color-french-oak-500: #97825d;
  --color-french-oak-600: #7c6844;
  --color-french-oak-700: #645231;
  --color-french-oak-800: #4f3f23;
  --color-french-oak-900: #3e3018;
  --color-french-oak-950: #271e0c;
  --color-her-velour: #b2646a;
  --color-her-velour-50: #ffeff0;
  --color-her-velour-100: #ffdfe0;
  --color-her-velour-200: #ffc1c3;
  --color-her-velour-300: #efa4a8;
  --color-her-velour-400: #d08186;
  --color-her-velour-500: #b2646a;
  --color-her-velour-600: #954c52;
  --color-her-velour-700: #7a393f;
  --color-her-velour-800: #632a30;
  --color-her-velour-900: #4f1f24;
  --color-her-velour-950: #341115;
  --color-sparkling-champagne: #edd29e;
  --color-sparkling-champagne-50: #fff2da;
  --color-sparkling-champagne-100: #f9e8c7;
  --color-sparkling-champagne-200: #edd29e;
  --color-sparkling-champagne-300: #d3bc91;
  --color-sparkling-champagne-400: #b69d6d;
  --color-sparkling-champagne-500: #9b8250;
  --color-sparkling-champagne-600: #7f6737;
  --color-sparkling-champagne-700: #675125;
  --color-sparkling-champagne-800: #523f17;
  --color-sparkling-champagne-900: #40300d;
  --color-sparkling-champagne-950: #291d05;
  --color-worcestershire-sauce: #59302a;
  --color-worcestershire-sauce-50: #fff2ef;
  --color-worcestershire-sauce-100: #ffe4e0;
  --color-worcestershire-sauce-200: #f4cdc6;
  --color-worcestershire-sauce-300: #e0b4ac;
  --color-worcestershire-sauce-400: #c2928a;
  --color-worcestershire-sauce-500: #a5766e;
  --color-worcestershire-sauce-600: #875b54;
  --color-worcestershire-sauce-700: #6c453f;
  --color-worcestershire-sauce-800: #59302a;
  --color-worcestershire-sauce-900: #422622;
  --color-worcestershire-sauce-950: #2a1613;
  --color-manhattan: #e4ae85;
  --color-manhattan-50: #ffeee3;
  --color-manhattan-100: #ffe0ca;
  --color-manhattan-200: #f3c9a9;
  --color-manhattan-300: #e4ae85;
  --color-manhattan-400: #c39069;
  --color-manhattan-500: #a8764e;
  --color-manhattan-600: #8c5d37;
  --color-manhattan-700: #734825;
  --color-manhattan-800: #5d3718;
  --color-manhattan-900: #4a2a0e;
  --color-manhattan-950: #301905;
}

Similar palettes