styleColor Scheme

Pastel Soft

A soft pastel palette with gentle, desaturated hues and light backgrounds. Creates a calm, airy, and approachable aesthetic.

#ffffff
#f8fafc
#8b5cf6
#94a3b8
#ec4899

Color Breakdown

Role

background

Name

White

Hex

#ffffff

Tailwind

bg-white

Role

surface

Name

Slate 50

Hex

#f8fafc

Tailwind

bg-slate-50

Role

primary

Name

Violet 500

Hex

#8b5cf6

Tailwind

text-violet-500

Role

secondary

Name

Slate 400

Hex

#94a3b8

Tailwind

text-slate-400

Role

accent

Name

Pink 500

Hex

#ec4899

Tailwind

bg-pink-500

Live Preview

Welcome Back

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

Design Rationale

Soft violet and pink create a gentle, non-threatening visual experience. Light backgrounds keep the overall feel airy and spacious.

Use Cases

Lifestyle blogsWellness appsChildren product sites

CSS Variables

CSS
:root {
  --background: #ffffff;
  --surface: #f8fafc;
  --primary: #8b5cf6;
  --secondary: #94a3b8;
  --accent: #ec4899;
}

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'pastel-soft': {
  'background': '#ffffff',  // bg-white
  'surface': '#f8fafc',  // bg-slate-50
  'primary': '#8b5cf6',  // text-violet-500
  'secondary': '#94a3b8',  // text-slate-400
  'accent': '#ec4899',  // bg-pink-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

When should you use pastel colors?
Pastels work well for brands targeting calm, friendly, or nurturing experiences where aggressive colors would feel inappropriate.