Navy#0A1F44
Crimson#D23649
Steel Blue#3C5F84
Light Slate Blue#7D9AC9
Muted Rose#B25766
Palette direction

Navy Red Vibrant Color Palette

This palette draws inspiration from the balanced mix of strong blues and vibrant reds in the image, creating a modern and energetic brand color system with subtle yet clear contrasts. The main colors of deep navy and rich red establish a recognizable identity, while the support colors offer softer blue and muted pink accents that support usability and visual harmony. The neutrals provide clean white, light gray, and dark charcoal tones for text and backgrounds, ensuring strong readability and interface clarity.

CustomCreativenavyredbluecontrast
palette-preview.example
Creative color direction

Navy Red Vibrant Color Palette

This palette draws inspiration from the balanced mix of strong blues and vibrant reds in the image, creating a modern and energetic brand color system with subtle yet clear contrasts. The main colors of deep navy and rich red establish a recognizable identity, while the support colors offer softer blue and muted pink accents that support usability and visual harmony. The neutrals provide clean white, light gray, and dark charcoal tones for text and backgrounds, ensuring strong readability and interface clarity.

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 #0A1F44

16.2:1 Excellent

Logo White #FFFFFF
on Crimson #D23649

4.8:1 Strong

Logo Navy #0A1F44
on White #FFFFFF

16.2:1 Excellent

Logo Navy #0A1F44
on Light Slate Blue #7D9AC9

5.7:1 Strong
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.

Creative Navy Red Vibrant Color Palette

The palette is anchored by a complementary color scheme utilizing deep navy blues and vivid reds that deliver strong visual impact and balanced contrast, creating a lively but harmonious 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
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.Navy #0A1F44
HeadlineUsed for main titles and key messages.Steel Blue #3C5F84
LinkUsed for links and interactive text.Crimson #D23649

Buttons

Primary Button
Contrast16.25:1AA
BackgroundNavy #0A1F44
TextWhite #FFFFFF
Secondary Button
Contrast4.81:1AA
BackgroundCrimson #D23649
TextWhite #FFFFFF
Outlined Button
Contrast4.81:1AA
BorderNavy #0A1F44
TextCrimson #D23649

Interface

TextDefault readable body text.Charcoal #282828
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Light Gray #F2F3F5
IconSmall interface icons and marks.Light Slate Blue #7D9AC9
BorderCards, inputs, and component borders.Light Slate Blue #7D9AC9
DividerSubtle separators between content.Light Slate Blue #7D9AC9
OutlineFocus rings and emphasis outlines.Light Slate Blue #7D9AC9

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
NavyMain color - #0A1F44
Calculated CMYK
CrimsonMain color - #D23649
Calculated CMYK
Steel BlueMain color - #3C5F84
Calculated CMYK
Light Slate BlueSupport color - #7D9AC9
Calculated CMYK
Muted RoseSupport color - #B25766
Calculated CMYK
WhiteNeutral color - #FFFFFF
Calculated CMYK
Light GrayNeutral color - #F2F3F5
Calculated CMYK
CharcoalNeutral color - #282828

Palette Colors

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

Main (Brand) Colors

The palette is anchored by a complementary color scheme utilizing deep navy blues and vivid reds that deliver strong visual impact and balanced contrast, creating a lively but harmonious brand identity.

PrimaryNavy

RolesLogo, Btn Primary Bg, Btn Outlined Border

This deep navy blue establishes trust and professionalism, serving as the primary brand anchor with a strong, confident foundation.

HEX#0A1F44
RGB10, 31, 68
HSL218, 74, 15
CMYK85, 54, 0, 73
SecondaryCrimson

RolesLink, Btn Secondary Bg, Btn Outlined Text

The vibrant crimson injects passion and energy, creating engaging call-to-actions and lively accents that stimulate attention.

HEX#D23649
RGB210, 54, 73
HSL353, 63, 52
CMYK0, 74, 65, 18
TertiarySteel Blue

RolesHeadline

Steel Blue softens and balances the palette with a trustworthy yet approachable hue for headlines and highlights.

HEX#3C5F84
RGB60, 95, 132
HSL211, 38, 38
CMYK55, 28, 0, 48

Support Colors

The support colors provide muted, softer blues and pinks that enhance the palette without overpowering the main colors, ensuring visual balance and subtle layering opportunities.

Light Slate Blue

RolesIcon, Border, Divider, Outline

Light Slate Blue complements the stronger blues with a softer tonal option perfect for icons and borders, adding refinement.

HEX#7D9AC9
RGB125, 154, 201
HSL217, 41, 64
CMYK38, 23, 0, 21
Muted Rose

Muted Rose provides a warm accent that balances the crisper reds and blues with a gentle, desaturated pink tone.

HEX#B25766
RGB178, 87, 102
HSL350, 37, 52
CMYK0, 51, 43, 30

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
Light Gray

RolesBg Dark

HEX#F2F3F5
RGB242, 243, 245
HSL220, 13, 95
CMYK1, 1, 0, 4
Charcoal

RolesText

HEX#282828
RGB40, 40, 40
HSL0, 0, 16
CMYK0, 0, 0, 84

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: #0A1F44;
  --color-crimson: #D23649;
  --color-steel-blue: #3C5F84;
  --color-light-slate-blue: #7D9AC9;
  --color-muted-rose: #B25766;
  --color-white: #FFFFFF;
  --color-light-gray: #F2F3F5;
  --color-charcoal: #282828;
}

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: #0A1F44;
  --role-btn-primary-bg: #0A1F44;
  --role-btn-outlined-border: #0A1F44;
  --role-link: #D23649;
  --role-btn-secondary-bg: #D23649;
  --role-btn-outlined-text: #D23649;
  --role-headline: #3C5F84;
  --role-icon: #7D9AC9;
  --role-border: #7D9AC9;
  --role-divider: #7D9AC9;
  --role-outline: #7D9AC9;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F2F3F5;
  --role-text: #282828;
}

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": "#0A1F44",
    "crimson": "#D23649",
    "steel-blue": "#3C5F84",
    "light-slate-blue": "#7D9AC9",
    "muted-rose": "#B25766",
    "white": "#FFFFFF",
    "light-gray": "#F2F3F5",
    "charcoal": "#282828"
}
Press Space to load new palette