moodColor Scheme

Romantic Soft

A soft romantic palette with blush pinks and dreamy lavender tones. Creates an atmosphere of tenderness and gentle affection.

#ffffff
#fafafa
#fb7185
#8b5cf6
#ec4899

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

Rose 400

Hex

#fb7185

Tailwind

text-rose-400

Role

secondary

Name

Violet 500

Hex

#8b5cf6

Tailwind

text-violet-500

Role

accent

Name

Pink 500

Hex

#ec4899

Tailwind

bg-pink-500

Live Preview

Welcome Back

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

Design Rationale

Rose and pink tones universally signify love and romantic affection. Violet adds a dreamy, enchanting quality that deepens the emotional resonance.

Use Cases

Dating appsFlower delivery servicesValentine campaigns

CSS Variables

CSS
:root {
  --background: #ffffff;
  --surface: #fafafa;
  --primary: #fb7185;
  --secondary: #8b5cf6;
  --accent: #ec4899;
}

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'romantic-soft': {
  'background': '#ffffff',  // bg-white
  'surface': '#fafafa',  // bg-zinc-50
  'primary': '#fb7185',  // text-rose-400
  'secondary': '#8b5cf6',  // text-violet-500
  '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

Why are pinks and roses associated with romance?
Pink tones are culturally linked to love and tenderness, while softer shades add the gentle, dreamlike quality of romantic feeling.