Navy#151F45
Lavender Purple#8B72E6
Mint#66D7CB
Blue Gray#4B627C
Muted Aqua#57B9B0
Palette direction

Navy Purple Mint Color Palette

This palette balances a strong, dependable navy with a vibrant purple and a soothing mint green, complemented by soft neutrals for text and backgrounds, creating a modern and professional branding system.

AnalogousTechnavypurplemintbranding
palette-preview.example
Tech color direction

Navy Purple Mint Color Palette

This palette balances a strong, dependable navy with a vibrant purple and a soothing mint green, complemented by soft neutrals for text and backgrounds, creating a modern and professional branding system.

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 #151F4516.0:1 Excellent
Logo Rich Black #1A1A1Aon Mint #66D7CB10.1:1 Excellent
Logo Rich Black #1A1A1Aon Lavender Purple #8B72E64.7:1 Strong
Logo Rich Black #1A1A1Aon White #FFFFFF17.4:1 Excellent
Icon color
BackgroundNavy#151F45TextWhite#FFFFFF
Primary Button15.98:1
AAA

Best for the main action users should notice first.

BackgroundLavender Purple#8B72E6TextRich Black#1A1A1A
Secondary Button4.68:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextLavender Purple#8B72E6
Outlined Button3.72:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextNavy#151F45
Text Button15.98:1
AAA

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

Palette composition8 colorsAnalogous color relationship
9:41Navy Purple Mint Color Palette Color role balance
Analogous 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 Purple Mint Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors form a split complementary scheme combining deep navy, vibrant purple, and fresh mint, offering both contrast and harmony for a distinctive tech branding palette.

Clear roles create a consistent brand experience.

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 #151F45
HeadlineUsed for main titles and key messages.Lavender Purple #8B72E6
LinkUsed for links and interactive text.Navy #151F45

Buttons

Primary Button
BackgroundNavy #151F45
TextWhite #FFFFFF
Secondary Button
BackgroundLavender Purple #8B72E6
TextRich Black #1A1A1A
Outlined Button
BackgroundNavy #151F45
TextLavender Purple #8B72E6

Interface

TextDefault readable body text.Rich Black #1A1A1A
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Light Gray #E6E6E6
IconSmall interface icons and marks.Blue Gray #4B627C
BorderCards, inputs, and component borders.Blue Gray #4B627C
DividerSubtle separators between content.Blue Gray #4B627C
OutlineFocus rings and emphasis outlines.Blue Gray #4B627C

Palette Colors

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

Main (Brand) Colors

The main colors form a split complementary scheme combining deep navy, vibrant purple, and fresh mint, offering both contrast and harmony for a distinctive tech branding palette.

PrimaryNavy

RolesLogo, Btn Primary Bg, Btn Outlined Border, Link

Navy conveys trust and stability, making it ideal for the core brand identity and primary interactive elements.

HEX#151F45
RGB21, 31, 69
HSL228, 53, 18
CMYK70, 55, 0, 73
SecondaryLavender Purple

RolesBtn Secondary Bg, Btn Outlined Text, Headline

Lavender Purple adds creativity and a modern edge, perfect for secondary buttons and headlines to stand out.

HEX#8B72E6
RGB139, 114, 230
HSL253, 70, 67
CMYK40, 50, 0, 10
TertiaryMint

Mint provides a fresh, calm accent that contrasts well with purple, ideal for button text opposing vibrant backgrounds.

HEX#66D7CB
RGB102, 215, 203
HSL174, 59, 62
CMYK53, 0, 6, 16

Support Colors

Support colors extend the palette with soft blue-gray and a muted aqua to subtly enhance icons, borders, and dividers without competing with main hues.

Blue Gray

RolesIcon, Border, Divider, Outline

Blue Gray complements navy by providing depth for structural UI elements while being subdued enough to avoid visual competition.

HEX#4B627C
RGB75, 98, 124
HSL212, 25, 39
CMYK40, 21, 0, 51
Muted Aqua

Muted Aqua balances the vibrancy of mint, usable in supporting graphics or subtle UI accents, maintaining harmony.

HEX#57B9B0
RGB87, 185, 176
HSL174, 41, 53
CMYK53, 0, 5, 27

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

RolesBg Dark

HEX#E6E6E6
RGB230, 230, 230
HSL0, 0, 90
CMYK0, 0, 0, 10
Rich Black

RolesText, Btn Secondary Text

HEX#1A1A1A
RGB26, 26, 26
HSL0, 0, 10
CMYK0, 0, 0, 90

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: #151F45;
  --color-lavender-purple: #8B72E6;
  --color-mint: #66D7CB;
  --color-blue-gray: #4B627C;
  --color-muted-aqua: #57B9B0;
  --color-white: #FFFFFF;
  --color-light-gray: #E6E6E6;
  --color-rich-black: #1A1A1A;
}

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: #151F45;
  --role-btn-primary-bg: #151F45;
  --role-btn-outlined-border: #151F45;
  --role-link: #151F45;
  --role-btn-secondary-bg: #8B72E6;
  --role-btn-outlined-text: #8B72E6;
  --role-headline: #8B72E6;
  --role-icon: #4B627C;
  --role-border: #4B627C;
  --role-divider: #4B627C;
  --role-outline: #4B627C;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #E6E6E6;
  --role-text: #1A1A1A;
  --role-btn-secondary-text: #1A1A1A;
}

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": "#151F45",
    "lavender-purple": "#8B72E6",
    "mint": "#66D7CB",
    "blue-gray": "#4B627C",
    "muted-aqua": "#57B9B0",
    "white": "#FFFFFF",
    "light-gray": "#E6E6E6",
    "rich-black": "#1A1A1A"
}
Press Space to load new palette