Black Olive to Almond Color Palette

About this palette

Black Olive to Almond is a 5-color muted, earthy, gradient palette: #3D3A2C (Black Olive), #736249 (Heavy Brown), #8B8B78 (Kosher Khaki), #A1B69B (Salvia), #F1DCC7 (Almond). It mixes gray, brown, green, orange tones and feels warm overall. The strongest text pairing is #3D3A2C on #F1DCC7 with a contrast ratio of 8.59:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Olive	rgb(61, 58, 44)	hsl(49, 16%, 21%)
Heavy Brown	rgb(115, 98, 73)	hsl(36, 22%, 37%)
Kosher Khaki	rgb(139, 139, 120)	hsl(60, 8%, 51%)
Salvia	rgb(161, 182, 155)	hsl(107, 16%, 66%)
Almond	rgb(241, 220, 199)	hsl(30, 60%, 86%)

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.59:1 Very good#3D3A2C on #F1DCC7
Aa8.59:1 Very good#F1DCC7 on #3D3A2C
Aa5.26:1 Good#3D3A2C on #A1B69B
Aa5.26:1 Good#A1B69B on #3D3A2C
Aa4.42:1 Poor#736249 on #F1DCC7
Aa4.42:1 Poor#F1DCC7 on #736249
Aa3.29:1 Poor#3D3A2C on #8B8B78
Aa3.29:1 Poor#8B8B78 on #3D3A2C

Color blindness preview

CSS variables

/* Black Olive to Almond — https://swatchly.xyz/palette/3d3a2c-736249-8b8b78-a1b69b-f1dcc7 */
:root {
  --black-olive: #3d3a2c;
  --heavy-brown: #736249;
  --kosher-khaki: #8b8b78;
  --salvia: #a1b69b;
  --almond: #f1dcc7;
}

Tailwind CSS v4

/* Black Olive to Almond — https://swatchly.xyz/palette/3d3a2c-736249-8b8b78-a1b69b-f1dcc7 */
@theme {
  --color-black-olive: #3d3a2c;
  --color-black-olive-50: #f7f5ec;
  --color-black-olive-100: #eeebe1;
  --color-black-olive-200: #dad8cb;
  --color-black-olive-300: #c4c1b3;
  --color-black-olive-400: #a6a394;
  --color-black-olive-500: #8d8979;
  --color-black-olive-600: #737061;
  --color-black-olive-700: #5e5b4d;
  --color-black-olive-800: #4b493c;
  --color-black-olive-900: #3d3a2c;
  --color-black-olive-950: #26251d;
  --color-heavy-brown: #736249;
  --color-heavy-brown-50: #fef4e4;
  --color-heavy-brown-100: #f4e8d6;
  --color-heavy-brown-200: #e1d3be;
  --color-heavy-brown-300: #cbbaa3;
  --color-heavy-brown-400: #ab9a80;
  --color-heavy-brown-500: #8f7d63;
  --color-heavy-brown-600: #736249;
  --color-heavy-brown-700: #5c4d37;
  --color-heavy-brown-800: #493c29;
  --color-heavy-brown-900: #392e1e;
  --color-heavy-brown-950: #241c10;
  --color-kosher-khaki: #8b8b78;
  --color-kosher-khaki-50: #f7f7eb;
  --color-kosher-khaki-100: #edede1;
  --color-kosher-khaki-200: #dadacc;
  --color-kosher-khaki-300: #c5c5b4;
  --color-kosher-khaki-400: #a6a693;
  --color-kosher-khaki-500: #8b8b78;
  --color-kosher-khaki-600: #70705e;
  --color-kosher-khaki-700: #595948;
  --color-kosher-khaki-800: #454537;
  --color-kosher-khaki-900: #353529;
  --color-kosher-khaki-950: #202018;
  --color-salvia: #a1b69b;
  --color-salvia-50: #f2feef;
  --color-salvia-100: #eaf7e6;
  --color-salvia-200: #d7e6d3;
  --color-salvia-300: #c1d2bc;
  --color-salvia-400: #a1b69b;
  --color-salvia-500: #84987e;
  --color-salvia-600: #677b62;
  --color-salvia-700: #4f614a;
  --color-salvia-800: #3c4b37;
  --color-salvia-900: #2c3928;
  --color-salvia-950: #192217;
  --color-almond: #f1dcc7;
  --color-almond-50: #fffaf5;
  --color-almond-100: #fcf0e4;
  --color-almond-200: #f1dcc7;
  --color-almond-300: #d6c5b4;
  --color-almond-400: #b6a390;
  --color-almond-500: #998673;
  --color-almond-600: #7d6b58;
  --color-almond-700: #645342;
  --color-almond-800: #4e3f31;
  --color-almond-900: #3c3024;
  --color-almond-950: #261d15;
}