Olive to Olivary color palette

8B7C00Olive 282000Midnight Pines 504B00Godzilla DECF72Le Bon Dijon B7AA25Greenfinch 695F2DOlivary

Open in generator Export PNG, PDF, ASE…

About this palette

Olive to Olivary is a 6-color warm, earthy, vintage, monochromatic palette: #8B7C00 (Olive), #282000 (Midnight Pines), #504B00 (Godzilla), #DECF72 (Le Bon Dijon), #B7AA25 (Greenfinch), #695F2D (Olivary). It mixes yellow, brown tones and feels warm overall. The strongest text pairing is #282000 on #DECF72 with a contrast ratio of 10.24:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Olive	rgb(139, 124, 0)	hsl(54, 100%, 27%)
Midnight Pines	rgb(40, 32, 0)	hsl(48, 100%, 8%)
Godzilla	rgb(80, 75, 0)	hsl(56, 100%, 16%)
Le Bon Dijon	rgb(222, 207, 114)	hsl(52, 62%, 66%)
Greenfinch	rgb(183, 170, 37)	hsl(55, 66%, 43%)
Olivary	rgb(105, 95, 45)	hsl(50, 40%, 29%)

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.24:1 Very good#282000 on #DECF72
Aa10.24:1 Very good#DECF72 on #282000
Aa6.78:1 Good#282000 on #B7AA25
Aa6.78:1 Good#B7AA25 on #282000
Aa5.65:1 Good#504B00 on #DECF72
Aa5.65:1 Good#DECF72 on #504B00
Aa4.05:1 Poor#DECF72 on #695F2D
Aa4.05:1 Poor#695F2D on #DECF72

Color blindness preview

CSS variables

/* Olive to Olivary — https://swatchly.xyz/palette/8b7c00-282000-504b00-decf72-b7aa25-695f2d */
:root {
  --olive: #8b7c00;
  --midnight-pines: #282000;
  --godzilla: #504b00;
  --le-bon-dijon: #decf72;
  --greenfinch: #b7aa25;
  --olivary: #695f2d;
}

Tailwind CSS v4

/* Olive to Olivary — https://swatchly.xyz/palette/8b7c00-282000-504b00-decf72-b7aa25-695f2d */
@theme {
  --color-olive: #8b7c00;
  --color-olive-50: #fdf5c0;
  --color-olive-100: #f2e9ad;
  --color-olive-200: #ded48a;
  --color-olive-300: #c8bb66;
  --color-olive-400: #a89936;
  --color-olive-500: #8b7c00;
  --color-olive-600: #706400;
  --color-olive-700: #594f00;
  --color-olive-800: #463e00;
  --color-olive-900: #373000;
  --color-olive-950: #231e00;
  --color-midnight-pines: #282000;
  --color-midnight-pines-50: #fbf5e1;
  --color-midnight-pines-100: #f1ecd4;
  --color-midnight-pines-200: #dfd8bc;
  --color-midnight-pines-300: #c9c1a2;
  --color-midnight-pines-400: #aba280;
  --color-midnight-pines-500: #908764;
  --color-midnight-pines-600: #756c4b;
  --color-midnight-pines-700: #5e5638;
  --color-midnight-pines-800: #4a4328;
  --color-midnight-pines-900: #3a341d;
  --color-midnight-pines-950: #282000;
  --color-godzilla: #504b00;
  --color-godzilla-50: #f9f8d3;
  --color-godzilla-100: #f0eec5;
  --color-godzilla-200: #dddbaa;
  --color-godzilla-300: #c9c68e;
  --color-godzilla-400: #aba76a;
  --color-godzilla-500: #918d4d;
  --color-godzilla-600: #787334;
  --color-godzilla-700: #625d21;
  --color-godzilla-800: #504b00;
  --color-godzilla-900: #3d3a07;
  --color-godzilla-950: #272402;
  --color-le-bon-dijon: #decf72;
  --color-le-bon-dijon-50: #f8f0ba;
  --color-le-bon-dijon-100: #eee4a8;
  --color-le-bon-dijon-200: #decf72;
  --color-le-bon-dijon-300: #c7ba6a;
  --color-le-bon-dijon-400: #ab9c41;
  --color-le-bon-dijon-500: #91821e;
  --color-le-bon-dijon-600: #776900;
  --color-le-bon-dijon-700: #605400;
  --color-le-bon-dijon-800: #4c4300;
  --color-le-bon-dijon-900: #3b3300;
  --color-le-bon-dijon-950: #251f00;
  --color-greenfinch: #b7aa25;
  --color-greenfinch-50: #fffac2;
  --color-greenfinch-100: #f8f1ae;
  --color-greenfinch-200: #e7df8d;
  --color-greenfinch-300: #d3c968;
  --color-greenfinch-400: #b7aa25;
  --color-greenfinch-500: #998d00;
  --color-greenfinch-600: #7b7100;
  --color-greenfinch-700: #615900;
  --color-greenfinch-800: #4c4500;
  --color-greenfinch-900: #3a3500;
  --color-greenfinch-950: #242000;
  --color-olivary: #695f2d;
  --color-olivary-50: #fcf6d9;
  --color-olivary-100: #f2eccb;
  --color-olivary-200: #e2dab4;
  --color-olivary-300: #cec69a;
  --color-olivary-400: #b1a877;
  --color-olivary-500: #988e5b;
  --color-olivary-600: #7f7443;
  --color-olivary-700: #695f2d;
  --color-olivary-800: #534a20;
  --color-olivary-900: #403914;
  --color-olivary-950: #292308;
}