Crimson#DC143C
Navy#001F4D
White#FFFFFF
Sandy Beige#D2B48C
Steel Grey#6E7B8B
Palette direction

Crimson Navy White Color Palette

This palette combines strong patriotic red, cool navy blue, and crisp white as main colors to create a bold and recognizable American-themed identity, complemented by warm sandy beige and steel grey accents to balance and support the vibrancy. The neutrals include bright white and two shades of dark grey ensuring excellent readability and versatility for backgrounds, text, and UI elements.

CustomNonepatrioticamericanrednavy
palette-preview.example
None color direction

Crimson Navy White Color Palette

This palette combines strong patriotic red, cool navy blue, and crisp white as main colors to create a bold and recognizable American-themed identity, complemented by warm sandy beige and steel grey accents to balance and support the vibrancy. The neutrals include bright white and two shades of dark grey ensuring excellent readability and versatility for backgrounds, text, and UI elements.

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 White #FFFFFF
on Navy #001F4D

16.1:1 Excellent

Logo Navy #001F4D
on White #FFFFFF

16.1:1 Excellent

Logo White #FFFFFF
on Crimson #DC143C

5.0:1 Strong

Logo Navy #001F4D
on Sandy Beige #D2B48C

8.2: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.

None Crimson Navy White Color Palette

The main colors combine a vibrant Crimson red, a deep Navy blue, and pure White, forming a complementary and classic American color scheme that ensures clear recognition and strong contrast.

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
Signals8Custom
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.Crimson #DC143C
HeadlineUsed for main titles and key messages.Navy #001F4D
LinkUsed for links and interactive text.Crimson #DC143C

Buttons

Primary Button
Contrast4.99:1AA
BackgroundCrimson #DC143C
TextWhite #FFFFFF
Secondary Button
Contrast16.11:1AA
BackgroundNavy #001F4D
TextWhite #FFFFFF
Outlined Button
Contrast4.99:1AA
BorderCrimson #DC143C
TextCrimson #DC143C

Interface

TextDefault readable body text.Charcoal #222222
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Snow #F8F8F8
IconSmall interface icons and marks.Sandy Beige #D2B48C
BorderCards, inputs, and component borders.Sandy Beige #D2B48C
DividerSubtle separators between content.Sandy Beige #D2B48C
OutlineFocus rings and emphasis outlines.Sandy Beige #D2B48C

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
CrimsonMain color - #DC143C
Calculated CMYK
NavyMain color - #001F4D
Calculated CMYK
WhiteMain color - #FFFFFF
Calculated CMYK
Sandy BeigeSupport color - #D2B48C
Calculated CMYK
Steel GreySupport color - #6E7B8B
Calculated CMYK
WhiteNeutral color - #FFFFFF
Calculated CMYK
SnowNeutral color - #F8F8F8
Calculated CMYK
CharcoalNeutral color - #222222

Palette Colors

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

Main (Brand) Colors

The main colors combine a vibrant Crimson red, a deep Navy blue, and pure White, forming a complementary and classic American color scheme that ensures clear recognition and strong contrast.

PrimaryCrimson

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

Crimson introduces energetic patriotism and confidence, anchored by its bold, vivid presence as the primary brand driver.

HEX#DC143C
RGB220, 20, 60
HSL348, 83, 47
CMYK0, 91, 73, 14
SecondaryNavy

RolesHeadline, Btn Secondary Bg

Navy offers a stable and trustworthy tone, grounding the strong red with a cool depth fitting headline and accents.

HEX#001F4D
RGB0, 31, 77
HSL216, 100, 15
CMYK100, 60, 0, 70
TertiaryWhite

White provides clarity and balance, ensuring legibility and brightness when paired with vibrant brand colors.

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

Support Colors

The support colors introduce subtler earthy tones that gently enhance the strong main colors by adding warmth and stability without competing for attention.

Sandy Beige

RolesIcon, Border, Divider, Outline

Sandy Beige brings a warm, natural grounding complement that softens the strong red and blue while maintaining a traditional feel.

HEX#D2B48C
RGB210, 180, 140
HSL34, 44, 69
CMYK0, 14, 33, 18
Steel Grey

Steel Grey adds a sophisticated neutral accent to balance the palette, offering depth and subtlety for text or interface elements.

HEX#6E7B8B
RGB110, 123, 139
HSL213, 12, 49
CMYK21, 12, 0, 45

Neutral Colors

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

White

RolesBg Light, Btn Primary Text, Btn Secondary Text

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

RolesBg Dark

HEX#F8F8F8
RGB248, 248, 248
HSL0, 0, 97
CMYK0, 0, 0, 3
Charcoal

RolesText

HEX#222222
RGB34, 34, 34
HSL0, 0, 13
CMYK0, 0, 0, 87

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-crimson: #DC143C;
  --color-navy: #001F4D;
  --color-white: #FFFFFF;
  --color-sandy-beige: #D2B48C;
  --color-steel-grey: #6E7B8B;
  --color-snow: #F8F8F8;
  --color-charcoal: #222222;
}

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: #DC143C;
  --role-link: #DC143C;
  --role-btn-primary-bg: #DC143C;
  --role-btn-outlined-border: #DC143C;
  --role-btn-outlined-text: #DC143C;
  --role-headline: #001F4D;
  --role-btn-secondary-bg: #001F4D;
  --role-icon: #D2B48C;
  --role-border: #D2B48C;
  --role-divider: #D2B48C;
  --role-outline: #D2B48C;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F8F8F8;
  --role-text: #222222;
}

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.
{
    "crimson": "#DC143C",
    "navy": "#001F4D",
    "white": "#FFFFFF",
    "sandy-beige": "#D2B48C",
    "steel-grey": "#6E7B8B",
    "snow": "#F8F8F8",
    "charcoal": "#222222"
}
Press Space to load new palette