Brown to Glazed Sugar Color Palette

About this palette

Brown to Glazed Sugar is a 5-color warm, earthy, vintage palette: #693600 (Brown), #ED7F80 (Meat), #CA423C (100 Mph), #231400 (Noir Mystique), #FFDCC9 (Glazed Sugar). It mixes brown, red, orange tones and feels warm overall. The strongest text pairing is #231400 on #FFDCC9 with a contrast ratio of 13.94:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Brown	rgb(105, 54, 0)	hsl(31, 100%, 21%)
Meat	rgb(237, 127, 128)	hsl(359, 75%, 71%)
100 Mph	rgb(202, 66, 60)	hsl(3, 57%, 51%)
Noir Mystique	rgb(35, 20, 0)	hsl(34, 100%, 7%)
Glazed Sugar	rgb(255, 220, 201)	hsl(21, 100%, 89%)

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.

Aa13.94:1 Super#231400 on #FFDCC9
Aa13.94:1 Super#FFDCC9 on #231400
Aa7.67:1 Very good#693600 on #FFDCC9
Aa7.67:1 Very good#FFDCC9 on #693600
Aa6.78:1 Good#ED7F80 on #231400
Aa6.78:1 Good#231400 on #ED7F80
Aa3.75:1 Poor#CA423C on #FFDCC9
Aa3.75:1 Poor#FFDCC9 on #CA423C

Color blindness preview

CSS variables

/* Brown to Glazed Sugar — https://swatchly.xyz/palette/693600-ed7f80-ca423c-231400-ffdcc9 */
:root {
  --brown: #693600;
  --meat: #ed7f80;
  --c-100-mph: #ca423c;
  --noir-mystique: #231400;
  --glazed-sugar: #ffdcc9;
}

Tailwind CSS v4

/* Brown to Glazed Sugar — https://swatchly.xyz/palette/693600-ed7f80-ca423c-231400-ffdcc9 */
@theme {
  --color-brown: #693600;
  --color-brown-50: #fff2ea;
  --color-brown-100: #ffe6d4;
  --color-brown-200: #fbcdab;
  --color-brown-300: #e9b58f;
  --color-brown-400: #cd956a;
  --color-brown-500: #b2794d;
  --color-brown-600: #955f33;
  --color-brown-700: #7b4a20;
  --color-brown-800: #693600;
  --color-brown-900: #4f2b08;
  --color-brown-950: #341902;
  --color-meat: #ed7f80;
  --color-meat-50: #fff3f2;
  --color-meat-100: #ffe6e5;
  --color-meat-200: #ffcbc9;
  --color-meat-300: #ffa9a7;
  --color-meat-400: #ed7f80;
  --color-meat-500: #cd6365;
  --color-meat-600: #ae484c;
  --color-meat-700: #8f3238;
  --color-meat-800: #742228;
  --color-meat-900: #5c161c;
  --color-meat-950: #3c0a0f;
  --color-c-100-mph: #ca423c;
  --color-c-100-mph-50: #fff2f0;
  --color-c-100-mph-100: #ffe7e4;
  --color-c-100-mph-200: #ffcfc9;
  --color-c-100-mph-300: #ffb0a7;
  --color-c-100-mph-400: #ff7d72;
  --color-c-100-mph-500: #e75e55;
  --color-c-100-mph-600: #ca423c;
  --color-c-100-mph-700: #a92826;
  --color-c-100-mph-800: #8a1316;
  --color-c-100-mph-900: #6e040a;
  --color-c-100-mph-950: #490003;
  --color-noir-mystique: #231400;
  --color-noir-mystique-50: #fff3e4;
  --color-noir-mystique-100: #f6e9d8;
  --color-noir-mystique-200: #e4d5c1;
  --color-noir-mystique-300: #d0bea7;
  --color-noir-mystique-400: #b19e85;
  --color-noir-mystique-500: #948168;
  --color-noir-mystique-600: #77654d;
  --color-noir-mystique-700: #5e4e38;
  --color-noir-mystique-800: #483a28;
  --color-noir-mystique-900: #352a1b;
  --color-noir-mystique-950: #231400;
  --color-glazed-sugar: #ffdcc9;
  --color-glazed-sugar-50: #ffebe0;
  --color-glazed-sugar-100: #ffdcc9;
  --color-glazed-sugar-200: #e6ccbd;
  --color-glazed-sugar-300: #d3b5a5;
  --color-glazed-sugar-400: #b69785;
  --color-glazed-sugar-500: #9c7c6b;
  --color-glazed-sugar-600: #816353;
  --color-glazed-sugar-700: #694f40;
  --color-glazed-sugar-800: #543c2f;
  --color-glazed-sugar-900: #412e23;
  --color-glazed-sugar-950: #2a1c14;
}