This palette blends deep navy, warm beige, and fiery burnt orange to evoke strength, reliability, and energy inspired by the high-contrast black and white image with bold numeric typography. Muted steel blue and sandy taupe support the main colors, offering subtle harmony without overpowering, while a set of neutral shades balances the composition for versatile usage.
This palette blends deep navy, warm beige, and fiery burnt orange to evoke strength, reliability, and energy inspired by the high-contrast black and white image with bold numeric typography. Muted steel blue and sandy taupe support the main colors, offering subtle harmony without overpowering, while a set of neutral shades balances the composition for versatile usage.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The primary colors—deep navy, warm beige, and burnt orange—work together to create a balanced triadic scheme that offers visual interest and energy while maintaining professional reliability.
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 primary colors—deep navy, warm beige, and burnt orange—work together to create a balanced triadic scheme that offers visual interest and energy while maintaining professional reliability.
RolesLogo, Btn Primary Bg, Link
Deep Navy instills trust and professionalism while serving as an authoritative foundation for the brand.
#1B2A4927, 42, 73220, 46, 2063, 42, 0, 71RolesBtn Secondary Bg, Headline
Warm Beige softens the palette with warmth and approachability, complementing the strong navy base.
#D9C7B2217, 199, 17832, 34, 770, 8, 18, 15RolesBtn Outlined Border, Btn Outlined Text
Burnt Orange injects energy and dynamic contrast, enhancing call-to-action elements and accentuating key points.
#D95F26217, 95, 3819, 70, 500, 56, 82, 15Muted steel blue and sandy taupe extend the palette by providing subtle, cool and earthy accents that balance and support the strong main colors without drawing focus away from them.
RolesIcon, Border, Divider, Outline
Steel Blue complements Deep Navy by adding a slightly softer yet related cool tone for delicate interface elements.
#667D9A102, 125, 154213, 20, 5034, 19, 0, 40Sandy Taupe balances Warm Beige and Burnt Orange with an understated earthy tone that stabilizes the palette visually.
#A89984168, 153, 13235, 17, 590, 9, 21, 34Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F1F0EB241, 240, 23550, 18, 930, 0, 2, 5RolesText, Btn Secondary Text
#2B2B2B43, 43, 430, 0, 170, 0, 0, 83Copy 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-deep-navy: #1B2A49;
--color-warm-beige: #D9C7B2;
--color-burnt-orange: #D95F26;
--color-steel-blue: #667D9A;
--color-sandy-taupe: #A89984;
--color-ivory-white: #FFFFFF;
--color-light-ivory: #F1F0EB;
--color-charcoal: #2B2B2B;
}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: #1B2A49;
--role-btn-primary-bg: #1B2A49;
--role-link: #1B2A49;
--role-btn-secondary-bg: #D9C7B2;
--role-headline: #D9C7B2;
--role-btn-outlined-border: #D95F26;
--role-btn-outlined-text: #D95F26;
--role-icon: #667D9A;
--role-border: #667D9A;
--role-divider: #667D9A;
--role-outline: #667D9A;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #F1F0EB;
--role-text: #2B2B2B;
--role-btn-secondary-text: #2B2B2B;
}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.{
"deep-navy": "#1B2A49",
"warm-beige": "#D9C7B2",
"burnt-orange": "#D95F26",
"steel-blue": "#667D9A",
"sandy-taupe": "#A89984",
"ivory-white": "#FFFFFF",
"light-ivory": "#F1F0EB",
"charcoal": "#2B2B2B"
}