Green Olive to Fallen Blossoms Color Palette

About this palette

Green Olive to Fallen Blossoms is a 5-color cool, vintage palette: #8B8D5B (Green Olive), #555F24 (Bimi Green), #24AE8F (Hobgoblin), #573F71 (Drifting Violet), #E7AFBC (Fallen Blossoms). It mixes yellow, green, turquoise, purple, pink tones and feels cool overall. The strongest text pairing is #573F71 on #E7AFBC with a contrast ratio of 4.78:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Green Olive	rgb(139, 141, 91)	hsl(62, 22%, 45%)
Bimi Green	rgb(85, 95, 36)	hsl(70, 45%, 26%)
Hobgoblin	rgb(36, 174, 143)	hsl(167, 66%, 41%)
Drifting Violet	rgb(87, 63, 113)	hsl(269, 28%, 35%)
Fallen Blossoms	rgb(231, 175, 188)	hsl(346, 54%, 80%)

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.

Aa4.78:1 Good#573F71 on #E7AFBC
Aa4.78:1 Good#E7AFBC on #573F71
Aa3.69:1 Poor#555F24 on #E7AFBC
Aa3.69:1 Poor#E7AFBC on #555F24
Aa3.20:1 Poor#24AE8F on #573F71
Aa3.20:1 Poor#573F71 on #24AE8F

Color blindness preview

CSS variables

/* Green Olive to Fallen Blossoms — https://swatchly.xyz/palette/8b8d5b-555f24-24ae8f-573f71-e7afbc */
:root {
  --green-olive: #8b8d5b;
  --bimi-green: #555f24;
  --hobgoblin: #24ae8f;
  --drifting-violet: #573f71;
  --fallen-blossoms: #e7afbc;
}

Tailwind CSS v4

/* Green Olive to Fallen Blossoms — https://swatchly.xyz/palette/8b8d5b-555f24-24ae8f-573f71-e7afbc */
@theme {
  --color-green-olive: #8b8d5b;
  --color-green-olive-50: #f7f8dc;
  --color-green-olive-100: #edefcf;
  --color-green-olive-200: #daddb6;
  --color-green-olive-300: #c4c79b;
  --color-green-olive-400: #a6a878;
  --color-green-olive-500: #8b8d5b;
  --color-green-olive-600: #707241;
  --color-green-olive-700: #595a2e;
  --color-green-olive-800: #45461f;
  --color-green-olive-900: #353614;
  --color-green-olive-950: #212109;
  --color-bimi-green: #555f24;
  --color-bimi-green-50: #f2fad8;
  --color-bimi-green-100: #e8f0ca;
  --color-bimi-green-200: #d4deb1;
  --color-bimi-green-300: #bec995;
  --color-bimi-green-400: #9fab71;
  --color-bimi-green-500: #849055;
  --color-bimi-green-600: #6b753c;
  --color-bimi-green-700: #555f24;
  --color-bimi-green-800: #424a1a;
  --color-bimi-green-900: #32390f;
  --color-bimi-green-950: #1f2406;
  --color-hobgoblin: #24ae8f;
  --color-hobgoblin-50: #c8ffed;
  --color-hobgoblin-100: #adf7e0;
  --color-hobgoblin-200: #8ae4ca;
  --color-hobgoblin-300: #63ceb1;
  --color-hobgoblin-400: #24ae8f;
  --color-hobgoblin-500: #009277;
  --color-hobgoblin-600: #00765f;
  --color-hobgoblin-700: #005f4c;
  --color-hobgoblin-800: #004b3b;
  --color-hobgoblin-900: #003b2e;
  --color-hobgoblin-950: #00261d;
  --color-drifting-violet: #573f71;
  --color-drifting-violet-50: #f8f2ff;
  --color-drifting-violet-100: #f1e6ff;
  --color-drifting-violet-200: #dfccf8;
  --color-drifting-violet-300: #c8b2e4;
  --color-drifting-violet-400: #a88fc6;
  --color-drifting-violet-500: #8b72a8;
  --color-drifting-violet-600: #6f578a;
  --color-drifting-violet-700: #573f71;
  --color-drifting-violet-800: #433157;
  --color-drifting-violet-900: #342545;
  --color-drifting-violet-950: #20152c;
  --color-fallen-blossoms: #e7afbc;
  --color-fallen-blossoms-50: #fff1f4;
  --color-fallen-blossoms-100: #ffe3e9;
  --color-fallen-blossoms-200: #f5cad4;
  --color-fallen-blossoms-300: #e7afbc;
  --color-fallen-blossoms-400: #c5919d;
  --color-fallen-blossoms-500: #a97582;
  --color-fallen-blossoms-600: #8c5b68;
  --color-fallen-blossoms-700: #724652;
  --color-fallen-blossoms-800: #5b353f;
  --color-fallen-blossoms-900: #482830;
  --color-fallen-blossoms-950: #2e171d;
}