Royal Elegant
A regal palette with deep purples and gold accents befitting royalty. Commands respect and communicates timeless elegance.
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 500
Hex
#64748b
Tailwind
text-slate-500
Role
accent
Name
Amber 300
Hex
#fcd34d
Tailwind
bg-amber-300
Live Preview
Welcome Back
This is a live preview of the Royal Elegant color scheme applied to a sample card component. See how the colors work together in a realistic UI context.
Design Rationale
“Violet has been the color of royalty since ancient times due to rare purple dyes. Gold accents add the crown-jewel finishing touch of regal authority.
Use Cases
CSS Variables
:root {
--background: #ffffff;
--surface: #f8fafc;
--primary: #8b5cf6;
--secondary: #64748b;
--accent: #fcd34d;
}Tailwind Config
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'royal-elegant': {
'background': '#ffffff', // bg-white
'surface': '#f8fafc', // bg-slate-50
'primary': '#8b5cf6', // text-violet-500
'secondary': '#64748b', // text-slate-500
'accent': '#fcd34d', // bg-amber-300
},
},
},
},
};Related Color Schemes
Fashion Elegant
An elegant fashion palette with refined neutrals and rose gold touches. Perfect for high-end fashion brands and editorial layouts.
Minimalist Dark
A dark minimalist palette with refined grays and subtle accent color. Achieves elegance through restraint on a dark canvas.
Calm Serene
A serene and calming palette with soft blues and muted backgrounds. Designed to reduce visual stress and promote tranquility.
Energetic Bold
A bold and energetic palette with vivid reds and bright accents. Designed to excite, motivate, and drive immediate action.
Professional Corporate
A polished corporate palette with conservative blues and structured grays. Conveys reliability, competence, and business credibility.
Playful Fun
A fun and playful palette bursting with cheerful colors. Designed to make users smile and create a lighthearted experience.
Build with This Scheme
Use our palette generator to customize and extend this color scheme for your project.
Open Palette Generator