Color collection
Luxury Emerald Color Palettes
Emerald palettes for premium finance, hospitality, wellness, and polished ecommerce experiences.
LuxuryGreenPremium
Best for: finance brands, hotels, and elevated ecommerceExport: CSS, Tailwind, JSON, SVGPreview: dashboard, landing, mobile UI
Luxury Emerald 5Luxury / Green / PremiumQuality 98Primary
#3169D8Accent#CD51D6Surface#EBEDF4Text#121621Support#CE829CLuxury Emerald 4Luxury / Green / PremiumQuality 97Primary#3198D8Accent#8F51D6Surface#EBF0F4Text#121A21Support#CE82B1Luxury Emerald 6Luxury / Green / PremiumQuality 96Primary#313AD8Accent#D6D051Surface#ECEBF4Text#131221Support#CE8286Luxury Emerald 8Luxury / Green / PremiumQuality 96Primary#8731D8Accent#D67E51Surface#F1EBF4Text#1B1221Support#CEAA82Luxury Emerald 7Luxury / Green / PremiumQuality 95Primary#5831D8Accent#D65163Surface#EFEBF4Text#171221Support#CE9482Luxury Emerald 9Luxury / Green / PremiumQuality 95Primary#B731D8Accent#D6BC51Surface#F3EBF4Text#1F1221Support#CEBF82How to use these palettes
Start with the primary and surface colors, then test text contrast before exporting. These palettes are most useful for finance brands, hotels, and elevated ecommerce. Emerald works best with warm neutrals and restrained gold or cream accents.
Luxury palettes keep metallic or deep tones as accents while preserving a clear text and surface pair for editorial layouts.
UI previewPrimary
Card
Button
Accent
CSS Variables
:root {
--primary: #3169D8;
--accent: #CD51D6;
--surface: #EBEDF4;
--text: #121621;
--support: #CE829C;
}Text / Surface contrast: 15.44:1
FAQ
Where should I use luxury emerald color palettes?
These palettes are designed for finance brands, hotels, and elevated ecommerce.
Can I copy these colors into a design system?
Yes. Each palette includes clear interface roles such as Primary, Accent, Surface, Text, and Support.
How do I avoid low contrast?
Emerald works best with warm neutrals and restrained gold or cream accents.