Brownstone to Cashmere Color Palette

About this palette

Brownstone to Cashmere is a 5-color muted, warm, earthy, vintage palette: #7A523D (Brownstone), #3A2725 (Ethereal Espresso), #F7E9CA (Gin Fizz), #A76E69 (Amaretto), #DBB297 (Cashmere). It mixes brown, gray, yellow, red, orange tones and feels warm overall. The strongest text pairing is #3A2725 on #F7E9CA with a contrast ratio of 11.67:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Brownstone	rgb(122, 82, 61)	hsl(21, 33%, 36%)
Ethereal Espresso	rgb(58, 39, 37)	hsl(6, 22%, 19%)
Gin Fizz	rgb(247, 233, 202)	hsl(41, 74%, 88%)
Amaretto	rgb(167, 110, 105)	hsl(5, 26%, 53%)
Cashmere	rgb(219, 178, 151)	hsl(24, 49%, 73%)

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.

Aa11.67:1 Very good#3A2725 on #F7E9CA
Aa11.67:1 Very good#F7E9CA on #3A2725
Aa7.23:1 Very good#3A2725 on #DBB297
Aa7.23:1 Very good#DBB297 on #3A2725
Aa5.63:1 Good#7A523D on #F7E9CA
Aa5.63:1 Good#F7E9CA on #7A523D
Aa3.49:1 Poor#7A523D on #DBB297
Aa3.49:1 Poor#DBB297 on #7A523D

Color blindness preview

CSS variables

/* Brownstone to Cashmere — https://swatchly.xyz/palette/7a523d-3a2725-f7e9ca-a76e69-dbb297 */
:root {
  --brownstone: #7a523d;
  --ethereal-espresso: #3a2725;
  --gin-fizz: #f7e9ca;
  --amaretto: #a76e69;
  --cashmere: #dbb297;
}

Tailwind CSS v4

/* Brownstone to Cashmere — https://swatchly.xyz/palette/7a523d-3a2725-f7e9ca-a76e69-dbb297 */
@theme {
  --color-brownstone: #7a523d;
  --color-brownstone-50: #fff2ec;
  --color-brownstone-100: #ffe5d8;
  --color-brownstone-200: #f3d1bf;
  --color-brownstone-300: #e1baa7;
  --color-brownstone-400: #c69b85;
  --color-brownstone-500: #ac816a;
  --color-brownstone-600: #916852;
  --color-brownstone-700: #7a523d;
  --color-brownstone-800: #613f2e;
  --color-brownstone-900: #4c3021;
  --color-brownstone-950: #311d12;
  --color-ethereal-espresso: #3a2725;
  --color-ethereal-espresso-50: #fff2f0;
  --color-ethereal-espresso-100: #f7e7e5;
  --color-ethereal-espresso-200: #e6d2d0;
  --color-ethereal-espresso-300: #d1bbb9;
  --color-ethereal-espresso-400: #b19a97;
  --color-ethereal-espresso-500: #957d7b;
  --color-ethereal-espresso-600: #786260;
  --color-ethereal-espresso-700: #5f4b49;
  --color-ethereal-espresso-800: #493836;
  --color-ethereal-espresso-900: #3a2725;
  --color-ethereal-espresso-950: #211817;
  --color-gin-fizz: #f7e9ca;
  --color-gin-fizz-50: #fbf4e3;
  --color-gin-fizz-100: #f7e9ca;
  --color-gin-fizz-200: #e0d6bf;
  --color-gin-fizz-300: #cbbfa6;
  --color-gin-fizz-400: #aca084;
  --color-gin-fizz-500: #918568;
  --color-gin-fizz-600: #766a4f;
  --color-gin-fizz-700: #5f543b;
  --color-gin-fizz-800: #4b412c;
  --color-gin-fizz-900: #3a3220;
  --color-gin-fizz-950: #241f11;
  --color-amaretto: #a76e69;
  --color-amaretto-50: #fff0ee;
  --color-amaretto-100: #ffe0dd;
  --color-amaretto-200: #f7c6c1;
  --color-amaretto-300: #e3ada7;
  --color-amaretto-400: #c48b85;
  --color-amaretto-500: #a76e69;
  --color-amaretto-600: #8b5651;
  --color-amaretto-700: #72423e;
  --color-amaretto-800: #5b322f;
  --color-amaretto-900: #482523;
  --color-amaretto-950: #2f1614;
  --color-cashmere: #dbb297;
  --color-cashmere-50: #ffefe4;
  --color-cashmere-100: #fde1cf;
  --color-cashmere-200: #ecccb7;
  --color-cashmere-300: #dbb297;
  --color-cashmere-400: #bb947b;
  --color-cashmere-500: #a07a60;
  --color-cashmere-600: #846048;
  --color-cashmere-700: #6c4b35;
  --color-cashmere-800: #573a27;
  --color-cashmere-900: #452d1c;
  --color-cashmere-950: #2c1b0f;
}