Olivary to Jalapeño Color Palette

About this palette

Olivary to Jalapeño is a 5-color warm, earthy, vintage palette: #6D5E31 (Olivary), #A2E8BC (Celadon), #2B3D74 (Good Karma), #C195B5 (Mauve Magic), #9B8B47 (Jalapeño). It mixes brown, green, blue, pink, yellow tones and feels warm overall. The strongest text pairing is #A2E8BC on #2B3D74 with a contrast ratio of 7.32:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Olivary	rgb(109, 94, 49)	hsl(45, 38%, 31%)
Celadon	rgb(162, 232, 188)	hsl(142, 60%, 77%)
Good Karma	rgb(43, 61, 116)	hsl(225, 46%, 31%)
Mauve Magic	rgb(193, 149, 181)	hsl(316, 26%, 67%)
Jalapeño	rgb(155, 139, 71)	hsl(49, 37%, 44%)

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.

Aa7.32:1 Very good#A2E8BC on #2B3D74
Aa7.32:1 Very good#2B3D74 on #A2E8BC
Aa4.49:1 Poor#6D5E31 on #A2E8BC
Aa4.49:1 Poor#A2E8BC on #6D5E31
Aa4.07:1 Poor#2B3D74 on #C195B5
Aa4.07:1 Poor#C195B5 on #2B3D74
Aa3.05:1 Poor#2B3D74 on #9B8B47
Aa3.05:1 Poor#9B8B47 on #2B3D74

Color blindness preview

CSS variables

/* Olivary to Jalapeño — https://swatchly.xyz/palette/6d5e31-a2e8bc-2b3d74-c195b5-9b8b47 */
:root {
  --olivary: #6d5e31;
  --celadon: #a2e8bc;
  --good-karma: #2b3d74;
  --mauve-magic: #c195b5;
  --jalape-o: #9b8b47;
}

Tailwind CSS v4

/* Olivary to Jalapeño — https://swatchly.xyz/palette/6d5e31-a2e8bc-2b3d74-c195b5-9b8b47 */
@theme {
  --color-olivary: #6d5e31;
  --color-olivary-50: #fef5da;
  --color-olivary-100: #f5ebcd;
  --color-olivary-200: #e5d9b6;
  --color-olivary-300: #d2c49c;
  --color-olivary-400: #b5a67a;
  --color-olivary-500: #9c8c5f;
  --color-olivary-600: #837346;
  --color-olivary-700: #6d5e31;
  --color-olivary-800: #564923;
  --color-olivary-900: #433817;
  --color-olivary-950: #2b230a;
  --color-celadon: #a2e8bc;
  --color-celadon-50: #d8ffe5;
  --color-celadon-100: #caf6d9;
  --color-celadon-200: #a2e8bc;
  --color-celadon-300: #94cfaa;
  --color-celadon-400: #70b189;
  --color-celadon-500: #52966e;
  --color-celadon-600: #387b55;
  --color-celadon-700: #246341;
  --color-celadon-800: #154e31;
  --color-celadon-900: #0b3d24;
  --color-celadon-950: #032614;
  --color-good-karma: #2b3d74;
  --color-good-karma-50: #f1f5ff;
  --color-good-karma-100: #e3ebff;
  --color-good-karma-200: #c7d7ff;
  --color-good-karma-300: #aabff7;
  --color-good-karma-400: #889fdc;
  --color-good-karma-500: #6c83c0;
  --color-good-karma-600: #5368a2;
  --color-good-karma-700: #3f5186;
  --color-good-karma-800: #2b3d74;
  --color-good-karma-900: #222f56;
  --color-good-karma-950: #131d38;
  --color-mauve-magic: #c195b5;
  --color-mauve-magic-50: #fff2fb;
  --color-mauve-magic-100: #ffe4f7;
  --color-mauve-magic-200: #f0cee6;
  --color-mauve-magic-300: #ddb6d2;
  --color-mauve-magic-400: #c195b5;
  --color-mauve-magic-500: #a47998;
  --color-mauve-magic-600: #875f7d;
  --color-mauve-magic-700: #6d4964;
  --color-mauve-magic-800: #57374f;
  --color-mauve-magic-900: #44293d;
  --color-mauve-magic-950: #2b1826;
  --color-jalape-o: #9b8b47;
  --color-jalape-o-50: #fff7d3;
  --color-jalape-o-100: #f7eec4;
  --color-jalape-o-200: #e6dba9;
  --color-jalape-o-300: #d2c58c;
  --color-jalape-o-400: #b5a666;
  --color-jalape-o-500: #9b8b47;
  --color-jalape-o-600: #7f6f2b;
  --color-jalape-o-700: #665815;
  --color-jalape-o-800: #514405;
  --color-jalape-o-900: #3e3400;
  --color-jalape-o-950: #271f00;
}