Emerald#1B5830
Charcoal#2B2B2B
White#FFFFFF
Dark Teal#205B43
Olive Green#56714E
Palette direction

Emerald Charcoal Cream Color Palette

This palette blends deep emerald green with cool charcoal and soft warm cream neutrals, evoking a sense of modern sophistication and dynamic energy inspired by the image's geometric and shadowed green elements. The main colors provide boldness and recognition, while the support colors extend depth and subtle contrast for interface elements, grounded by balanced neutrals for text and backgrounds.

MonochromaticTechemerald greencharcoal graycream whitetech
palette-preview.example
Tech color direction

Emerald Charcoal Cream Color Palette

This palette blends deep emerald green with cool charcoal and soft warm cream neutrals, evoking a sense of modern sophistication and dynamic energy inspired by the image's geometric and shadowed green elements. The main colors provide boldness and recognition, while the support colors extend depth and subtle contrast for interface elements, grounded by balanced neutrals for text and backgrounds.

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 Eerie Black #121212on White #FFFFFF18.7:1 Excellent
Logo White #FFFFFFon Charcoal #2B2B2B14.2:1 Excellent
Logo White #FFFFFFon Olive Green #56714E5.4:1 Strong
Icon color
BackgroundEmerald#1B5830TextCultured#F4F4F2
Primary Button7.67:1
AAA

Best for the main action users should notice first.

BackgroundCharcoal#2B2B2BTextCultured#F4F4F2
Secondary Button12.86:1
AAA

Useful for softer choices and secondary paths.

BackgroundCultured#F4F4F2TextEmerald#1B5830
Outlined Button7.67:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundCultured#F4F4F2TextEmerald#1B5830
Text Button7.67:1
AAA

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

Palette composition8 colorsMonochromatic color relationship
9:41Emerald Charcoal Cream 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.

CEmerald Charcoal Cream Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine the vibrant deep green with strong charcoal gray and a crisp white to create a distinctive triadic-like system that balances energy with neutral strength for brand recognition.

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.Emerald #1B5830
HeadlineUsed for main titles and key messages.Emerald #1B5830
LinkUsed for links and interactive text.Emerald #1B5830

Buttons

Primary Button
BackgroundEmerald #1B5830
TextCultured #F4F4F2
Secondary Button
BackgroundCharcoal #2B2B2B
TextCultured #F4F4F2
Outlined Button
BackgroundEmerald #1B5830
TextEmerald #1B5830

Interface

TextDefault readable body text.Eerie Black #121212
Bg LightLight page or section background.Cultured #F4F4F2
Bg DarkDark page or section background.Onyx #262626
IconSmall interface icons and marks.Dark Teal #205B43
BorderCards, inputs, and component borders.Dark Teal #205B43
DividerSubtle separators between content.Dark Teal #205B43
OutlineFocus rings and emphasis outlines.Dark Teal #205B43

Palette Colors

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

Main (Brand) Colors

The main colors combine the vibrant deep green with strong charcoal gray and a crisp white to create a distinctive triadic-like system that balances energy with neutral strength for brand recognition.

PrimaryEmerald

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

Emerald green delivers a bold, trustworthy, and innovative emotion that anchors the brand with depth and vitality.

HEX#1B5830
RGB27, 88, 48
HSL141, 53, 23
CMYK69, 0, 45, 65
SecondaryCharcoal

RolesBtn Secondary Bg

Charcoal brings a modern, strong, and professional tone, providing a solid contrast that complements the green without overpowering.

HEX#2B2B2B
RGB43, 43, 43
HSL0, 0, 17
CMYK0, 0, 0, 83
TertiaryWhite

White offers clarity and clean contrast especially for text, ensuring readability and a fresh visual break from heavier hues.

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

Support Colors

Support colors soften and enhance the main palette by introducing muted dark teal and a medium olive green, providing subtle highlights and balance without competing with the main colors.

Dark Teal

RolesIcon, Border, Divider, Outline

Dark teal acts as a muted accent, reinforcing the emerald without overwhelming, perfect for icons and borders.

HEX#205B43
RGB32, 91, 67
HSL156, 48, 24
CMYK65, 0, 26, 64
Olive Green

Olive green provides a natural, subdued counterpoint that adds depth and warmth to the palette's cooler greens.

HEX#56714E
RGB86, 113, 78
HSL106, 18, 37
CMYK24, 0, 31, 56

Neutral Colors

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

Cultured

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#F4F4F2
RGB244, 244, 242
HSL60, 8, 95
CMYK0, 0, 1, 4
Eerie Black

RolesText

HEX#121212
RGB18, 18, 18
HSL0, 0, 7
CMYK0, 0, 0, 93
Onyx

RolesBg Dark

HEX#262626
RGB38, 38, 38
HSL0, 0, 15
CMYK0, 0, 0, 85

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-emerald: #1B5830;
  --color-charcoal: #2B2B2B;
  --color-white: #FFFFFF;
  --color-dark-teal: #205B43;
  --color-olive-green: #56714E;
  --color-cultured: #F4F4F2;
  --color-eerie-black: #121212;
  --color-onyx: #262626;
}

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: #1B5830;
  --role-link: #1B5830;
  --role-btn-primary-bg: #1B5830;
  --role-btn-outlined-border: #1B5830;
  --role-btn-outlined-text: #1B5830;
  --role-headline: #1B5830;
  --role-btn-secondary-bg: #2B2B2B;
  --role-icon: #205B43;
  --role-border: #205B43;
  --role-divider: #205B43;
  --role-outline: #205B43;
  --role-bg-light: #F4F4F2;
  --role-btn-primary-text: #F4F4F2;
  --role-btn-secondary-text: #F4F4F2;
  --role-text: #121212;
  --role-bg-dark: #262626;
}

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.
{
    "emerald": "#1B5830",
    "charcoal": "#2B2B2B",
    "white": "#FFFFFF",
    "dark-teal": "#205B43",
    "olive-green": "#56714E",
    "cultured": "#F4F4F2",
    "eerie-black": "#121212",
    "onyx": "#262626"
}
Press Space to load new palette