Basil Smash to Dark Olive color palette

C4DBA2Basil Smash EC7783Momo Peach 5E80B2Fisher King 335886Glimpse of Void 2C3E00Dark Olive

About this palette

Basil Smash to Dark Olive is a 5-color cool palette: #C4DBA2 (Basil Smash), #EC7783 (Momo Peach), #5E80B2 (Fisher King), #335886 (Glimpse of Void), #2C3E00 (Dark Olive). It mixes green, red, blue tones and feels cool overall. The strongest text pairing is #C4DBA2 on #2C3E00 with a contrast ratio of 7.80:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Basil Smash	rgb(196, 219, 162)	hsl(84, 44%, 75%)
Momo Peach	rgb(236, 119, 131)	hsl(354, 75%, 70%)
Fisher King	rgb(94, 128, 178)	hsl(216, 35%, 53%)
Glimpse of Void	rgb(51, 88, 134)	hsl(213, 45%, 36%)
Dark Olive	rgb(44, 62, 0)	hsl(77, 100%, 12%)

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.80:1 Very good#C4DBA2 on #2C3E00
Aa7.80:1 Very good#2C3E00 on #C4DBA2
Aa4.86:1 Good#C4DBA2 on #335886
Aa4.86:1 Good#335886 on #C4DBA2
Aa4.19:1 Poor#EC7783 on #2C3E00
Aa4.19:1 Poor#2C3E00 on #EC7783

Color blindness preview

CSS variables

/* Basil Smash to Dark Olive — https://swatchly.xyz/palette/c4dba2-ec7783-5e80b2-335886-2c3e00 */
:root {
  --basil-smash: #c4dba2;
  --momo-peach: #ec7783;
  --fisher-king: #5e80b2;
  --glimpse-of-void: #335886;
  --dark-olive: #2c3e00;
}

Tailwind CSS v4

/* Basil Smash to Dark Olive — https://swatchly.xyz/palette/c4dba2-ec7783-5e80b2-335886-2c3e00 */
@theme {
  --color-basil-smash: #c4dba2;
  --color-basil-smash-50: #e9f7d6;
  --color-basil-smash-100: #ddedc7;
  --color-basil-smash-200: #c4dba2;
  --color-basil-smash-300: #b0c493;
  --color-basil-smash-400: #91a671;
  --color-basil-smash-500: #778c56;
  --color-basil-smash-600: #5f723f;
  --color-basil-smash-700: #4a5c2c;
  --color-basil-smash-800: #39491f;
  --color-basil-smash-900: #2b3814;
  --color-basil-smash-950: #1a2309;
  --color-momo-peach: #ec7783;
  --color-momo-peach-50: #fff1f1;
  --color-momo-peach-100: #ffe3e4;
  --color-momo-peach-200: #ffc6c9;
  --color-momo-peach-300: #ffa2a9;
  --color-momo-peach-400: #ec7783;
  --color-momo-peach-500: #cd5b69;
  --color-momo-peach-600: #ad4150;
  --color-momo-peach-700: #902c3c;
  --color-momo-peach-800: #751d2c;
  --color-momo-peach-900: #5d1220;
  --color-momo-peach-950: #3e0712;
  --color-fisher-king: #5e80b2;
  --color-fisher-king-50: #edf4ff;
  --color-fisher-king-100: #dbeaff;
  --color-fisher-king-200: #b9d5ff;
  --color-fisher-king-300: #9ebeed;
  --color-fisher-king-400: #7a9dcf;
  --color-fisher-king-500: #5e80b2;
  --color-fisher-king-600: #476796;
  --color-fisher-king-700: #35517b;
  --color-fisher-king-800: #263f64;
  --color-fisher-king-900: #1c3150;
  --color-fisher-king-950: #0f1e35;
  --color-glimpse-of-void: #335886;
  --color-glimpse-of-void-50: #eff6ff;
  --color-glimpse-of-void-100: #deedff;
  --color-glimpse-of-void-200: #bedaff;
  --color-glimpse-of-void-300: #a1c4f1;
  --color-glimpse-of-void-400: #7fa5d6;
  --color-glimpse-of-void-500: #638abb;
  --color-glimpse-of-void-600: #4a6f9e;
  --color-glimpse-of-void-700: #335886;
  --color-glimpse-of-void-800: #27456a;
  --color-glimpse-of-void-900: #1b3454;
  --color-glimpse-of-void-950: #0e2037;
  --color-dark-olive: #2c3e00;
  --color-dark-olive-50: #edfbda;
  --color-dark-olive-100: #e2f2cc;
  --color-dark-olive-200: #cde0b3;
  --color-dark-olive-300: #b5ca97;
  --color-dark-olive-400: #96ac73;
  --color-dark-olive-500: #7b9157;
  --color-dark-olive-600: #62773f;
  --color-dark-olive-700: #4d602c;
  --color-dark-olive-800: #3c4d1e;
  --color-dark-olive-900: #2c3e00;
  --color-dark-olive-950: #1c2708;
}