moodColor Scheme

Peaceful Zen

A zen-inspired palette promoting inner peace and mindful presence. Minimal color with maximum tranquility for meditative spaces.

#fafafa
#ffffff
#64748b
#94a3b8
#10b981

Color Breakdown

Role

background

Name

Zinc 50

Hex

#fafafa

Tailwind

bg-zinc-50

Role

surface

Name

White

Hex

#ffffff

Tailwind

bg-white

Role

primary

Name

Slate 500

Hex

#64748b

Tailwind

text-slate-500

Role

secondary

Name

Slate 400

Hex

#94a3b8

Tailwind

text-slate-400

Role

accent

Name

Emerald 500

Hex

#10b981

Tailwind

bg-emerald-500

Live Preview

Welcome Back

This is a live preview of the Peaceful Zen color scheme applied to a sample card component. See how the colors work together in a realistic UI context.

Design Rationale

Soft grays create the visual silence needed for meditative contemplation. A single emerald accent represents the living presence of nature and growth.

Use Cases

Yoga studio websitesMindfulness appsRetreat center sites

CSS Variables

CSS
:root {
  --background: #fafafa;
  --surface: #ffffff;
  --primary: #64748b;
  --secondary: #94a3b8;
  --accent: #10b981;
}

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'peaceful-zen': {
  'background': '#fafafa',  // bg-zinc-50
  'surface': '#ffffff',  // bg-white
  'primary': '#64748b',  // text-slate-500
  'secondary': '#94a3b8',  // text-slate-400
  'accent': '#10b981',  // bg-emerald-500
        },
      },
    },
  },
};

Related Color Schemes

Build with This Scheme

Use our palette generator to customize and extend this color scheme for your project.

Open Palette Generator

Frequently Asked Questions

How does minimal color create peace?
Reducing color stimulation lowers visual noise and cognitive load, allowing the mind to settle into a calm, focused state.