Monet Magic to Muddy Olive color palette

BBAFC4Monet Magic 32493DPine Needle 93859DHatoba Pigeon ECDBDDDiscrete Pink 456349Muddy Olive

About this palette

Monet Magic to Muddy Olive is a 5-color muted, cool palette: #BBAFC4 (Monet Magic), #32493D (Pine Needle), #93859D (Hatoba Pigeon), #ECDBDD (Discrete Pink), #456349 (Muddy Olive). It mixes gray, green, purple tones and feels cool overall. The strongest text pairing is #32493D on #ECDBDD with a contrast ratio of 7.30:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Monet Magic	rgb(187, 175, 196)	hsl(274, 15%, 73%)
Pine Needle	rgb(50, 73, 61)	hsl(149, 19%, 24%)
Hatoba Pigeon	rgb(147, 133, 157)	hsl(275, 11%, 57%)
Discrete Pink	rgb(236, 219, 221)	hsl(353, 31%, 89%)
Muddy Olive	rgb(69, 99, 73)	hsl(128, 18%, 33%)

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.30:1 Very good#32493D on #ECDBDD
Aa7.30:1 Very good#ECDBDD on #32493D
Aa5.02:1 Good#ECDBDD on #456349
Aa5.02:1 Good#456349 on #ECDBDD
Aa4.66:1 Good#BBAFC4 on #32493D
Aa4.66:1 Good#32493D on #BBAFC4
Aa3.20:1 Poor#BBAFC4 on #456349
Aa3.20:1 Poor#456349 on #BBAFC4

Color blindness preview

CSS variables

/* Monet Magic to Muddy Olive — https://swatchly.xyz/palette/bbafc4-32493d-93859d-ecdbdd-456349 */
:root {
  --monet-magic: #bbafc4;
  --pine-needle: #32493d;
  --hatoba-pigeon: #93859d;
  --discrete-pink: #ecdbdd;
  --muddy-olive: #456349;
}

Tailwind CSS v4

/* Monet Magic to Muddy Olive — https://swatchly.xyz/palette/bbafc4-32493d-93859d-ecdbdd-456349 */
@theme {
  --color-monet-magic: #bbafc4;
  --color-monet-magic-50: #f3ebf8;
  --color-monet-magic-100: #e7dfee;
  --color-monet-magic-200: #d2c8da;
  --color-monet-magic-300: #bbafc4;
  --color-monet-magic-400: #9e92a6;
  --color-monet-magic-500: #85798d;
  --color-monet-magic-600: #6c6174;
  --color-monet-magic-700: #574d5e;
  --color-monet-magic-800: #453d4b;
  --color-monet-magic-900: #37303c;
  --color-monet-magic-950: #221d26;
  --color-pine-needle: #32493d;
  --color-pine-needle-50: #eaf9f1;
  --color-pine-needle-100: #dff0e7;
  --color-pine-needle-200: #c9ddd2;
  --color-pine-needle-300: #b1c7bb;
  --color-pine-needle-400: #90a99b;
  --color-pine-needle-500: #748d80;
  --color-pine-needle-600: #5b7366;
  --color-pine-needle-700: #465c50;
  --color-pine-needle-800: #32493d;
  --color-pine-needle-900: #27382f;
  --color-pine-needle-950: #17231d;
  --color-hatoba-pigeon: #93859d;
  --color-hatoba-pigeon-50: #faf3ff;
  --color-hatoba-pigeon-100: #f2e9f9;
  --color-hatoba-pigeon-200: #e0d5e8;
  --color-hatoba-pigeon-300: #cbbfd4;
  --color-hatoba-pigeon-400: #ada0b7;
  --color-hatoba-pigeon-500: #93859d;
  --color-hatoba-pigeon-600: #776a81;
  --color-hatoba-pigeon-700: #5f5368;
  --color-hatoba-pigeon-800: #4a4052;
  --color-hatoba-pigeon-900: #39303f;
  --color-hatoba-pigeon-950: #231d28;
  --color-discrete-pink: #ecdbdd;
  --color-discrete-pink-50: #fff9fa;
  --color-discrete-pink-100: #f9eff1;
  --color-discrete-pink-200: #ecdbdd;
  --color-discrete-pink-300: #d2c4c5;
  --color-discrete-pink-400: #b2a2a4;
  --color-discrete-pink-500: #958687;
  --color-discrete-pink-600: #796a6c;
  --color-discrete-pink-700: #605354;
  --color-discrete-pink-800: #4a3f40;
  --color-discrete-pink-900: #3a3031;
  --color-discrete-pink-950: #241d1e;
  --color-muddy-olive: #456349;
  --color-muddy-olive-50: #e8fbea;
  --color-muddy-olive-100: #ddf2df;
  --color-muddy-olive-200: #c7e0ca;
  --color-muddy-olive-300: #afccb2;
  --color-muddy-olive-400: #8fae92;
  --color-muddy-olive-500: #749377;
  --color-muddy-olive-600: #5b795f;
  --color-muddy-olive-700: #456349;
  --color-muddy-olive-800: #354e38;
  --color-muddy-olive-900: #273c2a;
  --color-muddy-olive-950: #162619;
}