Lime Green#8AC926
Olive Green#6A994E
Charcoal Blue#212F45
Sage#B7C68B
Pale Mint#D9EAD3
Palette direction

Vibrant Green Growth Color Palette

This palette is inspired by the rich greens and dark contrasts found in the uploaded image, creating a vibrant yet balanced system that evokes freshness, growth, and clarity. The main colors reflect the lively green hues and natural tones, providing a visually striking and memorable identity. Support colors add depth and subtlety, grounding the palette and enhancing usability without overpowering the main colors. The neutrals ensure strong readability and balance for text and backgrounds across digital interfaces.

CustomTechgreenvibrantnaturegrowth
palette-preview.example
Tech color direction

Vibrant Green Growth Color Palette

This palette is inspired by the rich greens and dark contrasts found in the uploaded image, creating a vibrant yet balanced system that evokes freshness, growth, and clarity. The main colors reflect the lively green hues and natural tones, providing a visually striking and memorable identity. Support colors add depth and subtlety, grounding the palette and enhancing usability without overpowering the main colors. The neutrals ensure strong readability and balance for text and backgrounds across digital interfaces.

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 Charcoal Blue #212F4513.5:1 Excellent
Logo Rich Black #121212on Lime Green #8AC9269.3:1 Excellent
Logo Rich Black #121212on Olive Green #6A994E5.6:1 Strong
Logo Rich Black #121212on White #FFFFFF18.7:1 Excellent
Icon color
BackgroundLime Green#8AC926TextRich Black#121212
Primary Button9.33:1
AAA

Best for the main action users should notice first.

BackgroundOlive Green#6A994ETextRich Black#121212
Secondary Button5.60:1
AA

Useful for softer choices and secondary paths.

BackgroundPale Mint#D9EAD3TextOlive Green#6A994E
Outlined Button2.65:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPale Mint#D9EAD3TextLime Green#8AC926
Text Button1.59:1
Low

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

Palette composition8 colorsCustom color relationship
9:41Vibrant Green Growth Color Palette Color role balance
Custom 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.

CVibrant Green Growth Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The palette utilizes an analogous scheme of vibrant and deep green hues combined with dark charcoal to create harmony and visual recognition, perfectly representing natural growth and innovation.

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.Lime Green #8AC926
HeadlineUsed for main titles and key messages.Charcoal Blue #212F45
LinkUsed for links and interactive text.Lime Green #8AC926

Buttons

Primary Button
BackgroundLime Green #8AC926
TextRich Black #121212
Secondary Button
BackgroundOlive Green #6A994E
TextRich Black #121212
Outlined Button
BackgroundOlive Green #6A994E
TextOlive Green #6A994E

Interface

TextDefault readable body text.Rich Black #121212
Bg LightLight page or section background.Pale Mint #D9EAD3
Bg DarkDark page or section background.Alabaster #F0F0F0
IconSmall interface icons and marks.Sage #B7C68B
BorderCards, inputs, and component borders.Sage #B7C68B
DividerSubtle separators between content.Sage #B7C68B
OutlineFocus rings and emphasis outlines.Sage #B7C68B

Palette Colors

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

Main (Brand) Colors

The palette utilizes an analogous scheme of vibrant and deep green hues combined with dark charcoal to create harmony and visual recognition, perfectly representing natural growth and innovation.

PrimaryLime Green

RolesLogo, Link, Btn Primary Bg

Lime Green energizes the brand with a fresh, vibrant tone that symbolizes growth and innovation.

HEX#8AC926
RGB138, 201, 38
HSL83, 68, 47
CMYK31, 0, 81, 21
SecondaryOlive Green

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Olive Green provides a grounded, natural balance to the brighter lime while maintaining visual harmony and depth.

HEX#6A994E
RGB106, 153, 78
HSL98, 32, 45
CMYK31, 0, 49, 40
TertiaryCharcoal Blue

RolesHeadline

Charcoal Blue introduces a cool, dark accent that reinforces professionalism and contrasts well with the greens.

HEX#212F45
RGB33, 47, 69
HSL217, 35, 20
CMYK52, 32, 0, 73

Support Colors

Accent colors extend the main palette with softer natural tones and a light highlight, complementing the greens and adding usability and subtlety.

Sage

RolesIcon, Border, Divider, Outline

Sage serves as a muted, harmonious accent that blends naturally with the main greens and enhances visual structure.

HEX#B7C68B
RGB183, 198, 139
HSL75, 34, 66
CMYK8, 0, 30, 22
Pale Mint

RolesBg Light

Pale Mint provides a gentle, near-white background that supports readability and a fresh interface feel.

HEX#D9EAD3
RGB217, 234, 211
HSL104, 35, 87
CMYK7, 0, 10, 8

Neutral Colors

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

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

RolesBg Dark

HEX#F0F0F0
RGB240, 240, 240
HSL0, 0, 94
CMYK0, 0, 0, 6
Rich Black

RolesText, Btn Primary Text, Btn Secondary Text

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

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-lime-green: #8AC926;
  --color-olive-green: #6A994E;
  --color-charcoal-blue: #212F45;
  --color-sage: #B7C68B;
  --color-pale-mint: #D9EAD3;
  --color-white: #FFFFFF;
  --color-alabaster: #F0F0F0;
  --color-rich-black: #121212;
}

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: #8AC926;
  --role-link: #8AC926;
  --role-btn-primary-bg: #8AC926;
  --role-btn-secondary-bg: #6A994E;
  --role-btn-outlined-border: #6A994E;
  --role-btn-outlined-text: #6A994E;
  --role-headline: #212F45;
  --role-icon: #B7C68B;
  --role-border: #B7C68B;
  --role-divider: #B7C68B;
  --role-outline: #B7C68B;
  --role-bg-light: #D9EAD3;
  --role-bg-dark: #F0F0F0;
  --role-text: #121212;
  --role-btn-primary-text: #121212;
  --role-btn-secondary-text: #121212;
}

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.
{
    "lime-green": "#8AC926",
    "olive-green": "#6A994E",
    "charcoal-blue": "#212F45",
    "sage": "#B7C68B",
    "pale-mint": "#D9EAD3",
    "white": "#FFFFFF",
    "alabaster": "#F0F0F0",
    "rich-black": "#121212"
}
Press Space to load new palette