Very Coffee to Grape Green Color Palette

About this palette

Very Coffee to Grape Green is a 4-color earthy, vintage, gradient palette: #604200 (Very Coffee), #78773C (Crocodile Style), #8CAE6F (Sage), #9AE8A3 (Grape Green). It mixes brown, yellow, green tones and feels balanced overall. The strongest text pairing is #604200 on #9AE8A3 with a contrast ratio of 6.35:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Very Coffee	rgb(96, 66, 0)	hsl(41, 100%, 19%)
Crocodile Style	rgb(120, 119, 60)	hsl(59, 33%, 35%)
Sage	rgb(140, 174, 111)	hsl(92, 28%, 56%)
Grape Green	rgb(154, 232, 163)	hsl(127, 63%, 76%)

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.

Aa6.35:1 Good#604200 on #9AE8A3
Aa6.35:1 Good#9AE8A3 on #604200
Aa3.69:1 Poor#604200 on #8CAE6F
Aa3.69:1 Poor#8CAE6F on #604200
Aa3.21:1 Poor#78773C on #9AE8A3
Aa3.21:1 Poor#9AE8A3 on #78773C

Color blindness preview

CSS variables

/* Very Coffee to Grape Green — https://swatchly.xyz/palette/604200-78773c-8cae6f-9ae8a3 */
:root {
  --very-coffee: #604200;
  --crocodile-style: #78773c;
  --sage: #8cae6f;
  --grape-green: #9ae8a3;
}

Tailwind CSS v4

/* Very Coffee to Grape Green — https://swatchly.xyz/palette/604200-78773c-8cae6f-9ae8a3 */
@theme {
  --color-very-coffee: #604200;
  --color-very-coffee-50: #fff4e2;
  --color-very-coffee-100: #fee8c5;
  --color-very-coffee-200: #eed4aa;
  --color-very-coffee-300: #dbbd8e;
  --color-very-coffee-400: #bf9e6a;
  --color-very-coffee-500: #a4844d;
  --color-very-coffee-600: #8a6a34;
  --color-very-coffee-700: #725520;
  --color-very-coffee-800: #604200;
  --color-very-coffee-900: #493307;
  --color-very-coffee-950: #301f02;
  --color-crocodile-style: #78773c;
  --color-crocodile-style-50: #f7f8d6;
  --color-crocodile-style-100: #eff0ca;
  --color-crocodile-style-200: #dedeb2;
  --color-crocodile-style-300: #c9c996;
  --color-crocodile-style-400: #abab72;
  --color-crocodile-style-500: #919156;
  --color-crocodile-style-600: #78773c;
  --color-crocodile-style-700: #605e27;
  --color-crocodile-style-800: #4b4a18;
  --color-crocodile-style-900: #39380d;
  --color-crocodile-style-950: #242304;
  --color-sage: #8cae6f;
  --color-sage-50: #e9fdd9;
  --color-sage-100: #ddf4cb;
  --color-sage-200: #c7e2b2;
  --color-sage-300: #aecc96;
  --color-sage-400: #8cae6f;
  --color-sage-500: #719254;
  --color-sage-600: #58773b;
  --color-sage-700: #435f28;
  --color-sage-800: #324b1a;
  --color-sage-900: #253a10;
  --color-sage-950: #162406;
  --color-grape-green: #9ae8a3;
  --color-grape-green-50: #d3ffd7;
  --color-grape-green-100: #c4f6c8;
  --color-grape-green-200: #9ae8a3;
  --color-grape-green-300: #8dcf94;
  --color-grape-green-400: #68b272;
  --color-grape-green-500: #4b9757;
  --color-grape-green-600: #317c3f;
  --color-grape-green-700: #1d652c;
  --color-grape-green-800: #0e501f;
  --color-grape-green-900: #043e14;
  --color-grape-green-950: #012809;
}