Navy#0A2540
Coral#FF6F61
Sand#D9B382
Palette direction

Navy Coral Real Color Palette

This palette uses a distinctive complementary color scheme centered on deep Navy and warm Coral, creating a recognizable and balanced system that conveys strength and care while maintaining visual interest.

ComplementaryReal Estatenavycoralresidentialreal estate
palette-preview.example
Real Estate color direction

Navy Coral Real Color Palette

This palette uses a distinctive complementary color scheme centered on deep Navy and warm Coral, creating a recognizable and balanced system that conveys strength and care while maintaining visual interest.

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 #0A254015.5:1 Excellent
Logo Charcoal #1C1C1Eon Coral #FF6F616.2:1 Strong
Logo Charcoal #1C1C1Eon White #FFFFFF17.0:1 Excellent
Logo Charcoal #1C1C1Eon Sand #D9B3828.7:1 Excellent
Icon color
BackgroundNavy#0A2540TextWhite#FFFFFF
Primary Button15.54:1
AAA

Best for the main action users should notice first.

BackgroundCoral#FF6F61TextCharcoal#1C1C1E
Secondary Button6.24:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextNavy#0A2540
Outlined Button15.54:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextNavy#0A2540
Text Button15.54:1
AAA

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

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

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

Buttons

Primary Button
BackgroundNavy #0A2540
TextWhite #FFFFFF
Secondary Button
BackgroundCoral #FF6F61
TextCharcoal #1C1C1E
Outlined Button
BackgroundNavy #0A2540
TextNavy #0A2540

Interface

TextDefault readable body text.Charcoal #1C1C1E
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Ivory #F5F7FA
IconSmall interface icons and marks.Sand #D9B382
BorderCards, inputs, and component borders.Sand #D9B382
DividerSubtle separators between content.Sand #D9B382
OutlineFocus rings and emphasis outlines.Sand #D9B382

Palette Colors

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

Main (Brand) Colors

The main colors Navy and Coral provide visual contrast and balance, making the brand both memorable and approachable for residential real estate.

PrimaryNavy

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

Navy imparts a trustworthy and stable foundation, reflecting professionalism and reliability ideal for building and managing homes.

HEX#0A2540
RGB10, 37, 64
HSL210, 73, 15
CMYK84, 42, 0, 75
SecondaryCoral

RolesBtn Secondary Bg, Headline

Coral adds warmth and energy, symbolizing creativity and care essential for designing and delivering exceptional spaces.

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

Support Colors

The support colors extend the palette with subtle natural tones that reinforce warmth and structure without competing for attention.

Sand

RolesIcon, Border, Divider, Outline

Sand complements Coral by introducing a natural earthy tone that balances vibrancy with groundedness.

HEX#D9B382
RGB217, 179, 130
HSL34, 53, 68
CMYK0, 18, 40, 15

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#1C1C1E
RGB28, 28, 30
HSL240, 3, 11
CMYK7, 7, 0, 88

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: #0A2540;
  --color-coral: #FF6F61;
  --color-sand: #D9B382;
  --color-white: #FFFFFF;
  --color-ivory: #F5F7FA;
  --color-charcoal: #1C1C1E;
}

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: #0A2540;
  --role-btn-primary-bg: #0A2540;
  --role-btn-outlined-border: #0A2540;
  --role-btn-outlined-text: #0A2540;
  --role-link: #0A2540;
  --role-btn-secondary-bg: #FF6F61;
  --role-headline: #FF6F61;
  --role-icon: #D9B382;
  --role-border: #D9B382;
  --role-divider: #D9B382;
  --role-outline: #D9B382;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #F5F7FA;
  --role-text: #1C1C1E;
  --role-btn-secondary-text: #1C1C1E;
}

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": "#0A2540",
    "coral": "#FF6F61",
    "sand": "#D9B382",
    "white": "#FFFFFF",
    "ivory": "#F5F7FA",
    "charcoal": "#1C1C1E"
}
Press Space to load new palette