Ink Navy#10263D
Antique Gold#B08A57
Pearl Gray#D8D4CC
Mist Slate#6F7B82
Soft Sand#CBB89D
Palette direction

Ink Navy Antique Color Palette

This palette pairs a deep Ink Navy with warm Antique Gold and soft Pearl Gray to create a restrained luxury system that feels polished rather than ornate. The contrast between the cool dark anchor and the muted metallic accent gives the brand a premium presence while keeping the interface calm and minimal.

ComplementaryLuxury And Lifestyleluxuryminimalisticpremiumelegant
palette-preview.example
Luxury And Lifestyle color direction

Ink Navy Antique Color Palette

This palette pairs a deep Ink Navy with warm Antique Gold and soft Pearl Gray to create a restrained luxury system that feels polished rather than ornate. The contrast between the cool dark anchor and the muted metallic accent gives the brand a premium presence while keeping the interface calm and minimal.

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 Ink Navy #10263D15.4:1 Excellent
Logo Charcoal #141414on Pearl Gray #D8D4CC12.5:1 Excellent
Logo Charcoal #141414on Antique Gold #B08A575.8:1 Strong
Logo Charcoal #141414on White #FFFFFF18.4:1 Excellent
Icon color
BackgroundInk Navy#10263DTextWhite#FFFFFF
Primary Button15.37:1
AAA

Best for the main action users should notice first.

BackgroundAntique Gold#B08A57TextCharcoal#141414
Secondary Button5.81:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextPearl Gray#D8D4CC
Outlined Button1.48:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextAntique Gold#B08A57
Text Button3.17:1
Large text

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

Palette composition8 colorsComplementary color relationship
9:41Ink Navy Antique Color Palette Color role balance
Complementary 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.

CInk Navy Antique Color PaletteLuxury And Lifestyle brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

Ink Navy and Antique Gold create a classic luxury contrast that feels distinctive without becoming loud. Pearl Gray softens the relationship so the system stays minimal, balanced, and easy to use across brand and UI touchpoints.

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.Ink Navy #10263D
HeadlineUsed for main titles and key messages.Ink Navy #10263D
LinkUsed for links and interactive text.Antique Gold #B08A57

Buttons

Primary Button
BackgroundInk Navy #10263D
TextWhite #FFFFFF
Secondary Button
BackgroundAntique Gold #B08A57
TextCharcoal #141414
Outlined Button
BackgroundAntique Gold #B08A57
TextPearl Gray #D8D4CC

Interface

TextDefault readable body text.Charcoal #141414
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Charcoal #141414
IconSmall interface icons and marks.Mist Slate #6F7B82
BorderCards, inputs, and component borders.Mist Slate #6F7B82
DividerSubtle separators between content.Soft Sand #CBB89D
OutlineFocus rings and emphasis outlines.Soft Sand #CBB89D

Palette Colors

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

Main (Brand) Colors

Ink Navy and Antique Gold create a classic luxury contrast that feels distinctive without becoming loud. Pearl Gray softens the relationship so the system stays minimal, balanced, and easy to use across brand and UI touchpoints.

PrimaryInk Navy

RolesLogo, Btn Primary Bg, Headline

Ink Navy provides the deep, authoritative base that makes the brand feel composed and premium.

HEX#10263D
RGB16, 38, 61
HSL211, 58, 15
CMYK74, 38, 0, 76
SecondaryAntique Gold

RolesLink, Btn Secondary Bg, Btn Outlined Border

Antique Gold adds a quiet metallic warmth that signals quality and gives the palette its luxury accent.

HEX#B08A57
RGB176, 138, 87
HSL34, 36, 52
CMYK0, 22, 51, 31
TertiaryPearl Gray

RolesBtn Outlined Text

Pearl Gray supports the system with a soft, luminous neutral that keeps outlined treatments understated and elegant.

HEX#D8D4CC
RGB216, 212, 204
HSL40, 13, 82
CMYK0, 2, 6, 15

Support Colors

These muted accents extend the palette with subtle surface and support tones that maintain the same refined temperature and prevent the system from feeling too stark. They stay deliberately secondary to the main colors while improving versatility for interface details.

Mist Slate

RolesIcon, Border

Mist Slate bridges the dark navy and light neutrals with a cool, restrained middle tone for icons and structural UI elements.

HEX#6F7B82
RGB111, 123, 130
HSL202, 8, 47
CMYK15, 5, 0, 49
Soft Sand

RolesDivider, Outline

Soft Sand introduces a gentle warm boundary color that complements the gold without competing with it.

HEX#CBB89D
RGB203, 184, 157
HSL35, 31, 71
CMYK0, 9, 23, 20

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
Ivory
HEX#F5F1EA
RGB245, 241, 234
HSL38, 35, 94
CMYK0, 2, 4, 4
Charcoal

RolesBg Dark, Text, Btn Secondary Text

HEX#141414
RGB20, 20, 20
HSL0, 0, 8
CMYK0, 0, 0, 92

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-ink-navy: #10263D;
  --color-antique-gold: #B08A57;
  --color-pearl-gray: #D8D4CC;
  --color-mist-slate: #6F7B82;
  --color-soft-sand: #CBB89D;
  --color-white: #FFFFFF;
  --color-ivory: #F5F1EA;
  --color-charcoal: #141414;
}

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: #10263D;
  --role-btn-primary-bg: #10263D;
  --role-headline: #10263D;
  --role-link: #B08A57;
  --role-btn-secondary-bg: #B08A57;
  --role-btn-outlined-border: #B08A57;
  --role-btn-outlined-text: #D8D4CC;
  --role-icon: #6F7B82;
  --role-border: #6F7B82;
  --role-divider: #CBB89D;
  --role-outline: #CBB89D;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #141414;
  --role-text: #141414;
  --role-btn-secondary-text: #141414;
}

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.
{
    "ink-navy": "#10263D",
    "antique-gold": "#B08A57",
    "pearl-gray": "#D8D4CC",
    "mist-slate": "#6F7B82",
    "soft-sand": "#CBB89D",
    "white": "#FFFFFF",
    "ivory": "#F5F1EA",
    "charcoal": "#141414"
}
Press Space to load new palette