styleColor Scheme

Pastel Vibrant

A vibrant pastel palette with punchy saturated pastels and playful energy. More dynamic than traditional pastels while staying friendly.

#ffffff
#fafafa
#a855f7
#0ea5e9
#f43f5e

Color Breakdown

Role

background

Name

White

Hex

#ffffff

Tailwind

bg-white

Role

surface

Name

Zinc 50

Hex

#fafafa

Tailwind

bg-zinc-50

Role

primary

Name

Purple 500

Hex

#a855f7

Tailwind

text-purple-500

Role

secondary

Name

Sky 500

Hex

#0ea5e9

Tailwind

text-sky-500

Role

accent

Name

Rose 500

Hex

#f43f5e

Tailwind

bg-rose-500

Live Preview

Welcome Back

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

Design Rationale

Purple and sky blue create a playful yet modern combination. Rose accents add pop and energy for interactive elements and highlights.

Use Cases

Social media appsCreative tool interfacesYouth-oriented brands

CSS Variables

CSS
:root {
  --background: #ffffff;
  --surface: #fafafa;
  --primary: #a855f7;
  --secondary: #0ea5e9;
  --accent: #f43f5e;
}

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'pastel-vibrant': {
  'background': '#ffffff',  // bg-white
  'surface': '#fafafa',  // bg-zinc-50
  'primary': '#a855f7',  // text-purple-500
  'secondary': '#0ea5e9',  // text-sky-500
  'accent': '#f43f5e',  // bg-rose-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 do vibrant pastels differ from soft pastels?
Vibrant pastels have higher saturation, creating more energy and visual impact while maintaining the friendly pastel character.