This palette draws inspiration from the serene seascape and lighthouse image, combining deep navy blues, lighthouse white, and sunny yellow accents to evoke safety, clarity, and optimism. The palette uses strong contrasts and harmonious hues to ensure visual recognition and legibility across digital interfaces and branding materials.
This palette draws inspiration from the serene seascape and lighthouse image, combining deep navy blues, lighthouse white, and sunny yellow accents to evoke safety, clarity, and optimism. The palette uses strong contrasts and harmonious hues to ensure visual recognition and legibility across digital interfaces and branding materials.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors—deep navy blue, lighthouse white, and sunny yellow—work together as a recognizable triadic system that balances depth, brightness, and energy, making it ideal for creative branding with a coastal influence.
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—deep navy blue, lighthouse white, and sunny yellow—work together as a recognizable triadic system that balances depth, brightness, and energy, making it ideal for creative branding with a coastal influence.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text, Headline
Navy Blue conveys trust, stability, and depth, anchoring the palette with a strong and calming presence.
#1B2A4927, 42, 73220, 46, 2063, 42, 0, 71RolesBtn Secondary Bg
Sunshine Yellow injects warmth and optimism, energizing the palette with vivid contrast and positivity.
#FFDD00255, 221, 052, 100, 500, 13, 100, 0RolesBg Light, Bg Dark
Lighthouse White offers clarity and brightness, enhancing contrast and representing safety and guiding light.
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0The support colors subtly extend the main palette with muted blues and grays to balance warmth and provide versatile accents for UI elements without competing with the primary colors.
RolesIcon, Border, Divider, Outline
Slate Blue softens the palette with a cooler tone, complementing Navy Blue while keeping visual harmony.
#7289AB114, 137, 171216, 25, 5633, 20, 0, 33Cool Gray provides a neutral balance that calms and balances the vividness of the main colors, useful for subtle accents.
#A0A8B9160, 168, 185221, 15, 6814, 9, 0, 27Utility colors for backgrounds, text, borders, and balance.
RolesBtn Primary Text
#F5F7FA245, 247, 250216, 33, 972, 1, 0, 2RolesText, Btn Secondary Text
#222A3B34, 42, 59221, 27, 1842, 29, 0, 77#E9ECEF233, 236, 239210, 16, 933, 1, 0, 6Copy 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: #1B2A49;
--color-sunshine-yellow: #FFDD00;
--color-lighthouse-white: #FFFFFF;
--color-slate-blue: #7289AB;
--color-cool-gray: #A0A8B9;
--color-ivory-white: #F5F7FA;
--color-charcoal-black: #222A3B;
--color-light-mist: #E9ECEF;
}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-link: #1B2A49;
--role-btn-primary-bg: #1B2A49;
--role-btn-outlined-border: #1B2A49;
--role-btn-outlined-text: #1B2A49;
--role-headline: #1B2A49;
--role-btn-secondary-bg: #FFDD00;
--role-bg-light: #FFFFFF;
--role-bg-dark: #FFFFFF;
--role-icon: #7289AB;
--role-border: #7289AB;
--role-divider: #7289AB;
--role-outline: #7289AB;
--role-btn-primary-text: #F5F7FA;
--role-text: #222A3B;
--role-btn-secondary-text: #222A3B;
}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": "#1B2A49",
"sunshine-yellow": "#FFDD00",
"lighthouse-white": "#FFFFFF",
"slate-blue": "#7289AB",
"cool-gray": "#A0A8B9",
"ivory-white": "#F5F7FA",
"charcoal-black": "#222A3B",
"light-mist": "#E9ECEF"
}