Old Study to Sugar Milk Color Palette

About this palette

Old Study to Sugar Milk is a 4-color warm, vintage, monochromatic, gradient palette: #3C1A10 (Old Study), #8D4F40 (Annatto), #E28578 (Island Coral), #FFF6F4 (Sugar Milk). It mixes brown, red, white tones and feels warm overall. The strongest text pairing is #3C1A10 on #FFF6F4 with a contrast ratio of 14.65:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Old Study	rgb(60, 26, 16)	hsl(14, 58%, 15%)
Annatto	rgb(141, 79, 64)	hsl(12, 38%, 40%)
Island Coral	rgb(226, 133, 120)	hsl(7, 65%, 68%)
Sugar Milk	rgb(255, 246, 244)	hsl(11, 100%, 98%)

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.65:1 Super#3C1A10 on #FFF6F4
Aa14.65:1 Super#FFF6F4 on #3C1A10
Aa5.94:1 Good#8D4F40 on #FFF6F4
Aa5.94:1 Good#FFF6F4 on #8D4F40
Aa5.83:1 Good#3C1A10 on #E28578
Aa5.83:1 Good#E28578 on #3C1A10

Color blindness preview

CSS variables

/* Old Study to Sugar Milk — https://swatchly.xyz/palette/3c1a10-8d4f40-e28578-fff6f4 */
:root {
  --old-study: #3c1a10;
  --annatto: #8d4f40;
  --island-coral: #e28578;
  --sugar-milk: #fff6f4;
}

Tailwind CSS v4

/* Old Study to Sugar Milk — https://swatchly.xyz/palette/3c1a10-8d4f40-e28578-fff6f4 */
@theme {
  --color-old-study: #3c1a10;
  --color-old-study-50: #fff2ee;
  --color-old-study-100: #ffe5dd;
  --color-old-study-200: #f1cfc4;
  --color-old-study-300: #deb7ab;
  --color-old-study-400: #c1968a;
  --color-old-study-500: #a67c6f;
  --color-old-study-600: #8b6357;
  --color-old-study-700: #734e43;
  --color-old-study-800: #5e3d34;
  --color-old-study-900: #4c3028;
  --color-old-study-950: #3c1a10;
  --color-annatto: #8d4f40;
  --color-annatto-50: #fff2ee;
  --color-annatto-100: #ffe2db;
  --color-annatto-200: #fcc5b7;
  --color-annatto-300: #e8ab9b;
  --color-annatto-400: #ca8877;
  --color-annatto-500: #ab6b5b;
  --color-annatto-600: #8d4f40;
  --color-annatto-700: #723d30;
  --color-annatto-800: #5c2e23;
  --color-annatto-900: #492219;
  --color-annatto-950: #2f130d;
  --color-island-coral: #e28578;
  --color-island-coral-50: #fff2f0;
  --color-island-coral-100: #ffe5e1;
  --color-island-coral-200: #ffc9c1;
  --color-island-coral-300: #fba99d;
  --color-island-coral-400: #e28578;
  --color-island-coral-500: #c3695e;
  --color-island-coral-600: #a44f45;
  --color-island-coral-700: #883a31;
  --color-island-coral-800: #6e2a22;
  --color-island-coral-900: #571e18;
  --color-island-coral-950: #39100b;
  --color-sugar-milk: #fff6f4;
  --color-sugar-milk-50: #fff6f4;
  --color-sugar-milk-100: #f2eceb;
  --color-sugar-milk-200: #ded8d6;
  --color-sugar-milk-300: #c8c0bf;
  --color-sugar-milk-400: #a8a09f;
  --color-sugar-milk-500: #8d8583;
  --color-sugar-milk-600: #716a68;
  --color-sugar-milk-700: #5a5352;
  --color-sugar-milk-800: #47413f;
  --color-sugar-milk-900: #363230;
  --color-sugar-milk-950: #221e1d;
}