Navy Blue#1B2A49
Sunshine Yellow#FFDD00
Lighthouse White#FFFFFF
Slate Blue#7289AB
Cool Gray#A0A8B9
Palette direction

Navy White Yellow Color Palette

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.

ComplementaryCreativenavywhiteyellowcoastal
palette-preview.example
Creative color direction

Navy White Yellow Color Palette

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 system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo Charcoal Black #222A3Bon Lighthouse White #FFFFFF14.4:1 Excellent
Logo Lighthouse White #FFFFFFon Navy Blue #1B2A4914.2:1 Excellent
Logo Charcoal Black #222A3Bon Sunshine Yellow #FFDD0010.7:1 Excellent
Logo Charcoal Black #222A3Bon Light Mist #E9ECEF12.1:1 Excellent
Icon color
BackgroundNavy Blue#1B2A49TextIvory White#F5F7FA
Primary Button13.27:1
AAA

Best for the main action users should notice first.

BackgroundSunshine Yellow#FFDD00TextCharcoal Black#222A3B
Secondary Button10.66:1
AAA

Useful for softer choices and secondary paths.

BackgroundLighthouse White#FFFFFFTextNavy Blue#1B2A49
Outlined Button14.25:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundLighthouse White#FFFFFFTextNavy Blue#1B2A49
Text Button14.25:1
AAA

A quiet action for links, navigation, and inline decisions.

Palette composition8 colorsComplementary color relationship
9:41Navy White Yellow Color Palette Color role balance
Complementary system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CNavy White Yellow Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color 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.

Clear roles create a consistent brand experience.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Navy Blue #1B2A49
HeadlineUsed for main titles and key messages.Navy Blue #1B2A49
LinkUsed for links and interactive text.Navy Blue #1B2A49

Buttons

Primary Button
BackgroundNavy Blue #1B2A49
TextIvory White #F5F7FA
Secondary Button
BackgroundSunshine Yellow #FFDD00
TextCharcoal Black #222A3B
Outlined Button
BackgroundNavy Blue #1B2A49
TextNavy Blue #1B2A49

Interface

TextDefault readable body text.Charcoal Black #222A3B
Bg LightLight page or section background.Lighthouse White #FFFFFF
Bg DarkDark page or section background.Lighthouse White #FFFFFF
IconSmall interface icons and marks.Slate Blue #7289AB
BorderCards, inputs, and component borders.Slate Blue #7289AB
DividerSubtle separators between content.Slate Blue #7289AB
OutlineFocus rings and emphasis outlines.Slate Blue #7289AB

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

Main (Brand) Colors

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.

PrimaryNavy Blue

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.

HEX#1B2A49
RGB27, 42, 73
HSL220, 46, 20
CMYK63, 42, 0, 71
SecondarySunshine Yellow

RolesBtn Secondary Bg

Sunshine Yellow injects warmth and optimism, energizing the palette with vivid contrast and positivity.

HEX#FFDD00
RGB255, 221, 0
HSL52, 100, 50
CMYK0, 13, 100, 0
TertiaryLighthouse White

RolesBg Light, Bg Dark

Lighthouse White offers clarity and brightness, enhancing contrast and representing safety and guiding light.

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0

Support Colors

The 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.

Slate Blue

RolesIcon, Border, Divider, Outline

Slate Blue softens the palette with a cooler tone, complementing Navy Blue while keeping visual harmony.

HEX#7289AB
RGB114, 137, 171
HSL216, 25, 56
CMYK33, 20, 0, 33
Cool Gray

Cool Gray provides a neutral balance that calms and balances the vividness of the main colors, useful for subtle accents.

HEX#A0A8B9
RGB160, 168, 185
HSL221, 15, 68
CMYK14, 9, 0, 27

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

Ivory White

RolesBtn Primary Text

HEX#F5F7FA
RGB245, 247, 250
HSL216, 33, 97
CMYK2, 1, 0, 2
Charcoal Black

RolesText, Btn Secondary Text

HEX#222A3B
RGB34, 42, 59
HSL221, 27, 18
CMYK42, 29, 0, 77
Light Mist
HEX#E9ECEF
RGB233, 236, 239
HSL210, 16, 93
CMYK3, 1, 0, 6

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

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;
}

Role tokens

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;
}

JSON

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"
}
Press Space to load new palette