frontend-ui-design-morandi-color-scheme

Start with 2-3 near-white and light gray backgrounds, add mid-grays for borders and secondary text, then introduce a cool primary color and a warm accent. Finish with a dark blue-gray anchor for titles and key numbers.

A Morandi palette uses low-saturation, grayed colors inspired by Giorgio Morandi's paintings. It creates calm, unified interfaces by muting all hues with gray and building hierarchy through lightness rather than hue contrast.

Assign near-white grays to background and surface tokens, mid-grays to borders, dark charcoal to text, muted blue to primary, and soft orange or sage green to accents. The Skill provides a ready :root CSS variable block with these mappings.

Avoid muted palettes when the product needs high-energy visuals, strong promotional impact, or vivid brand expression, such as gaming or youth marketing sites. Morandi schemes suit brand and content products prioritizing readability and calm atmosphere.

Use dark charcoal or deep blue-gray anchors for titles and key values, and reserve mid-grays only for secondary text. Verify contrast between text and background, and keep warm accents limited to small highlight areas.