Navy Blue#1A2A52
Gold#C49A49
Beige#D9CBA3
Muted Blue-gray#5A6B88
Soft Cream#F4F0E6
Palette direction

Navy Gold Beige Color Palette

This color palette is inspired by the regal and trustworthy aesthetic of the shield logo featuring gold, navy, and beige tones. It combines deep navy blue, warm gold, and soft beige as main colors to create a sense of security, professionalism, and heritage. Muted blue-gray and soft cream support colors extend the main palette with calmness and balance. Neutral colors include pure white, light ivory, and dark charcoal for versatile backgrounds and text, ensuring strong contrast and usability.

ComplementaryFinancenavy bluegoldbeigesecurity
palette-preview.example
Finance color direction

Navy Gold Beige Color Palette

This color palette is inspired by the regal and trustworthy aesthetic of the shield logo featuring gold, navy, and beige tones. It combines deep navy blue, warm gold, and soft beige as main colors to create a sense of security, professionalism, and heritage. Muted blue-gray and soft cream support colors extend the main palette with calmness and balance. Neutral colors include pure white, light ivory, and dark charcoal for versatile backgrounds and text, ensuring strong contrast and usability.

Explore the color system8 colors mapped to roles
Logo contrast guide

Logo color pairings

Each column shows a usable logo color on a palette background, with contrast checked for clarity.

Logo Pure White #FFFFFF
on Navy Blue #1A2A52

14.0:1 Excellent

Logo Navy Blue #1A2A52
on Beige #D9CBA3

8.7:1 Excellent

Logo Navy Blue #1A2A52
on Gold #C49A49

5.4:1 Strong

Logo Navy Blue #1A2A52
on Pure White #FFFFFF

14.0:1 Excellent
Business card

Printed materials without guessing.

A neutral card system with the logo color, contact text, and a restrained palette accent.

Avery Stone Palette designer avery@example.com colorfly.design
Mobile website

The palette has to survive the small screen.

A mobile landing page preview with logo, navigation, headline, CTA, content card, and chart color usage.

Finance Navy Gold Beige Color Palette

The triadic combination of navy blue, gold, and beige creates a balanced and memorable color system that evokes trust, prestige, and warmth for a security-focused brand identity.

Analytics system

Dashboards need more than one pretty color.

Numbers, pie charts, bars, stacked bars, and lines reveal whether the palette can support real product interfaces.

Revenue$84.2k+18.4%
Retention72%Stable
Signals8Complementary
Audience split
Monthly growth
Trend line

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 #1A2A52
HeadlineUsed for main titles and key messages.Beige #D9CBA3
LinkUsed for links and interactive text.Navy Blue #1A2A52

Buttons

Primary Button
Contrast14.03:1AA
BackgroundNavy Blue #1A2A52
TextPure White #FFFFFF
Secondary Button
Contrast5.36:1AA
BackgroundGold #C49A49
TextCharcoal #2C2C2C
Outlined Button
Contrast2.29:1Low
BorderGold #C49A49
TextGold #C49A49

Interface

TextDefault readable body text.Charcoal #2C2C2C
Bg LightLight page or section background.Soft Cream #F4F0E6
Bg DarkDark page or section background.Pure White #FFFFFF
IconSmall interface icons and marks.Muted Blue-gray #5A6B88
BorderCards, inputs, and component borders.Muted Blue-gray #5A6B88
DividerSubtle separators between content.Muted Blue-gray #5A6B88
OutlineFocus rings and emphasis outlines.Muted Blue-gray #5A6B88

Print Color Values

CMYK values are calculated from HEX by default. Adjust them only when preparing print materials.

Screen colors stay unchanged.Manual CMYK edits are used in exports and handoff.
Calculated CMYK
Navy BlueMain color - #1A2A52
Calculated CMYK
GoldMain color - #C49A49
Calculated CMYK
BeigeMain color - #D9CBA3
Calculated CMYK
Muted Blue-graySupport color - #5A6B88
Calculated CMYK
Soft CreamSupport color - #F4F0E6
Calculated CMYK
Pure WhiteNeutral color - #FFFFFF
Calculated CMYK
Light IvoryNeutral color - #F9F6F0
Calculated CMYK
CharcoalNeutral color - #2C2C2C

Palette Colors

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

Main (Brand) Colors

The triadic combination of navy blue, gold, and beige creates a balanced and memorable color system that evokes trust, prestige, and warmth for a security-focused brand identity.

PrimaryNavy Blue

RolesLogo, Link, Btn Primary Bg

Navy Blue instills confidence and authority, making it a reliable foundation color for the brand's visual identity.

HEX#1A2A52
RGB26, 42, 82
HSL223, 52, 21
CMYK68, 49, 0, 68
SecondaryGold

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Gold adds a feeling of prestige and value, symbolizing excellence and the premium quality of security services.

HEX#C49A49
RGB196, 154, 73
HSL40, 51, 53
CMYK0, 21, 63, 23
TertiaryBeige

RolesHeadline

Beige brings warmth and approachability, creating balance with the stronger navy and gold hues.

HEX#D9CBA3
RGB217, 203, 163
HSL44, 42, 75
CMYK0, 6, 25, 15

Support Colors

Supporting the robust main colors, the muted blue-gray and soft cream accentuate calm and clarity without overpowering the primary color narrative.

Muted Blue-gray

RolesIcon, Border, Divider, Outline

Muted Blue-gray complements Navy Blue by softening the palette and offering subtle contrast for interface elements.

HEX#5A6B88
RGB90, 107, 136
HSL218, 20, 44
CMYK34, 21, 0, 47
Soft Cream

RolesBg Light

Soft Cream extends the warmth of beige to backgrounds, ensuring clean and inviting visual spaces.

HEX#F4F0E6
RGB244, 240, 230
HSL43, 39, 93
CMYK0, 2, 6, 4

Neutral Colors

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

Pure White

RolesBg Dark, Btn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Light Ivory
HEX#F9F6F0
RGB249, 246, 240
HSL40, 43, 96
CMYK0, 1, 4, 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. You can also copy this palette for Logo Export on myLogo.review, so your colors are ready there in one click.

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: #1A2A52;
  --color-gold: #C49A49;
  --color-beige: #D9CBA3;
  --color-muted-blue-gray: #5A6B88;
  --color-soft-cream: #F4F0E6;
  --color-pure-white: #FFFFFF;
  --color-light-ivory: #F9F6F0;
  --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: #1A2A52;
  --role-link: #1A2A52;
  --role-btn-primary-bg: #1A2A52;
  --role-btn-secondary-bg: #C49A49;
  --role-btn-outlined-border: #C49A49;
  --role-btn-outlined-text: #C49A49;
  --role-headline: #D9CBA3;
  --role-icon: #5A6B88;
  --role-border: #5A6B88;
  --role-divider: #5A6B88;
  --role-outline: #5A6B88;
  --role-bg-light: #F4F0E6;
  --role-bg-dark: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --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-blue": "#1A2A52",
    "gold": "#C49A49",
    "beige": "#D9CBA3",
    "muted-blue-gray": "#5A6B88",
    "soft-cream": "#F4F0E6",
    "pure-white": "#FFFFFF",
    "light-ivory": "#F9F6F0",
    "charcoal": "#2C2C2C"
}
Press Space to load new palette