Emerald Current#2A8C5A
Mint Pulse#72D98C
Lime Veil#CBEFA1
Forest Undertone#1F5E3B
Moss Frame#4C7A49
Palette direction

Verdant Stripe Creative Color Palette

This palette translates the image’s fresh green banding into a more strategic brand system with crisp, botanical energy and strong digital usability. The combination feels lively but controlled, making it suitable for a brand that wants to signal growth, clarity, and modern confidence.

AnalogousCreativeverdantgreenbotanicalfresh
palette-preview.example
Creative color direction

Verdant Stripe Creative Color Palette

This palette translates the image’s fresh green banding into a more strategic brand system with crisp, botanical energy and strong digital usability. The combination feels lively but controlled, making it suitable for a brand that wants to signal growth, clarity, and modern confidence.

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 Deep Charcoal #101712on Lime Veil #CBEFA114.2:1 Excellent
Logo Deep Charcoal #101712on Mint Pulse #72D98C10.4:1 Excellent
Logo Deep Charcoal #101712on Pure White #FFFFFF18.2:1 Excellent
Logo Pure White #FFFFFFon Deep Charcoal #10171218.2:1 Excellent
Icon color
BackgroundMint Pulse#72D98CTextDeep Charcoal#101712
Primary Button10.42:1
AAA

Best for the main action users should notice first.

BackgroundEmerald Current#2A8C5ATextDeep Charcoal#101712
Secondary Button4.33:1
Large text

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextLime Veil#CBEFA1
Outlined Button1.28:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextMint Pulse#72D98C
Text Button1.75:1
Low

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

Palette composition8 colorsAnalogous color relationship
9:41Verdant Stripe Creative Color Palette Color role balance
Analogous 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.

CVerdant Stripe Creative Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors stay within a tightly related green range, creating a recognizable stripe-like system that feels naturally cohesive. The shifts in depth and brightness give the palette motion without breaking its fresh, organic identity.

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 Current #2A8C5A
HeadlineUsed for main titles and key messages.Lime Veil #CBEFA1
LinkUsed for links and interactive text.Mint Pulse #72D98C

Buttons

Primary Button
BackgroundMint Pulse #72D98C
TextDeep Charcoal #101712
Secondary Button
BackgroundEmerald Current #2A8C5A
TextDeep Charcoal #101712
Outlined Button
BackgroundLime Veil #CBEFA1
TextLime Veil #CBEFA1

Interface

TextDefault readable body text.Deep Charcoal #101712
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Deep Charcoal #101712
IconSmall interface icons and marks.Forest Undertone #1F5E3B
BorderCards, inputs, and component borders.Forest Undertone #1F5E3B
DividerSubtle separators between content.Moss Frame #4C7A49
OutlineFocus rings and emphasis outlines.Moss Frame #4C7A49

Palette Colors

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

Main (Brand) Colors

The main colors stay within a tightly related green range, creating a recognizable stripe-like system that feels naturally cohesive. The shifts in depth and brightness give the palette motion without breaking its fresh, organic identity.

PrimaryEmerald Current

RolesLogo, Btn Secondary Bg

This balanced medium green anchors the brand with a steady, adaptable presence.

HEX#2A8C5A
RGB42, 140, 90
HSL149, 54, 36
CMYK70, 0, 36, 45
SecondaryMint Pulse

RolesLink, Btn Primary Bg

This brighter green adds energy and visibility, making interactive elements feel fresh and immediate.

HEX#72D98C
RGB114, 217, 140
HSL135, 58, 65
CMYK47, 0, 35, 15
TertiaryLime Veil

RolesHeadline, Btn Outlined Border, Btn Outlined Text

This light yellow-green introduces lift and distinctiveness while keeping the palette botanically connected.

HEX#CBEFA1
RGB203, 239, 161
HSL88, 71, 78
CMYK15, 0, 33, 6

Support Colors

The support colors add quiet depth and structure without competing with the main greens. They extend the palette with darker leaf tones that improve hierarchy and bring a more grounded, usable interface feel.

Forest Undertone

RolesIcon, Border

This darker support green strengthens UI structure and adds a grounded counterpoint to the brighter mains.

HEX#1F5E3B
RGB31, 94, 59
HSL147, 50, 25
CMYK67, 0, 37, 63
Moss Frame

RolesDivider, Outline

This muted moss tone softens separations and outlines while preserving the palette’s natural character.

HEX#4C7A49
RGB76, 122, 73
HSL116, 25, 38
CMYK38, 0, 40, 52

Neutral Colors

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

Pure White

RolesBg Light

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Soft Mist
HEX#F5F7F1
RGB245, 247, 241
HSL80, 27, 96
CMYK1, 0, 2, 3
Deep Charcoal

RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text

HEX#101712
RGB16, 23, 18
HSL137, 18, 8
CMYK30, 0, 22, 91

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-current: #2A8C5A;
  --color-mint-pulse: #72D98C;
  --color-lime-veil: #CBEFA1;
  --color-forest-undertone: #1F5E3B;
  --color-moss-frame: #4C7A49;
  --color-pure-white: #FFFFFF;
  --color-soft-mist: #F5F7F1;
  --color-deep-charcoal: #101712;
}

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: #2A8C5A;
  --role-btn-secondary-bg: #2A8C5A;
  --role-link: #72D98C;
  --role-btn-primary-bg: #72D98C;
  --role-headline: #CBEFA1;
  --role-btn-outlined-border: #CBEFA1;
  --role-btn-outlined-text: #CBEFA1;
  --role-icon: #1F5E3B;
  --role-border: #1F5E3B;
  --role-divider: #4C7A49;
  --role-outline: #4C7A49;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #101712;
  --role-text: #101712;
  --role-btn-primary-text: #101712;
  --role-btn-secondary-text: #101712;
}

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-current": "#2A8C5A",
    "mint-pulse": "#72D98C",
    "lime-veil": "#CBEFA1",
    "forest-undertone": "#1F5E3B",
    "moss-frame": "#4C7A49",
    "pure-white": "#FFFFFF",
    "soft-mist": "#F5F7F1",
    "deep-charcoal": "#101712"
}
Press Space to load new palette