Kashmir to Peppermint Color Palette

About this palette

Kashmir to Peppermint is a 5-color muted, cool, earthy palette: #6C8B63 (Kashmir), #2A3528 (Terminal Black), #505F49 (Muddy Olive), #B5C8A1 (Greenhorn), #D7E7CE (Peppermint). It mixes green, gray tones and feels cool overall. The strongest text pairing is #2A3528 on #D7E7CE with a contrast ratio of 9.89:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Kashmir	rgb(108, 139, 99)	hsl(106, 17%, 47%)
Terminal Black	rgb(42, 53, 40)	hsl(111, 14%, 18%)
Muddy Olive	rgb(80, 95, 73)	hsl(101, 13%, 33%)
Greenhorn	rgb(181, 200, 161)	hsl(89, 26%, 71%)
Peppermint	rgb(215, 231, 206)	hsl(98, 34%, 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.

Aa9.89:1 Very good#2A3528 on #D7E7CE
Aa9.89:1 Very good#D7E7CE on #2A3528
Aa7.17:1 Very good#2A3528 on #B5C8A1
Aa7.17:1 Very good#B5C8A1 on #2A3528
Aa5.27:1 Good#505F49 on #D7E7CE
Aa5.27:1 Good#D7E7CE on #505F49
Aa3.82:1 Poor#505F49 on #B5C8A1
Aa3.82:1 Poor#B5C8A1 on #505F49

Color blindness preview

CSS variables

/* Kashmir to Peppermint — https://swatchly.xyz/palette/6c8b63-2a3528-505f49-b5c8a1-d7e7ce */
:root {
  --kashmir: #6c8b63;
  --terminal-black: #2a3528;
  --muddy-olive: #505f49;
  --greenhorn: #b5c8a1;
  --peppermint: #d7e7ce;
}

Tailwind CSS v4

/* Kashmir to Peppermint — https://swatchly.xyz/palette/6c8b63-2a3528-505f49-b5c8a1-d7e7ce */
@theme {
  --color-kashmir: #6c8b63;
  --color-kashmir-50: #e8fbe2;
  --color-kashmir-100: #dbf1d5;
  --color-kashmir-200: #c4ddbd;
  --color-kashmir-300: #aac7a2;
  --color-kashmir-400: #88a77f;
  --color-kashmir-500: #6c8b63;
  --color-kashmir-600: #54714b;
  --color-kashmir-700: #405a38;
  --color-kashmir-800: #304729;
  --color-kashmir-900: #24371e;
  --color-kashmir-950: #152311;
  --color-terminal-black: #2a3528;
  --color-terminal-black-50: #f0f8ee;
  --color-terminal-black-100: #e5eee4;
  --color-terminal-black-200: #d1dbcf;
  --color-terminal-black-300: #b9c5b7;
  --color-terminal-black-400: #99a696;
  --color-terminal-black-500: #7d8a7b;
  --color-terminal-black-600: #636f61;
  --color-terminal-black-700: #4d584b;
  --color-terminal-black-800: #3b4439;
  --color-terminal-black-900: #2a3528;
  --color-terminal-black-950: #1a2019;
  --color-muddy-olive: #505f49;
  --color-muddy-olive-50: #eff9ea;
  --color-muddy-olive-100: #e4efdf;
  --color-muddy-olive-200: #d0ddca;
  --color-muddy-olive-300: #b9c8b3;
  --color-muddy-olive-400: #9aaa93;
  --color-muddy-olive-500: #7f8f78;
  --color-muddy-olive-600: #66755f;
  --color-muddy-olive-700: #505f49;
  --color-muddy-olive-800: #3e4a38;
  --color-muddy-olive-900: #2f392a;
  --color-muddy-olive-950: #1c2419;
  --color-greenhorn: #b5c8a1;
  --color-greenhorn-50: #eef9e3;
  --color-greenhorn-100: #e3f0d7;
  --color-greenhorn-200: #ceddbf;
  --color-greenhorn-300: #b5c8a1;
  --color-greenhorn-400: #96a884;
  --color-greenhorn-500: #7b8d68;
  --color-greenhorn-600: #61724f;
  --color-greenhorn-700: #4c5b3b;
  --color-greenhorn-800: #3a472c;
  --color-greenhorn-900: #2c371f;
  --color-greenhorn-950: #1a2211;
  --color-peppermint: #d7e7ce;
  --color-peppermint-50: #f7fff2;
  --color-peppermint-100: #eef7e8;
  --color-peppermint-200: #d7e7ce;
  --color-peppermint-300: #c1cdb9;
  --color-peppermint-400: #9fad96;
  --color-peppermint-500: #819079;
  --color-peppermint-600: #66745e;
  --color-peppermint-700: #4f5b47;
  --color-peppermint-800: #3b4635;
  --color-peppermint-900: #2d3628;
  --color-peppermint-950: #1b2217;
}