styleColor Scheme

Japanese Zen

A serene Japanese-inspired palette with muted tones and natural balance. Reflects the wabi-sabi philosophy of imperfect beauty.

#fafafa
#ffffff
#475569
#94a3b8
#ef4444

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 600

Hex

#475569

Tailwind

text-slate-600

Role

secondary

Name

Slate 400

Hex

#94a3b8

Tailwind

text-slate-400

Role

accent

Name

Red 500

Hex

#ef4444

Tailwind

bg-red-500

Live Preview

Welcome Back

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

Design Rationale

Muted grays create contemplative space inspired by stone gardens and ink wash. A single red accent references traditional Japanese torii gates and seal stamps.

Use Cases

Tea ceremony brandsMeditation appsJapanese restaurants

CSS Variables

CSS
:root {
  --background: #fafafa;
  --surface: #ffffff;
  --primary: #475569;
  --secondary: #94a3b8;
  --accent: #ef4444;
}

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'japanese-zen': {
  'background': '#fafafa',  // bg-zinc-50
  'surface': '#ffffff',  // bg-white
  'primary': '#475569',  // text-slate-600
  'secondary': '#94a3b8',  // text-slate-400
  'accent': '#ef4444',  // bg-red-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 Japanese design use color?
Japanese design typically uses restrained neutral tones with one deliberate accent color, reflecting the principle of ma (negative space).