Orange#FF6A00
Navy#0B3D91
Verde Green#4A7C59
Sage#A9B8A0
Slate Blue#53687E
Palette direction

Orange Navy Verde Color Palette

This distinctive triadic palette blends vibrant Orange with complementary Navy and Verde Green, creating a balanced and energetic color system ideal for commanding brand recognition and digital clarity. The main colors form a lively yet harmonious relationship, while the support colors extend the palette with subtle undertones that reinforce usability and visual balance. Neutrals provide crisp backgrounds and clear text contrast to maintain readability and interface friendliness.

ComplementaryNoneorangenavyverde greentriadic
palette-preview.example
None color direction

Orange Navy Verde Color Palette

This distinctive triadic palette blends vibrant Orange with complementary Navy and Verde Green, creating a balanced and energetic color system ideal for commanding brand recognition and digital clarity. The main colors form a lively yet harmonious relationship, while the support colors extend the palette with subtle undertones that reinforce usability and visual balance. Neutrals provide crisp backgrounds and clear text contrast to maintain readability and interface friendliness.

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

10.0:1 Excellent

Logo Charcoal #1E1E1E
on Orange #FF6A00

5.8:1 Strong

Logo White #FFFFFF
on Verde Green #4A7C59

4.9:1 Strong

Logo Charcoal #1E1E1E
on White #FFFFFF

16.7: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 Orange Navy Verde Color Palette

This triadic palette balances a vivid orange with a deep navy and a soft verde green to create a memorable and visually striking brand identity. Each main color holds strong individual recognition while playing off each other to generate energetic harmony.

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.Orange #FF6A00
HeadlineUsed for main titles and key messages.Navy #0B3D91
LinkUsed for links and interactive text.Orange #FF6A00

Buttons

Primary Button
Contrast5.81:1AA
BackgroundOrange #FF6A00
TextCharcoal #1E1E1E
Secondary Button
Contrast10.04:1AA
BackgroundNavy #0B3D91
TextWhite #FFFFFF
Outlined Button
Contrast2.87:1Low
BorderOrange #FF6A00
TextOrange #FF6A00

Interface

TextDefault readable body text.Charcoal #1E1E1E
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Ivory #F4F4F4
IconSmall interface icons and marks.Verde Green #4A7C59
BorderCards, inputs, and component borders.Verde Green #4A7C59
DividerSubtle separators between content.Verde Green #4A7C59
OutlineFocus rings and emphasis outlines.Verde Green #4A7C59

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
OrangeMain color - #FF6A00
Calculated CMYK
NavyMain color - #0B3D91
Calculated CMYK
Verde GreenMain color - #4A7C59
Calculated CMYK
SageSupport color - #A9B8A0
Calculated CMYK
Slate BlueSupport color - #53687E
Calculated CMYK
WhiteNeutral color - #FFFFFF
Calculated CMYK
IvoryNeutral color - #F4F4F4
Calculated CMYK
CharcoalNeutral color - #1E1E1E

Palette Colors

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

Main (Brand) Colors

This triadic palette balances a vivid orange with a deep navy and a soft verde green to create a memorable and visually striking brand identity. Each main color holds strong individual recognition while playing off each other to generate energetic harmony.

PrimaryOrange

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

Orange energizes the brand, conveying creativity and enthusiasm while serving as the primary visual anchor for logos and calls to action.

HEX#FF6A00
RGB255, 106, 0
HSL25, 100, 50
CMYK0, 58, 100, 0
SecondaryNavy

RolesHeadline, Btn Secondary Bg

Navy offers a deep, trustworthy contrast to orange, grounding the palette with professionalism and clarity for headlines.

HEX#0B3D91
RGB11, 61, 145
HSL218, 86, 31
CMYK92, 58, 0, 43
TertiaryVerde Green

RolesIcon, Border, Divider, Outline

Verde Green provides a calm, natural accent that complements both orange and navy, adding depth and refinement to interface elements.

HEX#4A7C59
RGB74, 124, 89
HSL138, 25, 39
CMYK40, 0, 28, 51

Support Colors

The support colors offer muted, earthy tones that subtly enhance the main palette without overwhelming it, improving usability and extending visual harmony for UI details and secondary accents.

Sage

Sage adds a softer green tone that complements Verde Green by reinforcing natural balance and easing visual transitions.

HEX#A9B8A0
RGB169, 184, 160
HSL98, 14, 67
CMYK8, 0, 13, 28
Slate Blue

Slate Blue supports Navy by introducing a muted blue shade that softens edges and details, helping maintain understated sophistication.

HEX#53687E
RGB83, 104, 126
HSL211, 21, 41
CMYK34, 17, 0, 51

Neutral Colors

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

White

RolesBg Light, Btn Secondary Text

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

RolesBg Dark

HEX#F4F4F4
RGB244, 244, 244
HSL0, 0, 96
CMYK0, 0, 0, 4
Charcoal

RolesText, Btn Primary Text

HEX#1E1E1E
RGB30, 30, 30
HSL0, 0, 12
CMYK0, 0, 0, 88

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-orange: #FF6A00;
  --color-navy: #0B3D91;
  --color-verde-green: #4A7C59;
  --color-sage: #A9B8A0;
  --color-slate-blue: #53687E;
  --color-white: #FFFFFF;
  --color-ivory: #F4F4F4;
  --color-charcoal: #1E1E1E;
}

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: #FF6A00;
  --role-link: #FF6A00;
  --role-btn-primary-bg: #FF6A00;
  --role-btn-outlined-border: #FF6A00;
  --role-btn-outlined-text: #FF6A00;
  --role-headline: #0B3D91;
  --role-btn-secondary-bg: #0B3D91;
  --role-icon: #4A7C59;
  --role-border: #4A7C59;
  --role-divider: #4A7C59;
  --role-outline: #4A7C59;
  --role-bg-light: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F4F4F4;
  --role-text: #1E1E1E;
  --role-btn-primary-text: #1E1E1E;
}

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.
{
    "orange": "#FF6A00",
    "navy": "#0B3D91",
    "verde-green": "#4A7C59",
    "sage": "#A9B8A0",
    "slate-blue": "#53687E",
    "white": "#FFFFFF",
    "ivory": "#F4F4F4",
    "charcoal": "#1E1E1E"
}
Press Space to load new palette