Ochicha Latte to Tahini Brown color palette

715F44Ochicha Latte 332D22Go to Hell Black EEE4D5Sugar Quill C6B597Windsor Toffee 5F5342Volcanic Island 9C8561Tahini Brown

Open in generator Export PNG, PDF, ASE…

About this palette

Ochicha Latte to Tahini Brown is a 6-color muted palette: #715F44 (Ochicha Latte), #332D22 (Go to Hell Black), #EEE4D5 (Sugar Quill), #C6B597 (Windsor Toffee), #5F5342 (Volcanic Island), #9C8561 (Tahini Brown). It mixes brown, gray, yellow tones and feels warm overall. The strongest text pairing is #332D22 on #EEE4D5 with a contrast ratio of 10.85:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ochicha Latte	rgb(113, 95, 68)	hsl(36, 25%, 35%)
Go to Hell Black	rgb(51, 45, 34)	hsl(39, 20%, 17%)
Sugar Quill	rgb(238, 228, 213)	hsl(36, 42%, 88%)
Windsor Toffee	rgb(198, 181, 151)	hsl(38, 29%, 68%)
Volcanic Island	rgb(95, 83, 66)	hsl(35, 18%, 32%)
Tahini Brown	rgb(156, 133, 97)	hsl(37, 23%, 50%)

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.

Aa10.85:1 Very good#332D22 on #EEE4D5
Aa10.85:1 Very good#EEE4D5 on #332D22
Aa6.79:1 Good#332D22 on #C6B597
Aa6.79:1 Good#C6B597 on #332D22
Aa5.96:1 Good#EEE4D5 on #5F5342
Aa5.96:1 Good#5F5342 on #EEE4D5
Aa4.88:1 Good#715F44 on #EEE4D5
Aa4.88:1 Good#EEE4D5 on #715F44

Color blindness preview

CSS variables

/* Ochicha Latte to Tahini Brown — https://swatchly.xyz/palette/715f44-332d22-eee4d5-c6b597-5f5342-9c8561 */
:root {
  --ochicha-latte: #715f44;
  --go-to-hell-black: #332d22;
  --sugar-quill: #eee4d5;
  --windsor-toffee: #c6b597;
  --volcanic-island: #5f5342;
  --tahini-brown: #9c8561;
}

Tailwind CSS v4

/* Ochicha Latte to Tahini Brown — https://swatchly.xyz/palette/715f44-332d22-eee4d5-c6b597-5f5342-9c8561 */
@theme {
  --color-ochicha-latte: #715f44;
  --color-ochicha-latte-50: #fff3e3;
  --color-ochicha-latte-100: #f4e7d4;
  --color-ochicha-latte-200: #e1d1bb;
  --color-ochicha-latte-300: #cab99f;
  --color-ochicha-latte-400: #aa977c;
  --color-ochicha-latte-500: #8d7b5f;
  --color-ochicha-latte-600: #715f44;
  --color-ochicha-latte-700: #5a4b34;
  --color-ochicha-latte-800: #473a26;
  --color-ochicha-latte-900: #382d1b;
  --color-ochicha-latte-950: #231b0f;
  --color-go-to-hell-black: #332d22;
  --color-go-to-hell-black-50: #f9f5ed;
  --color-go-to-hell-black-100: #efebe2;
  --color-go-to-hell-black-200: #dcd7cc;
  --color-go-to-hell-black-300: #c7c0b4;
  --color-go-to-hell-black-400: #a7a093;
  --color-go-to-hell-black-500: #8a8376;
  --color-go-to-hell-black-600: #6f685c;
  --color-go-to-hell-black-700: #575146;
  --color-go-to-hell-black-800: #423d34;
  --color-go-to-hell-black-900: #332d22;
  --color-go-to-hell-black-950: #1e1b16;
  --color-sugar-quill: #eee4d5;
  --color-sugar-quill-50: #f5efe7;
  --color-sugar-quill-100: #eee4d5;
  --color-sugar-quill-200: #d9d2c6;
  --color-sugar-quill-300: #c4bcaf;
  --color-sugar-quill-400: #a79d90;
  --color-sugar-quill-500: #8c8375;
  --color-sugar-quill-600: #726a5d;
  --color-sugar-quill-700: #5c5448;
  --color-sugar-quill-800: #484137;
  --color-sugar-quill-900: #383229;
  --color-sugar-quill-950: #231f18;
  --color-windsor-toffee: #c6b597;
  --color-windsor-toffee-50: #f9efdd;
  --color-windsor-toffee-100: #efe3cf;
  --color-windsor-toffee-200: #dbceb6;
  --color-windsor-toffee-300: #c6b597;
  --color-windsor-toffee-400: #a8987b;
  --color-windsor-toffee-500: #8e7e61;
  --color-windsor-toffee-600: #74654a;
  --color-windsor-toffee-700: #5e5038;
  --color-windsor-toffee-800: #4b3f2a;
  --color-windsor-toffee-900: #3b311f;
  --color-windsor-toffee-950: #251e11;
  --color-volcanic-island: #5f5342;
  --color-volcanic-island-50: #fcf4e9;
  --color-volcanic-island-100: #f3eadd;
  --color-volcanic-island-200: #e0d6c7;
  --color-volcanic-island-300: #cbbfae;
  --color-volcanic-island-400: #ac9f8d;
  --color-volcanic-island-500: #918472;
  --color-volcanic-island-600: #766a58;
  --color-volcanic-island-700: #5f5342;
  --color-volcanic-island-800: #4a4133;
  --color-volcanic-island-900: #393126;
  --color-volcanic-island-950: #241e16;
  --color-tahini-brown: #9c8561;
  --color-tahini-brown-50: #fff4e3;
  --color-tahini-brown-100: #f9ead2;
  --color-tahini-brown-200: #e8d6ba;
  --color-tahini-brown-300: #d4c0a0;
  --color-tahini-brown-400: #b7a07d;
  --color-tahini-brown-500: #9c8561;
  --color-tahini-brown-600: #806a48;
  --color-tahini-brown-700: #675334;
  --color-tahini-brown-800: #524024;
  --color-tahini-brown-900: #403119;
  --color-tahini-brown-950: #281e0c;
}