This color palette is inspired by the image's muted and sophisticated tones, combining rich burgundy, deep navy, and warm mustard with supporting dusty teal and steel gray. The neutrals provide a balanced backdrop with pure white, soft off-white, and charcoal black, creating a versatile yet elegant color system suitable for distinctive branding and user interfaces.
This color palette is inspired by the image's muted and sophisticated tones, combining rich burgundy, deep navy, and warm mustard with supporting dusty teal and steel gray. The neutrals provide a balanced backdrop with pure white, soft off-white, and charcoal black, creating a versatile yet elegant color system suitable for distinctive branding and user interfaces.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors blend a warm burgundy with a complementary navy and a warm mustard accent, creating a balanced and recognizable system that is both rich and approachable.
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 blend a warm burgundy with a complementary navy and a warm mustard accent, creating a balanced and recognizable system that is both rich and approachable.
RolesLogo, Btn Primary Bg, Btn Outlined Border
Burgundy brings a sense of richness, warmth, and sophistication to the brand identity.
#7C2836124, 40, 54350, 51, 320, 68, 56, 51RolesLink, Btn Secondary Bg, Headline
Navy offers depth, trustworthiness, and professionalism, contrasting well with burgundy.
#31416249, 65, 98220, 33, 2950, 34, 0, 62RolesBtn Outlined Text
Mustard provides a warm accent that adds energy and distinctiveness without overwhelming.
#D6A142214, 161, 6639, 64, 550, 25, 69, 16The support colors extend the main palette with muted teal and steel gray, which balance and complement the vibrant main hues while remaining visually subordinate.
RolesIcon, Border, Divider, Outline
Dusty Teal complements the warm burgundy and mustard by introducing a calming, cool tone that supports visual balance.
#557D7E85, 125, 126181, 19, 4133, 1, 0, 51Steel Gray adds a neutral, urban sophistication that tempers the brightness of mustard and softens the palette overall.
#7A828D122, 130, 141215, 8, 5213, 8, 0, 45Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F5F4F2245, 244, 24240, 13, 950, 0, 1, 4RolesText
#1E1E1E30, 30, 300, 0, 120, 0, 0, 88Copy 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-burgundy: #7C2836;
--color-navy: #314162;
--color-mustard: #D6A142;
--color-dusty-teal: #557D7E;
--color-steel-gray: #7A828D;
--color-white: #FFFFFF;
--color-off-white: #F5F4F2;
--color-charcoal-black: #1E1E1E;
}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: #7C2836;
--role-btn-primary-bg: #7C2836;
--role-btn-outlined-border: #7C2836;
--role-link: #314162;
--role-btn-secondary-bg: #314162;
--role-headline: #314162;
--role-btn-outlined-text: #D6A142;
--role-icon: #557D7E;
--role-border: #557D7E;
--role-divider: #557D7E;
--role-outline: #557D7E;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #F5F4F2;
--role-text: #1E1E1E;
}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.{
"burgundy": "#7C2836",
"navy": "#314162",
"mustard": "#D6A142",
"dusty-teal": "#557D7E",
"steel-gray": "#7A828D",
"white": "#FFFFFF",
"off-white": "#F5F4F2",
"charcoal-black": "#1E1E1E"
}