Pastel Vibrant
A vibrant pastel palette with punchy saturated pastels and playful energy. More dynamic than traditional pastels while staying friendly.
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
CSS Variables
:root {
--background: #ffffff;
--surface: #fafafa;
--primary: #a855f7;
--secondary: #0ea5e9;
--accent: #f43f5e;
}Tailwind Config
// 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
Gaming Vibrant
A vibrant gaming palette with electric purples and neon green accents. Built for immersive gaming platforms and esports content.
Pet Care Playful
A playful pet care palette with warm oranges and friendly greens. Creates a joyful, approachable vibe for animal lovers.
Minimalist Light
A clean minimalist palette with abundant white space and subtle gray accents. Less is more with this restrained, elegant approach.
Minimalist Dark
A dark minimalist palette with refined grays and subtle accent color. Achieves elegance through restraint on a dark canvas.
Brutalist Raw
A raw brutalist palette with stark black-and-white contrast and no softening. Embraces imperfection and confrontational design.
Brutalist Colorful
A colorful brutalist palette that clashes bold hues intentionally. Breaks design rules with unapologetic vibrancy and contrast.
Build with This Scheme
Use our palette generator to customize and extend this color scheme for your project.
Open Palette Generator