Navy#1A3E6F
Coral#FF6F61
Slate#46627F
Cool Gray#9DA7B1
Palette direction

Navy Coral Slate Color Palette

This palette blends strong, structured blues with warm, approachable neutrals to convey reliability and care, fitting a residential design, build, and management brand. The main colors establish a trustworthy and professional identity while the support colors provide subtle accents that enhance usability without overpowering the core message. Neutrals are chosen to ensure excellent readability and comfortable backgrounds maintaining a clean and modern aesthetic.

ComplementaryReal Estateresidentialdesignbuildmanage
palette-preview.example
Real Estate color direction

Navy Coral Slate Color Palette

This palette blends strong, structured blues with warm, approachable neutrals to convey reliability and care, fitting a residential design, build, and management brand. The main colors establish a trustworthy and professional identity while the support colors provide subtle accents that enhance usability without overpowering the core message. Neutrals are chosen to ensure excellent readability and comfortable backgrounds maintaining a clean and modern aesthetic.

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 White #FFFFFFon Navy #1A3E6F10.7:1 Excellent
Logo Charcoal #2C2C2Con Coral #FF6F615.1:1 Strong
Logo Charcoal #2C2C2Con White #FFFFFF14.0:1 Excellent
Logo Charcoal #2C2C2Con Cool Gray #9DA7B15.7:1 Strong
Icon color
BackgroundNavy#1A3E6FTextWhite#FFFFFF
Primary Button10.70:1
AAA

Best for the main action users should notice first.

BackgroundCoral#FF6F61TextCharcoal#2C2C2C
Secondary Button5.12:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextNavy#1A3E6F
Outlined Button10.70:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextCoral#FF6F61
Text Button2.73:1
Low

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

Palette composition7 colorsComplementary color relationship
9:41Navy Coral Slate 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 Coral Slate Color PaletteReal Estate brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The palette balances the depth and professionalism of Navy and Slate blues with the warmth and energy of Coral, creating a recognizable system that conveys strength, reliability, and care.

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 #1A3E6F
HeadlineUsed for main titles and key messages.Coral #FF6F61
LinkUsed for links and interactive text.Coral #FF6F61

Buttons

Primary Button
BackgroundNavy #1A3E6F
TextWhite #FFFFFF
Secondary Button
BackgroundCoral #FF6F61
TextCharcoal #2C2C2C
Outlined Button
BackgroundNavy #1A3E6F
TextNavy #1A3E6F

Interface

TextDefault readable body text.Charcoal #2C2C2C
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Ivory #F5F7FA
IconSmall interface icons and marks.Cool Gray #9DA7B1
BorderCards, inputs, and component borders.Cool Gray #9DA7B1
DividerSubtle separators between content.Cool Gray #9DA7B1
OutlineFocus rings and emphasis outlines.Cool Gray #9DA7B1

Palette Colors

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

Main (Brand) Colors

The palette balances the depth and professionalism of Navy and Slate blues with the warmth and energy of Coral, creating a recognizable system that conveys strength, reliability, and care.

PrimaryNavy

RolesLogo, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text

Navy provides a strong foundation expressing professionalism, stability, and trust needed for the design and build aspects.

HEX#1A3E6F
RGB26, 62, 111
HSL215, 62, 27
CMYK77, 44, 0, 56
SecondaryCoral

RolesLink, Btn Secondary Bg, Headline

Coral energizes the palette with warmth and approachability, highlighting care and personal connection in managing residential spaces.

HEX#FF6F61
RGB255, 111, 97
HSL5, 100, 69
CMYK0, 56, 62, 0
TertiarySlate

Slate offers a softer, muted blue that balances Coral's vibrancy and deepens the palette's sophistication while supporting secondary roles.

HEX#46627F
RGB70, 98, 127
HSL211, 29, 39
CMYK45, 23, 0, 50

Support Colors

Support colors amplify the main palette by adding subtle, complementary shades that maintain visual harmony and do not overpower the main colors, ensuring their roles remain dominant and focused.

Cool Gray

RolesIcon, Border, Divider, Outline

Cool Gray reinforces structure and clarity, providing unobtrusive visual separators and iconography that complement the main blues without distraction.

HEX#9DA7B1
RGB157, 167, 177
HSL210, 11, 65
CMYK11, 6, 0, 31

Neutral Colors

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

White

RolesBg Light, Btn Primary Text

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

RolesBg Dark

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

RolesText, Btn Secondary Text

HEX#2C2C2C
RGB44, 44, 44
HSL0, 0, 17
CMYK0, 0, 0, 83

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: #1A3E6F;
  --color-coral: #FF6F61;
  --color-slate: #46627F;
  --color-cool-gray: #9DA7B1;
  --color-white: #FFFFFF;
  --color-ivory: #F5F7FA;
  --color-charcoal: #2C2C2C;
}

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: #1A3E6F;
  --role-btn-primary-bg: #1A3E6F;
  --role-btn-outlined-border: #1A3E6F;
  --role-btn-outlined-text: #1A3E6F;
  --role-link: #FF6F61;
  --role-btn-secondary-bg: #FF6F61;
  --role-headline: #FF6F61;
  --role-icon: #9DA7B1;
  --role-border: #9DA7B1;
  --role-divider: #9DA7B1;
  --role-outline: #9DA7B1;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #F5F7FA;
  --role-text: #2C2C2C;
  --role-btn-secondary-text: #2C2C2C;
}

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": "#1A3E6F",
    "coral": "#FF6F61",
    "slate": "#46627F",
    "cool-gray": "#9DA7B1",
    "white": "#FFFFFF",
    "ivory": "#F5F7FA",
    "charcoal": "#2C2C2C"
}
Press Space to load new palette