Puma to Very Coffee color palette

956C1APuma 2B1F03Burnt Coffee BA9854Amaretto Sour FAC956Deep Fried Sunrays 604100Very Coffee

About this palette

Puma to Very Coffee is a 5-color warm, earthy, vintage, monochromatic palette: #956C1A (Puma), #2B1F03 (Burnt Coffee), #BA9854 (Amaretto Sour), #FAC956 (Deep Fried Sunrays), #604100 (Very Coffee). It mixes yellow, brown tones and feels warm overall. The strongest text pairing is #2B1F03 on #FAC956 with a contrast ratio of 10.43:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Puma	rgb(149, 108, 26)	hsl(40, 70%, 34%)
Burnt Coffee	rgb(43, 31, 3)	hsl(42, 87%, 9%)
Amaretto Sour	rgb(186, 152, 84)	hsl(40, 42%, 53%)
Deep Fried Sunrays	rgb(250, 201, 86)	hsl(42, 94%, 66%)
Very Coffee	rgb(96, 65, 0)	hsl(41, 100%, 19%)

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.43:1 Very good#2B1F03 on #FAC956
Aa10.43:1 Very good#FAC956 on #2B1F03
Aa6.01:1 Good#FAC956 on #604100
Aa6.01:1 Good#604100 on #FAC956
Aa5.93:1 Good#2B1F03 on #BA9854
Aa5.93:1 Good#BA9854 on #2B1F03
Aa3.42:1 Poor#BA9854 on #604100
Aa3.42:1 Poor#604100 on #BA9854

Color blindness preview

CSS variables

/* Puma to Very Coffee — https://swatchly.xyz/palette/956c1a-2b1f03-ba9854-fac956-604100 */
:root {
  --puma: #956c1a;
  --burnt-coffee: #2b1f03;
  --amaretto-sour: #ba9854;
  --deep-fried-sunrays: #fac956;
  --very-coffee: #604100;
}

Tailwind CSS v4

/* Puma to Very Coffee — https://swatchly.xyz/palette/956c1a-2b1f03-ba9854-fac956-604100 */
@theme {
  --color-puma: #956c1a;
  --color-puma-50: #fff4e1;
  --color-puma-100: #ffeac8;
  --color-puma-200: #f6d6a1;
  --color-puma-300: #e4c083;
  --color-puma-400: #c9a05a;
  --color-puma-500: #af863a;
  --color-puma-600: #956c1a;
  --color-puma-700: #795400;
  --color-puma-800: #5f4100;
  --color-puma-900: #493200;
  --color-puma-950: #2f1e00;
  --color-burnt-coffee: #2b1f03;
  --color-burnt-coffee-50: #fdf4e2;
  --color-burnt-coffee-100: #f4ead6;
  --color-burnt-coffee-200: #e2d6be;
  --color-burnt-coffee-300: #cdc0a4;
  --color-burnt-coffee-400: #aea082;
  --color-burnt-coffee-500: #938567;
  --color-burnt-coffee-600: #796b4e;
  --color-burnt-coffee-700: #61553a;
  --color-burnt-coffee-800: #4d422b;
  --color-burnt-coffee-900: #3d331f;
  --color-burnt-coffee-950: #2b1f03;
  --color-amaretto-sour: #ba9854;
  --color-amaretto-sour-50: #fff2da;
  --color-amaretto-sour-100: #fde6bb;
  --color-amaretto-sour-200: #ecd19e;
  --color-amaretto-sour-300: #d7b97f;
  --color-amaretto-sour-400: #ba9854;
  --color-amaretto-sour-500: #9e7d39;
  --color-amaretto-sour-600: #83641e;
  --color-amaretto-sour-700: #6b4e07;
  --color-amaretto-sour-800: #553d00;
  --color-amaretto-sour-900: #422f00;
  --color-amaretto-sour-950: #2a1d00;
  --color-deep-fried-sunrays: #fac956;
  --color-deep-fried-sunrays-50: #ffefcc;
  --color-deep-fried-sunrays-100: #ffe2a3;
  --color-deep-fried-sunrays-200: #fac956;
  --color-deep-fried-sunrays-300: #dfb554;
  --color-deep-fried-sunrays-400: #c39517;
  --color-deep-fried-sunrays-500: #a47c00;
  --color-deep-fried-sunrays-600: #856400;
  --color-deep-fried-sunrays-700: #6b5000;
  --color-deep-fried-sunrays-800: #553e00;
  --color-deep-fried-sunrays-900: #423000;
  --color-deep-fried-sunrays-950: #2a1d00;
  --color-very-coffee: #604100;
  --color-very-coffee-50: #fff3e2;
  --color-very-coffee-100: #ffe8c5;
  --color-very-coffee-200: #eed3aa;
  --color-very-coffee-300: #dcbd8e;
  --color-very-coffee-400: #bf9e6a;
  --color-very-coffee-500: #a5834d;
  --color-very-coffee-600: #8a6934;
  --color-very-coffee-700: #725420;
  --color-very-coffee-800: #604100;
  --color-very-coffee-900: #493208;
  --color-very-coffee-950: #301f02;
}