Chipmunk to Very Coffee Color Palette

About this palette

Chipmunk to Very Coffee is a 5-color warm, earthy, vintage, monochromatic palette: #D1A058 (Chipmunk), #231400 (Noir Mystique), #8E713E (Mossy), #EFCCA4 (Soufflé), #6A4700 (Very Coffee). It mixes yellow, brown, orange tones and feels warm overall. The strongest text pairing is #231400 on #EFCCA4 with a contrast ratio of 11.82:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Chipmunk	rgb(209, 160, 88)	hsl(36, 57%, 58%)
Noir Mystique	rgb(35, 20, 0)	hsl(34, 100%, 7%)
Mossy	rgb(142, 113, 62)	hsl(38, 39%, 40%)
Soufflé	rgb(239, 204, 164)	hsl(32, 70%, 79%)
Very Coffee	rgb(106, 71, 0)	hsl(40, 100%, 21%)

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.82:1 Very good#231400 on #EFCCA4
Aa11.82:1 Very good#EFCCA4 on #231400
Aa7.58:1 Very good#D1A058 on #231400
Aa7.58:1 Very good#231400 on #D1A058
Aa5.51:1 Good#EFCCA4 on #6A4700
Aa5.51:1 Good#6A4700 on #EFCCA4
Aa3.91:1 Poor#231400 on #8E713E
Aa3.91:1 Poor#8E713E on #231400

Color blindness preview

CSS variables

/* Chipmunk to Very Coffee — https://swatchly.xyz/palette/d1a058-231400-8e713e-efcca4-6a4700 */
:root {
  --chipmunk: #d1a058;
  --noir-mystique: #231400;
  --mossy: #8e713e;
  --souffl: #efcca4;
  --very-coffee: #6a4700;
}

Tailwind CSS v4

/* Chipmunk to Very Coffee — https://swatchly.xyz/palette/d1a058-231400-8e713e-efcca4-6a4700 */
@theme {
  --color-chipmunk: #d1a058;
  --color-chipmunk-50: #fff7ec;
  --color-chipmunk-100: #ffedd4;
  --color-chipmunk-200: #fbd7a5;
  --color-chipmunk-300: #eac087;
  --color-chipmunk-400: #d1a058;
  --color-chipmunk-500: #b2833a;
  --color-chipmunk-600: #946719;
  --color-chipmunk-700: #785000;
  --color-chipmunk-800: #5e3d00;
  --color-chipmunk-900: #482e00;
  --color-chipmunk-950: #2d1b00;
  --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-mossy: #8e713e;
  --color-mossy-50: #fff4e1;
  --color-mossy-100: #feeaca;
  --color-mossy-200: #efd8b2;
  --color-mossy-300: #ddc397;
  --color-mossy-400: #c1a474;
  --color-mossy-500: #a88a57;
  --color-mossy-600: #8e713e;
  --color-mossy-700: #735928;
  --color-mossy-800: #5c4418;
  --color-mossy-900: #47340d;
  --color-mossy-950: #2e1f04;
  --color-souffl: #efcca4;
  --color-souffl-50: #ffefdd;
  --color-souffl-100: #fae3c9;
  --color-souffl-200: #efcca4;
  --color-souffl-300: #d5b795;
  --color-souffl-400: #b89873;
  --color-souffl-500: #9e7d58;
  --color-souffl-600: #826440;
  --color-souffl-700: #6a4f2d;
  --color-souffl-800: #553d20;
  --color-souffl-900: #432e15;
  --color-souffl-950: #2b1c0a;
  --color-very-coffee: #6a4700;
  --color-very-coffee-50: #fff3e3;
  --color-very-coffee-100: #ffe7c6;
  --color-very-coffee-200: #f0d1a5;
  --color-very-coffee-300: #dbb886;
  --color-very-coffee-400: #bc975f;
  --color-very-coffee-500: #a07a40;
  --color-very-coffee-600: #825f25;
  --color-very-coffee-700: #6a4700;
  --color-very-coffee-800: #523705;
  --color-very-coffee-900: #412a00;
  --color-very-coffee-950: #291900;
}