This palette draws inspiration from the nautical theme and colors in the image, combining deep blues with warm oranges and subtle neutrals for strong visual contrast and brand recognition in maritime or safety-oriented contexts.
This palette draws inspiration from the nautical theme and colors in the image, combining deep blues with warm oranges and subtle neutrals for strong visual contrast and brand recognition in maritime or safety-oriented contexts.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors feature a deep navy blue contrasting with a vibrant orange, creating a distinct and recognizable system that symbolizes trust and alertness often associated with maritime safety themes.
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 feature a deep navy blue contrasting with a vibrant orange, creating a distinct and recognizable system that symbolizes trust and alertness often associated with maritime safety themes.
RolesLogo, Btn Primary Bg, Link
Navy Blue conveys trust, stability, and professionalism, key to establishing a dependable brand identity.
#0F214715, 33, 71221, 65, 1779, 54, 0, 72RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Coral Orange adds vibrancy and energy, symbolizing alertness and warmth that complements the navy.
#FF6F3C255, 111, 6016, 100, 620, 56, 76, 0Support colors extend the main palette through lighter and muted tones that balance vibrancy with calm, reinforcing the maritime and safety context without overpowering the core colors.
RolesHeadline, Icon, Border, Divider, Outline
Slate Blue offers a softer, cooler accent that complements Navy Blue while maintaining a professional, trustworthy feel.
#8CA1B7140, 161, 183211, 23, 6323, 12, 0, 28Muted Apricot introduces a subtle warmth that balances the bright Coral Orange, enhancing usability and visual harmony.
#D98B6D217, 139, 10917, 59, 640, 36, 50, 15Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F2F4F7242, 244, 247216, 24, 962, 1, 0, 3RolesText, Btn Secondary Text
#1E2A3A30, 42, 58214, 32, 1748, 28, 0, 77Copy 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: #0F2147;
--color-coral-orange: #FF6F3C;
--color-slate-blue: #8CA1B7;
--color-muted-apricot: #D98B6D;
--color-white: #FFFFFF;
--color-snow: #F2F4F7;
--color-charcoal: #1E2A3A;
}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: #0F2147;
--role-btn-primary-bg: #0F2147;
--role-link: #0F2147;
--role-btn-secondary-bg: #FF6F3C;
--role-btn-outlined-border: #FF6F3C;
--role-btn-outlined-text: #FF6F3C;
--role-headline: #8CA1B7;
--role-icon: #8CA1B7;
--role-border: #8CA1B7;
--role-divider: #8CA1B7;
--role-outline: #8CA1B7;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #F2F4F7;
--role-text: #1E2A3A;
--role-btn-secondary-text: #1E2A3A;
}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": "#0F2147",
"coral-orange": "#FF6F3C",
"slate-blue": "#8CA1B7",
"muted-apricot": "#D98B6D",
"white": "#FFFFFF",
"snow": "#F2F4F7",
"charcoal": "#1E2A3A"
}