Espresso to Strawberry Blonde color palette

542F2FEspresso 94504FAnnatto C2737BRosa Chinensis E79C99She Loves Pink FFC7C3Peach Fuzz FFDCDCStrawberry Blonde

Open in generator Export PNG, PDF, ASE…

About this palette

Espresso to Strawberry Blonde is a 6-color warm, vintage, monochromatic palette: #542F2F (Espresso), #94504F (Annatto), #C2737B (Rosa Chinensis), #E79C99 (She Loves Pink), #FFC7C3 (Peach Fuzz), #FFDCDC (Strawberry Blonde). It mixes brown, red, pink tones and feels warm overall. The strongest text pairing is #542F2F on #FFDCDC with a contrast ratio of 9.06:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Espresso	rgb(84, 47, 47)	hsl(0, 28%, 26%)
Annatto	rgb(148, 80, 79)	hsl(1, 30%, 45%)
Rosa Chinensis	rgb(194, 115, 123)	hsl(354, 39%, 61%)
She Loves Pink	rgb(231, 156, 153)	hsl(2, 62%, 75%)
Peach Fuzz	rgb(255, 199, 195)	hsl(4, 100%, 88%)
Strawberry Blonde	rgb(255, 220, 220)	hsl(0, 100%, 93%)

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.

Aa9.06:1 Very good#542F2F on #FFDCDC
Aa9.06:1 Very good#FFDCDC on #542F2F
Aa7.79:1 Very good#542F2F on #FFC7C3
Aa7.79:1 Very good#FFC7C3 on #542F2F
Aa5.27:1 Good#542F2F on #E79C99
Aa5.27:1 Good#E79C99 on #542F2F
Aa4.69:1 Good#94504F on #FFDCDC
Aa4.69:1 Good#FFDCDC on #94504F

Color blindness preview

CSS variables

/* Espresso to Strawberry Blonde — https://swatchly.xyz/palette/542f2f-94504f-c2737b-e79c99-ffc7c3-ffdcdc */
:root {
  --espresso: #542f2f;
  --annatto: #94504f;
  --rosa-chinensis: #c2737b;
  --she-loves-pink: #e79c99;
  --peach-fuzz: #ffc7c3;
  --strawberry-blonde: #ffdcdc;
}

Tailwind CSS v4

/* Espresso to Strawberry Blonde — https://swatchly.xyz/palette/542f2f-94504f-c2737b-e79c99-ffc7c3-ffdcdc */
@theme {
  --color-espresso: #542f2f;
  --color-espresso-50: #fff1f1;
  --color-espresso-100: #ffe4e3;
  --color-espresso-200: #f1cecc;
  --color-espresso-300: #dcb4b3;
  --color-espresso-400: #bd9291;
  --color-espresso-500: #a07574;
  --color-espresso-600: #825a5a;
  --color-espresso-700: #674444;
  --color-espresso-800: #542f2f;
  --color-espresso-900: #3e2525;
  --color-espresso-950: #271515;
  --color-annatto: #94504f;
  --color-annatto-50: #fff1f1;
  --color-annatto-100: #ffe2e1;
  --color-annatto-200: #ffc5c2;
  --color-annatto-300: #edaaa8;
  --color-annatto-400: #cf8885;
  --color-annatto-500: #b26b69;
  --color-annatto-600: #94504f;
  --color-annatto-700: #783d3c;
  --color-annatto-800: #612d2d;
  --color-annatto-900: #4d2121;
  --color-annatto-950: #321313;
  --color-rosa-chinensis: #c2737b;
  --color-rosa-chinensis-50: #fff3f4;
  --color-rosa-chinensis-100: #ffe7e8;
  --color-rosa-chinensis-200: #ffcdd0;
  --color-rosa-chinensis-300: #f7b0b6;
  --color-rosa-chinensis-400: #dc8f96;
  --color-rosa-chinensis-500: #c2737b;
  --color-rosa-chinensis-600: #a35860;
  --color-rosa-chinensis-700: #86414a;
  --color-rosa-chinensis-800: #6c3038;
  --color-rosa-chinensis-900: #552229;
  --color-rosa-chinensis-950: #371318;
  --color-she-loves-pink: #e79c99;
  --color-she-loves-pink-50: #ffe7e6;
  --color-she-loves-pink-100: #ffd6d4;
  --color-she-loves-pink-200: #f8b9b6;
  --color-she-loves-pink-300: #e79c99;
  --color-she-loves-pink-400: #c7807d;
  --color-she-loves-pink-500: #ad6765;
  --color-she-loves-pink-600: #91504e;
  --color-she-loves-pink-700: #783d3c;
  --color-she-loves-pink-800: #622f2e;
  --color-she-loves-pink-900: #502323;
  --color-she-loves-pink-950: #341414;
  --color-peach-fuzz: #ffc7c3;
  --color-peach-fuzz-50: #fff1f0;
  --color-peach-fuzz-100: #ffe3e1;
  --color-peach-fuzz-200: #ffc7c3;
  --color-peach-fuzz-300: #e2b3b0;
  --color-peach-fuzz-400: #c5928f;
  --color-peach-fuzz-500: #aa7774;
  --color-peach-fuzz-600: #8d5d5a;
  --color-peach-fuzz-700: #734845;
  --color-peach-fuzz-800: #5c3735;
  --color-peach-fuzz-900: #482927;
  --color-peach-fuzz-950: #2f1817;
  --color-strawberry-blonde: #ffdcdc;
  --color-strawberry-blonde-50: #ffebeb;
  --color-strawberry-blonde-100: #ffdcdc;
  --color-strawberry-blonde-200: #e6cccc;
  --color-strawberry-blonde-300: #d3b5b5;
  --color-strawberry-blonde-400: #b59696;
  --color-strawberry-blonde-500: #9b7c7c;
  --color-strawberry-blonde-600: #806263;
  --color-strawberry-blonde-700: #684d4e;
  --color-strawberry-blonde-800: #533b3c;
  --color-strawberry-blonde-900: #402d2d;
  --color-strawberry-blonde-950: #291b1b;
}