Light Spirited to Black Olive color palette

D6EFE9Light Spirited BFC7ABBok Choy A2829EHatoba Pigeon 6B566AHibernation 383E2CBlack Olive

About this palette

Light Spirited to Black Olive is a 5-color muted, gradient palette: #D6EFE9 (Light Spirited), #BFC7AB (Bok Choy), #A2829E (Hatoba Pigeon), #6B566A (Hibernation), #383E2C (Black Olive). It mixes white, green, pink, gray tones and feels cool overall. The strongest text pairing is #D6EFE9 on #383E2C with a contrast ratio of 9.18:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Light Spirited	rgb(214, 239, 233)	hsl(166, 44%, 89%)
Bok Choy	rgb(191, 199, 171)	hsl(77, 20%, 73%)
Hatoba Pigeon	rgb(162, 130, 158)	hsl(308, 15%, 57%)
Hibernation	rgb(107, 86, 106)	hsl(303, 11%, 38%)
Black Olive	rgb(56, 62, 44)	hsl(80, 17%, 21%)

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.18:1 Very good#D6EFE9 on #383E2C
Aa9.18:1 Very good#383E2C on #D6EFE9
Aa6.32:1 Good#BFC7AB on #383E2C
Aa6.32:1 Good#383E2C on #BFC7AB
Aa5.49:1 Good#D6EFE9 on #6B566A
Aa5.49:1 Good#6B566A on #D6EFE9
Aa3.78:1 Poor#BFC7AB on #6B566A
Aa3.78:1 Poor#6B566A on #BFC7AB

Color blindness preview

CSS variables

/* Light Spirited to Black Olive — https://swatchly.xyz/palette/d6efe9-bfc7ab-a2829e-6b566a-383e2c */
:root {
  --light-spirited: #d6efe9;
  --bok-choy: #bfc7ab;
  --hatoba-pigeon: #a2829e;
  --hibernation: #6b566a;
  --black-olive: #383e2c;
}

Tailwind CSS v4

/* Light Spirited to Black Olive — https://swatchly.xyz/palette/d6efe9-bfc7ab-a2829e-6b566a-383e2c */
@theme {
  --color-light-spirited: #d6efe9;
  --color-light-spirited-50: #e9f7f3;
  --color-light-spirited-100: #d6efe9;
  --color-light-spirited-200: #c8dad6;
  --color-light-spirited-300: #b0c5c0;
  --color-light-spirited-400: #8fa6a1;
  --color-light-spirited-500: #748b86;
  --color-light-spirited-600: #5b716c;
  --color-light-spirited-700: #465a56;
  --color-light-spirited-800: #354743;
  --color-light-spirited-900: #283633;
  --color-light-spirited-950: #17221f;
  --color-bok-choy: #bfc7ab;
  --color-bok-choy-50: #f4f9e9;
  --color-bok-choy-100: #eaefde;
  --color-bok-choy-200: #d6dcc7;
  --color-bok-choy-300: #bfc7ab;
  --color-bok-choy-400: #a0a78d;
  --color-bok-choy-500: #848b71;
  --color-bok-choy-600: #697057;
  --color-bok-choy-700: #535942;
  --color-bok-choy-800: #404532;
  --color-bok-choy-900: #313524;
  --color-bok-choy-950: #1e2115;
  --color-hatoba-pigeon: #a2829e;
  --color-hatoba-pigeon-50: #fff2fd;
  --color-hatoba-pigeon-100: #fce6f9;
  --color-hatoba-pigeon-200: #ecd3e8;
  --color-hatoba-pigeon-300: #d9bcd5;
  --color-hatoba-pigeon-400: #bc9db8;
  --color-hatoba-pigeon-500: #a2829e;
  --color-hatoba-pigeon-600: #856781;
  --color-hatoba-pigeon-700: #6b4f68;
  --color-hatoba-pigeon-800: #553c52;
  --color-hatoba-pigeon-900: #412d3f;
  --color-hatoba-pigeon-950: #291b28;
  --color-hibernation: #6b566a;
  --color-hibernation-50: #fef0fd;
  --color-hibernation-100: #f5e6f4;
  --color-hibernation-200: #e5d3e3;
  --color-hibernation-300: #d1bdd0;
  --color-hibernation-400: #b49eb3;
  --color-hibernation-500: #9b8499;
  --color-hibernation-600: #816b80;
  --color-hibernation-700: #6b566a;
  --color-hibernation-800: #544353;
  --color-hibernation-900: #413241;
  --color-hibernation-950: #2a1f29;
  --color-black-olive: #383e2c;
  --color-black-olive-50: #f3f7eb;
  --color-black-olive-100: #e9ede0;
  --color-black-olive-200: #d4daca;
  --color-black-olive-300: #bcc3b0;
  --color-black-olive-400: #9ba28e;
  --color-black-olive-500: #7e8571;
  --color-black-olive-600: #636a57;
  --color-black-olive-700: #4c5241;
  --color-black-olive-800: #383e2c;
  --color-black-olive-900: #2b2f23;
  --color-black-olive-950: #191c14;
}