This palette keeps the brand anchored by a stronger, slightly more electric navy paired with vivid coral, then softens the system with sand and pale apricot so it stays polished and easy to use across UI and editorial layouts. The result is bold, readable, and flexible, with clear hierarchy and enough restraint for everyday digital work.
This palette keeps the brand anchored by a stronger, slightly more electric navy paired with vivid coral, then softens the system with sand and pale apricot so it stays polished and easy to use across UI and editorial layouts. The result is bold, readable, and flexible, with clear hierarchy and enough restraint for everyday digital work.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors pair a deep navy with a vivid coral to create a strong, immediately readable brand contrast. Their opposing warmth and coolness give the system clear energy for logos, links, and action states without feeling chaotic.
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 pair a deep navy with a vivid coral to create a strong, immediately readable brand contrast. Their opposing warmth and coolness give the system clear energy for logos, links, and action states without feeling chaotic.
RolesLogo, Btn Primary Bg, Headline, Btn Outlined Text
Navy Blue anchors the identity with depth and stability, making it a strong choice for the logo, headlines, and primary actions.
#0000930, 0, 147240, 100, 29100, 100, 0, 42RolesLink, Btn Secondary Bg
Coral brings warmth and momentum, giving links and secondary actions a vivid accent that stays energetic and approachable.
#FF7A1A255, 122, 2625, 100, 550, 52, 90, 0The support colors extend the palette with soft, restrained tones that improve structure and keep the bright main colors in focus. They add quiet contrast for outlines and interface boundaries without competing with the core brand relationship.
RolesBtn Outlined Border, Icon
Sand adds a warm, subdued edge that keeps outlined controls visible while staying softer than the main colors.
#C6B8A6198, 184, 16634, 22, 710, 7, 16, 22RolesBorder, Divider, Outline
Pale Apricot creates a light structural layer that supports spacing, icons, and dividers without drawing attention away from the brand colors.
#FEE7C8254, 231, 20034, 96, 890, 9, 21, 0Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F6F7F9246, 247, 249220, 20, 971, 1, 0, 2RolesBg Dark, Text, Btn Secondary Text
#11111117, 17, 170, 0, 70, 0, 0, 93Copy 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: #000093;
--color-coral: #FF7A1A;
--color-sand: #C6B8A6;
--color-pale-apricot: #FEE7C8;
--color-white: #FFFFFF;
--color-frosted-cloud: #F6F7F9;
--color-charcoal: #111111;
}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: #000093;
--role-btn-primary-bg: #000093;
--role-headline: #000093;
--role-btn-outlined-text: #000093;
--role-link: #FF7A1A;
--role-btn-secondary-bg: #FF7A1A;
--role-btn-outlined-border: #C6B8A6;
--role-icon: #C6B8A6;
--role-border: #FEE7C8;
--role-divider: #FEE7C8;
--role-outline: #FEE7C8;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #111111;
--role-text: #111111;
--role-btn-secondary-text: #111111;
}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": "#000093",
"coral": "#FF7A1A",
"sand": "#C6B8A6",
"pale-apricot": "#FEE7C8",
"white": "#FFFFFF",
"frosted-cloud": "#F6F7F9",
"charcoal": "#111111"
}