Very Coffee to Blushing Cinnamon color palette

674800Very Coffee 586E1FBotanical 988300Captain Kirk A0A34ADesert Locust CCA27FLatte FFC3A0Blushing Cinnamon

Open in generator Export PNG, PDF, ASE…

About this palette

Very Coffee to Blushing Cinnamon is a 6-color warm, earthy, vintage, gradient palette: #674800 (Very Coffee), #586E1F (Botanical), #988300 (Captain Kirk), #A0A34A (Desert Locust), #CCA27F (Latte), #FFC3A0 (Blushing Cinnamon). It mixes brown, green, yellow, orange tones and feels warm overall. The strongest text pairing is #674800 on #FFC3A0 with a contrast ratio of 5.42:1, and 1 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Very Coffee	rgb(103, 72, 0)	hsl(42, 100%, 20%)
Botanical	rgb(88, 110, 31)	hsl(77, 56%, 28%)
Captain Kirk	rgb(152, 131, 0)	hsl(52, 100%, 30%)
Desert Locust	rgb(160, 163, 74)	hsl(62, 38%, 46%)
Latte	rgb(204, 162, 127)	hsl(27, 43%, 65%)
Blushing Cinnamon	rgb(255, 195, 160)	hsl(22, 100%, 81%)

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.

Aa5.42:1 Good#674800 on #FFC3A0
Aa5.42:1 Good#FFC3A0 on #674800
Aa3.70:1 Poor#586E1F on #FFC3A0
Aa3.70:1 Poor#FFC3A0 on #586E1F
Aa3.61:1 Poor#674800 on #CCA27F
Aa3.61:1 Poor#CCA27F on #674800
Aa3.13:1 Poor#674800 on #A0A34A
Aa3.13:1 Poor#A0A34A on #674800

Color blindness preview

CSS variables

/* Very Coffee to Blushing Cinnamon — https://swatchly.xyz/palette/674800-586e1f-988300-a0a34a-cca27f-ffc3a0 */
:root {
  --very-coffee: #674800;
  --botanical: #586e1f;
  --captain-kirk: #988300;
  --desert-locust: #a0a34a;
  --latte: #cca27f;
  --blushing-cinnamon: #ffc3a0;
}

Tailwind CSS v4

/* Very Coffee to Blushing Cinnamon — https://swatchly.xyz/palette/674800-586e1f-988300-a0a34a-cca27f-ffc3a0 */
@theme {
  --color-very-coffee: #674800;
  --color-very-coffee-50: #fff4e1;
  --color-very-coffee-100: #fee8c3;
  --color-very-coffee-200: #edd2a5;
  --color-very-coffee-300: #d8ba86;
  --color-very-coffee-400: #b9985f;
  --color-very-coffee-500: #9c7b40;
  --color-very-coffee-600: #7f6025;
  --color-very-coffee-700: #674800;
  --color-very-coffee-800: #503805;
  --color-very-coffee-900: #3f2a00;
  --color-very-coffee-950: #281900;
  --color-botanical: #586e1f;
  --color-botanical-50: #edfdd1;
  --color-botanical-100: #e0f2c1;
  --color-botanical-200: #cadea3;
  --color-botanical-300: #b0c784;
  --color-botanical-400: #8fa75c;
  --color-botanical-500: #738a3d;
  --color-botanical-600: #586e1f;
  --color-botanical-700: #455810;
  --color-botanical-800: #354503;
  --color-botanical-900: #283500;
  --color-botanical-950: #182100;
  --color-captain-kirk: #988300;
  --color-captain-kirk-50: #fff6c8;
  --color-captain-kirk-100: #f8ebaf;
  --color-captain-kirk-200: #e6d78e;
  --color-captain-kirk-300: #d2c06a;
  --color-captain-kirk-400: #b49f3a;
  --color-captain-kirk-500: #988300;
  --color-captain-kirk-600: #7b6900;
  --color-captain-kirk-700: #615300;
  --color-captain-kirk-800: #4c4100;
  --color-captain-kirk-900: #3b3200;
  --color-captain-kirk-950: #251f00;
  --color-desert-locust: #a0a34a;
  --color-desert-locust-50: #f5f8c7;
  --color-desert-locust-100: #eaeeb7;
  --color-desert-locust-200: #d6da98;
  --color-desert-locust-300: #bfc377;
  --color-desert-locust-400: #a0a34a;
  --color-desert-locust-500: #86882d;
  --color-desert-locust-600: #6c6e0b;
  --color-desert-locust-700: #565700;
  --color-desert-locust-800: #434400;
  --color-desert-locust-900: #343500;
  --color-desert-locust-950: #212100;
  --color-latte: #cca27f;
  --color-latte-50: #fff7f1;
  --color-latte-100: #ffedde;
  --color-latte-200: #f7d8bf;
  --color-latte-300: #e5c2a5;
  --color-latte-400: #cca27f;
  --color-latte-500: #ad8563;
  --color-latte-600: #8f6948;
  --color-latte-700: #745133;
  --color-latte-800: #5c3e23;
  --color-latte-900: #472e17;
  --color-latte-950: #2d1b0a;
  --color-blushing-cinnamon: #ffc3a0;
  --color-blushing-cinnamon-50: #ffede3;
  --color-blushing-cinnamon-100: #ffdfcd;
  --color-blushing-cinnamon-200: #ffc3a0;
  --color-blushing-cinnamon-300: #e3b092;
  --color-blushing-cinnamon-400: #c7906f;
  --color-blushing-cinnamon-500: #ac7554;
  --color-blushing-cinnamon-600: #905c3c;
  --color-blushing-cinnamon-700: #76472a;
  --color-blushing-cinnamon-800: #5f371d;
  --color-blushing-cinnamon-900: #4b2913;
  --color-blushing-cinnamon-950: #311808;
}