This color palette is inspired by the vibrant and bold logo colors featuring rich navy blue and bright orange with supporting warm beige and subtle gray. The palette creates a strong, professional, and energetic brand presence, balancing the boldness of orange with the stability of dark blue and the calmness of neutrals.
This color palette is inspired by the vibrant and bold logo colors featuring rich navy blue and bright orange with supporting warm beige and subtle gray. The palette creates a strong, professional, and energetic brand presence, balancing the boldness of orange with the stability of dark blue and the calmness of neutrals.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine a vibrant orange and a deep navy blue, forming a high-contrast complementary relationship that grabs attention and conveys energy with stability.
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 vibrant orange and a deep navy blue, forming a high-contrast complementary relationship that grabs attention and conveys energy with stability.
RolesLogo, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Navy blue brings depth, trust, and professionalism to the brand, serving as a strong anchor color.
#22226834, 34, 104240, 51, 2767, 67, 0, 59RolesLink, Btn Secondary Bg, Headline
Pumpkin orange delivers energy, excitement, and visibility, making interactive elements stand out.
#FF6900255, 105, 025, 100, 500, 59, 100, 0The support colors extend the palette with warm beige and subtle gray, softening the contrast and providing visual balance without competing with the main colors.
RolesIcon, Border, Divider, Outline
Warm beige adds warmth and approachability, balancing the palette's intensity subtly.
#E1D6BF225, 214, 19141, 36, 820, 5, 15, 12Dusty gray offers a neutral anchor for interface elements, supporting hierarchy without overwhelming.
#6C6C7C108, 108, 124240, 7, 4513, 13, 0, 51Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F5F4F6245, 244, 246270, 10, 960, 1, 0, 4RolesBg Dark, Text, Btn Secondary Text
#1A1A2E26, 26, 46240, 28, 1443, 43, 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-navy-blue: #222268;
--color-pumpkin-orange: #FF6900;
--color-warm-beige: #E1D6BF;
--color-dusty-gray: #6C6C7C;
--color-pure-white: #FFFFFF;
--color-light-gray: #F5F4F6;
--color-dark-charcoal: #1A1A2E;
}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: #222268;
--role-btn-primary-bg: #222268;
--role-btn-outlined-border: #222268;
--role-btn-outlined-text: #222268;
--role-link: #FF6900;
--role-btn-secondary-bg: #FF6900;
--role-headline: #FF6900;
--role-icon: #E1D6BF;
--role-border: #E1D6BF;
--role-divider: #E1D6BF;
--role-outline: #E1D6BF;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #1A1A2E;
--role-text: #1A1A2E;
--role-btn-secondary-text: #1A1A2E;
}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.{
"navy-blue": "#222268",
"pumpkin-orange": "#FF6900",
"warm-beige": "#E1D6BF",
"dusty-gray": "#6C6C7C",
"pure-white": "#FFFFFF",
"light-gray": "#F5F4F6",
"dark-charcoal": "#1A1A2E"
}