Very Coffee to Grotesque Green color palette

634900Very Coffee 90711APuma 979C29Papyrus 312C00Secret Passage 61E77CGrotesque Green

About this palette

Very Coffee to Grotesque Green is a 5-color warm, earthy palette: #634900 (Very Coffee), #90711A (Puma), #979C29 (Papyrus), #312C00 (Secret Passage), #61E77C (Grotesque Green). It mixes brown, yellow, green tones and feels warm overall. The strongest text pairing is #312C00 on #61E77C with a contrast ratio of 8.87:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Very Coffee	rgb(99, 73, 0)	hsl(44, 100%, 19%)
Puma	rgb(144, 113, 26)	hsl(44, 69%, 33%)
Papyrus	rgb(151, 156, 41)	hsl(63, 58%, 39%)
Secret Passage	rgb(49, 44, 0)	hsl(54, 100%, 10%)
Grotesque Green	rgb(97, 231, 124)	hsl(132, 74%, 64%)

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.

Aa8.87:1 Very good#312C00 on #61E77C
Aa8.87:1 Very good#61E77C on #312C00
Aa5.33:1 Good#634900 on #61E77C
Aa5.33:1 Good#61E77C on #634900
Aa4.76:1 Good#979C29 on #312C00
Aa4.76:1 Good#312C00 on #979C29
Aa3.06:1 Poor#90711A on #312C00
Aa3.06:1 Poor#312C00 on #90711A

Color blindness preview

CSS variables

/* Very Coffee to Grotesque Green — https://swatchly.xyz/palette/634900-90711a-979c29-312c00-61e77c */
:root {
  --very-coffee: #634900;
  --puma: #90711a;
  --papyrus: #979c29;
  --secret-passage: #312c00;
  --grotesque-green: #61e77c;
}

Tailwind CSS v4

/* Very Coffee to Grotesque Green — https://swatchly.xyz/palette/634900-90711a-979c29-312c00-61e77c */
@theme {
  --color-very-coffee: #634900;
  --color-very-coffee-50: #fff4de;
  --color-very-coffee-100: #fce9c3;
  --color-very-coffee-200: #ead3a6;
  --color-very-coffee-300: #d4bb86;
  --color-very-coffee-400: #b5995f;
  --color-very-coffee-500: #987d40;
  --color-very-coffee-600: #7b6125;
  --color-very-coffee-700: #634900;
  --color-very-coffee-800: #4d3905;
  --color-very-coffee-900: #3c2b01;
  --color-very-coffee-950: #261a00;
  --color-puma: #90711a;
  --color-puma-50: #fff4db;
  --color-puma-100: #ffebbd;
  --color-puma-200: #f1d9a1;
  --color-puma-300: #dfc383;
  --color-puma-400: #c3a55b;
  --color-puma-500: #aa8a3a;
  --color-puma-600: #90711a;
  --color-puma-700: #745900;
  --color-puma-800: #5b4500;
  --color-puma-900: #463400;
  --color-puma-950: #2c2000;
  --color-papyrus: #979c29;
  --color-papyrus-50: #f1f6ba;
  --color-papyrus-100: #e5eba6;
  --color-papyrus-200: #d0d683;
  --color-papyrus-300: #b8bd5e;
  --color-papyrus-400: #979c29;
  --color-papyrus-500: #7e8200;
  --color-papyrus-600: #666900;
  --color-papyrus-700: #515400;
  --color-papyrus-800: #404200;
  --color-papyrus-900: #323400;
  --color-papyrus-950: #202100;
  --color-secret-passage: #312c00;
  --color-secret-passage-50: #f9f7dd;
  --color-secret-passage-100: #efedd0;
  --color-secret-passage-200: #ddd9b8;
  --color-secret-passage-300: #c7c39c;
  --color-secret-passage-400: #a6a277;
  --color-secret-passage-500: #8a855a;
  --color-secret-passage-600: #6e6940;
  --color-secret-passage-700: #55512c;
  --color-secret-passage-800: #403d1d;
  --color-secret-passage-900: #312c00;
  --color-secret-passage-950: #1c1a08;
  --color-grotesque-green: #61e77c;
  --color-grotesque-green-50: #eaffec;
  --color-grotesque-green-100: #ccffd1;
  --color-grotesque-green-200: #9df5a9;
  --color-grotesque-green-300: #61e77c;
  --color-grotesque-green-400: #43c360;
  --color-grotesque-green-500: #00a640;
  --color-grotesque-green-600: #008632;
  --color-grotesque-green-700: #006a26;
  --color-grotesque-green-800: #00521c;
  --color-grotesque-green-900: #003f13;
  --color-grotesque-green-950: #002809;
}