Charcoal#2E2E2E
Ivory#FFFFFF
Mustard#D7A93F
Warm Tan#BFA060
Palette direction

Charcoal Ivory Mustard Color Palette

This palette draws inspiration from the image's high-contrast monochrome scheme with a hint of warmth, combining bold dark tones with soft neutral shades and subtle accents to create a professional yet inviting identity.

MonochromaticCreativecharcoalivorymustardcontrast
palette-preview.example
Creative color direction

Charcoal Ivory Mustard Color Palette

This palette draws inspiration from the image's high-contrast monochrome scheme with a hint of warmth, combining bold dark tones with soft neutral shades and subtle accents to create a professional yet inviting identity.

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 Ebony #1B1B1Bon Ivory #FFFFFF17.2:1 Excellent
Logo Ivory #FFFFFFon Charcoal #2E2E2E13.6:1 Excellent
Logo Ebony #1B1B1Bon Mustard #D7A93F7.9:1 Excellent
Logo Ebony #1B1B1Bon Warm Tan #BFA0606.9:1 Strong
Icon color
BackgroundCharcoal#2E2E2ETextCultured White#F9F9F9
Primary Button12.90:1
AAA

Best for the main action users should notice first.

BackgroundMustard#D7A93FTextEbony#1B1B1B
Secondary Button7.90:1
AAA

Useful for softer choices and secondary paths.

BackgroundCultured White#F9F9F9TextIvory#FFFFFF
Outlined Button1.05:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundCultured White#F9F9F9TextMustard#D7A93F
Text Button2.07:1
Low

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

Palette composition7 colorsMonochromatic color relationship
9:41Charcoal Ivory Mustard Color Palette Color role balance
Monochromatic 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.

CCharcoal Ivory Mustard Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors balance boldness and warmth with a deep charcoal black, a bright ivory, and a muted mustard yellow, forming a triadic harmony that is visually striking and memorable.

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.Charcoal #2E2E2E
HeadlineUsed for main titles and key messages.Mustard #D7A93F
LinkUsed for links and interactive text.Mustard #D7A93F

Buttons

Primary Button
BackgroundCharcoal #2E2E2E
TextCultured White #F9F9F9
Secondary Button
BackgroundMustard #D7A93F
TextEbony #1B1B1B
Outlined Button
BackgroundCharcoal #2E2E2E
TextIvory #FFFFFF

Interface

TextDefault readable body text.Ebony #1B1B1B
Bg LightLight page or section background.Cultured White #F9F9F9
Bg DarkDark page or section background.Outer Space #393939
IconSmall interface icons and marks.Warm Tan #BFA060
BorderCards, inputs, and component borders.Warm Tan #BFA060
DividerSubtle separators between content.Warm Tan #BFA060
OutlineFocus rings and emphasis outlines.Warm Tan #BFA060

Palette Colors

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

Main (Brand) Colors

The main colors balance boldness and warmth with a deep charcoal black, a bright ivory, and a muted mustard yellow, forming a triadic harmony that is visually striking and memorable.

PrimaryCharcoal

RolesLogo, Btn Primary Bg, Btn Outlined Border

Charcoal delivers strong professionalism and depth that anchors the palette with a sleek, modern feel.

HEX#2E2E2E
RGB46, 46, 46
HSL0, 0, 18
CMYK0, 0, 0, 82
SecondaryIvory

RolesBtn Outlined Text

Ivory provides clean brightness and clarity, ensuring maximum readability and contrast against dark backgrounds.

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

RolesBtn Secondary Bg, Headline, Link

Mustard adds a warm, inviting accent that energizes the palette without overwhelming, perfect for highlights and calls to action.

HEX#D7A93F
RGB215, 169, 63
HSL42, 66, 55
CMYK0, 21, 71, 16

Support Colors

The support colors softly extend the palette by introducing subtle warm browns and soft grays that complement and balance the strong main colors.

Warm Tan

RolesIcon, Border, Divider, Outline

Warm Tan complements the mustard by toning down saturation, providing a gentle, grounded support for accents and UI elements.

HEX#BFA060
RGB191, 160, 96
HSL40, 43, 56
CMYK0, 16, 50, 25

Neutral Colors

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

Cultured White

RolesBg Light, Btn Primary Text

HEX#F9F9F9
RGB249, 249, 249
HSL0, 0, 98
CMYK0, 0, 0, 2
Outer Space

RolesBg Dark

HEX#393939
RGB57, 57, 57
HSL0, 0, 22
CMYK0, 0, 0, 78
Ebony

RolesText, Btn Secondary Text

HEX#1B1B1B
RGB27, 27, 27
HSL0, 0, 11
CMYK0, 0, 0, 89

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-charcoal: #2E2E2E;
  --color-ivory: #FFFFFF;
  --color-mustard: #D7A93F;
  --color-warm-tan: #BFA060;
  --color-cultured-white: #F9F9F9;
  --color-outer-space: #393939;
  --color-ebony: #1B1B1B;
}

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: #2E2E2E;
  --role-btn-primary-bg: #2E2E2E;
  --role-btn-outlined-border: #2E2E2E;
  --role-btn-outlined-text: #FFFFFF;
  --role-btn-secondary-bg: #D7A93F;
  --role-headline: #D7A93F;
  --role-link: #D7A93F;
  --role-icon: #BFA060;
  --role-border: #BFA060;
  --role-divider: #BFA060;
  --role-outline: #BFA060;
  --role-bg-light: #F9F9F9;
  --role-btn-primary-text: #F9F9F9;
  --role-bg-dark: #393939;
  --role-text: #1B1B1B;
  --role-btn-secondary-text: #1B1B1B;
}

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.
{
    "charcoal": "#2E2E2E",
    "ivory": "#FFFFFF",
    "mustard": "#D7A93F",
    "warm-tan": "#BFA060",
    "cultured-white": "#F9F9F9",
    "outer-space": "#393939",
    "ebony": "#1B1B1B"
}
Press Space to load new palette