Navy Blue#2C3E70
Steel Blue#5B7294
Light Beige#E6DCCF
Slate Blue#3D5170
Cool Gray Blue#8B9EB3
Palette direction

Navy Beige Elegant Color Palette

This palette inspired by the image combines deep navy blues with soft beige tones and muted blues to evoke a classic, elegant, and trustworthy brand identity with a modern and sophisticated feel. The main colors establish a strong, recognizable system, while the subtle support colors provide gentle extensions that maintain harmony without competing visually. Neutrals offer versatile contrast for text and backgrounds to ensure readability and a polished digital presence.

MonochromaticLuxury And Lifestylenavy bluebeigeluxuryelegant
palette-preview.example
Luxury And Lifestyle color direction

Navy Beige Elegant Color Palette

This palette inspired by the image combines deep navy blues with soft beige tones and muted blues to evoke a classic, elegant, and trustworthy brand identity with a modern and sophisticated feel. The main colors establish a strong, recognizable system, while the subtle support colors provide gentle extensions that maintain harmony without competing visually. Neutrals offer versatile contrast for text and backgrounds to ensure readability and a polished digital presence.

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 #2B2B2Bon Light Beige #E6DCCF10.5:1 Excellent
Logo White #FFFFFFon Navy Blue #2C3E7010.3:1 Excellent
Logo White #FFFFFFon Steel Blue #5B72944.9:1 Strong
Logo Charcoal #2B2B2Bon White #FFFFFF14.2:1 Excellent
Icon color
BackgroundNavy Blue#2C3E70TextWhite#FFFFFF
Primary Button10.34:1
AAA

Best for the main action users should notice first.

BackgroundLight Beige#E6DCCFTextCharcoal#2B2B2B
Secondary Button10.45:1
AAA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextNavy Blue#2C3E70
Outlined Button10.34:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextNavy Blue#2C3E70
Text Button10.34:1
AAA

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

Palette composition8 colorsMonochromatic color relationship
9:41Navy Beige Elegant Color Palette Color role balance
Monochromatic 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 Beige Elegant Color PaletteLuxury And Lifestyle 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 Blue #2C3E70
HeadlineUsed for main titles and key messages.Steel Blue #5B7294
LinkUsed for links and interactive text.Navy Blue #2C3E70

Buttons

Primary Button
BackgroundNavy Blue #2C3E70
TextWhite #FFFFFF
Secondary Button
BackgroundLight Beige #E6DCCF
TextCharcoal #2B2B2B
Outlined Button
BackgroundNavy Blue #2C3E70
TextNavy Blue #2C3E70

Interface

TextDefault readable body text.Charcoal #2B2B2B
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Charcoal #2B2B2B
IconSmall interface icons and marks.Slate Blue #3D5170
BorderCards, inputs, and component borders.Slate Blue #3D5170
DividerSubtle separators between content.Slate Blue #3D5170
OutlineFocus rings and emphasis outlines.Slate Blue #3D5170

Palette Colors

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

Main (Brand) Colors

The main colors combine navy blue, muted deep blues, and soft beige to create a harmonious yet dynamic palette that balances strength with sophistication.

PrimaryNavy Blue

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

Navy Blue anchors the palette with a solid, trustworthy tone conveying reliability and luxury.

HEX#2C3E70
RGB44, 62, 112
HSL224, 44, 31
CMYK61, 45, 0, 56
SecondarySteel Blue

RolesHeadline

Steel Blue offers a softer counterpart to navy with a modern, approachable feel for headlines.

HEX#5B7294
RGB91, 114, 148
HSL216, 24, 47
CMYK39, 23, 0, 42
TertiaryLight Beige

RolesBtn Secondary Bg

Light Beige brings warmth and balance to the palette, adding a refined, inviting accent as a secondary button background.

HEX#E6DCCF
RGB230, 220, 207
HSL34, 32, 86
CMYK0, 4, 10, 10

Support Colors

The support colors provide complementary muted blue variations to add depth and visual interest while maintaining harmony with the main colors.

Slate Blue

RolesIcon, Border, Divider, Outline

Slate Blue subtly supports the main blues with a muted tone for interface elements and borders.

HEX#3D5170
RGB61, 81, 112
HSL216, 29, 34
CMYK46, 28, 0, 56
Cool Gray Blue

Cool Gray Blue offers a soft, subdued accent for backgrounds or subtle highlights without overpowering the main colors.

HEX#8B9EB3
RGB139, 158, 179
HSL212, 21, 62
CMYK22, 12, 0, 30

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
HEX#F7F4F0
RGB247, 244, 240
HSL34, 30, 95
CMYK0, 1, 3, 3
Charcoal

RolesBg Dark, Text, Btn Secondary Text

HEX#2B2B2B
RGB43, 43, 43
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-blue: #2C3E70;
  --color-steel-blue: #5B7294;
  --color-light-beige: #E6DCCF;
  --color-slate-blue: #3D5170;
  --color-cool-gray-blue: #8B9EB3;
  --color-white: #FFFFFF;
  --color-ivory: #F7F4F0;
  --color-charcoal: #2B2B2B;
}

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: #2C3E70;
  --role-link: #2C3E70;
  --role-btn-primary-bg: #2C3E70;
  --role-btn-outlined-border: #2C3E70;
  --role-btn-outlined-text: #2C3E70;
  --role-headline: #5B7294;
  --role-btn-secondary-bg: #E6DCCF;
  --role-icon: #3D5170;
  --role-border: #3D5170;
  --role-divider: #3D5170;
  --role-outline: #3D5170;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #2B2B2B;
  --role-text: #2B2B2B;
  --role-btn-secondary-text: #2B2B2B;
}

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": "#2C3E70",
    "steel-blue": "#5B7294",
    "light-beige": "#E6DCCF",
    "slate-blue": "#3D5170",
    "cool-gray-blue": "#8B9EB3",
    "white": "#FFFFFF",
    "ivory": "#F7F4F0",
    "charcoal": "#2B2B2B"
}
Press Space to load new palette