This palette channels the warm, rich, and inviting atmosphere of the image with deep plums, golden yellows, and complementary muted greens, balanced by soft neutrals for versatility and readability. It captures the nighttime hospitality feel with cozy and sophisticated contrasts.
This palette channels the warm, rich, and inviting atmosphere of the image with deep plums, golden yellows, and complementary muted greens, balanced by soft neutrals for versatility and readability. It captures the nighttime hospitality feel with cozy and sophisticated contrasts.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine a rich Plum as the primary brand foundation with a warm Goldenrod and a muted Olive as complementary accents to create a balanced, cozy, and elegant palette.
Clear roles create a consistent brand experience.Assign existing palette colors to brand, typography, and interface roles.
A compact view of the brand, support, and neutral colors that make up this system.
The main colors combine a rich Plum as the primary brand foundation with a warm Goldenrod and a muted Olive as complementary accents to create a balanced, cozy, and elegant palette.
RolesLogo, Link, Btn Primary Bg
Plum provides a deep, elegant foundation that feels luxurious and comforting, anchoring the palette.
#5B214A91, 33, 74318, 47, 240, 64, 19, 64RolesBtn Secondary Bg, Headline
Goldenrod adds warmth and vibrancy that conveys friendliness and hospitality, contrasting well with Plum.
#D4A72C212, 167, 4444, 66, 500, 21, 79, 17RolesBtn Outlined Border, Btn Outlined Text
Olive introduces a natural muted green that balances the richness of Plum and the brightness of Goldenrod, providing subtle harmony.
#75855C117, 133, 9283, 18, 4412, 0, 31, 48The accent colors extend the main palette with gentle rose and muted brown tones, enhancing warmth and depth without overpowering the main colors.
RolesIcon, Border, Divider, Outline
Rose Dust offers a soft, muted pinkish tone that gently supports Plum without competing for attention.
#B48E94180, 142, 148351, 20, 630, 21, 18, 29Muted Brown adds grounded earthy undertones that complement both warm and cool colors, reinforcing the cozy feel.
#6A4F3D106, 79, 6124, 27, 330, 25, 42, 58Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F2EFEA242, 239, 23438, 24, 930, 1, 3, 5RolesText, Btn Secondary Text
#2E2E2E46, 46, 460, 0, 180, 0, 0, 82Copy palette values for design systems, websites, and client handoff.
Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.
Use when: you need the actual colors.:root {
--color-plum: #5B214A;
--color-goldenrod: #D4A72C;
--color-olive: #75855C;
--color-rose-dust: #B48E94;
--color-muted-brown: #6A4F3D;
--color-pure-white: #FFFFFF;
--color-ivory: #F2EFEA;
--color-charcoal: #2E2E2E;
}Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.
Use when: you need UI roles, not just swatches.:root {
--role-logo: #5B214A;
--role-link: #5B214A;
--role-btn-primary-bg: #5B214A;
--role-btn-secondary-bg: #D4A72C;
--role-headline: #D4A72C;
--role-btn-outlined-border: #75855C;
--role-btn-outlined-text: #75855C;
--role-icon: #B48E94;
--role-border: #B48E94;
--role-divider: #B48E94;
--role-outline: #B48E94;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #F2EFEA;
--role-text: #2E2E2E;
--role-btn-secondary-text: #2E2E2E;
}Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.
Use when: a developer or app needs data.{
"plum": "#5B214A",
"goldenrod": "#D4A72C",
"olive": "#75855C",
"rose-dust": "#B48E94",
"muted-brown": "#6A4F3D",
"pure-white": "#FFFFFF",
"ivory": "#F2EFEA",
"charcoal": "#2E2E2E"
}