Moss Green#84A12F
Sage Mist#DCE7C7
Ivory#F4F6F1
Olive Drab#6F7D5D
Charcoal Green#2F3A2E
Palette direction

Petal Grove Floral Color Palette

This palette translates the bouquet’s fresh green fruit, soft white petals, and deep leaf shadows into a refined floral system. The mix feels clean and natural with enough contrast to work for a contemporary brand that wants elegance without losing vitality.

MonochromaticFashion Beautyfloral palettebotanical brandingfresh neutralssoft green
palette-preview.example
Fashion Beauty color direction

Petal Grove Floral Color Palette

This palette translates the bouquet’s fresh green fruit, soft white petals, and deep leaf shadows into a refined floral system. The mix feels clean and natural with enough contrast to work for a contemporary brand that wants elegance without losing vitality.

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 Raven #171A16on Ivory #F4F6F116.1:1 Excellent
Logo Raven #171A16on Sage Mist #DCE7C713.6:1 Excellent
Logo Raven #171A16on Moss Green #84A12F6.0:1 Strong
Logo White #FFFFFFon Raven #171A1617.6:1 Excellent
Icon color
BackgroundMoss Green#84A12FTextRaven#171A16
Primary Button5.95:1
AA

Best for the main action users should notice first.

BackgroundSage Mist#DCE7C7TextRaven#171A16
Secondary Button13.63:1
AAA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextIvory#F4F6F1
Outlined Button1.09:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextSage Mist#DCE7C7
Text Button1.29:1
Low

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

Palette composition8 colorsMonochromatic color relationship
9:41Petal Grove Floral 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.

CPetal Grove Floral Color PaletteFashion Beauty brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors work together as a soft botanical family, moving from vivid green fruit tones to crisp white bloom tones with a cool leafy anchor. The result feels recognizable, fresh, and natural without becoming overly predictable.

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.Moss Green #84A12F
HeadlineUsed for main titles and key messages.Ivory #F4F6F1
LinkUsed for links and interactive text.Sage Mist #DCE7C7

Buttons

Primary Button
BackgroundMoss Green #84A12F
TextRaven #171A16
Secondary Button
BackgroundSage Mist #DCE7C7
TextRaven #171A16
Outlined Button
BackgroundIvory #F4F6F1
TextIvory #F4F6F1

Interface

TextDefault readable body text.Raven #171A16
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Raven #171A16
IconSmall interface icons and marks.Olive Drab #6F7D5D
BorderCards, inputs, and component borders.Olive Drab #6F7D5D
DividerSubtle separators between content.Charcoal Green #2F3A2E
OutlineFocus rings and emphasis outlines.Charcoal Green #2F3A2E

Palette Colors

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

Main (Brand) Colors

The main colors work together as a soft botanical family, moving from vivid green fruit tones to crisp white bloom tones with a cool leafy anchor. The result feels recognizable, fresh, and natural without becoming overly predictable.

PrimaryMoss Green

RolesLogo, Btn Primary Bg

It brings the bouquet’s lively botanical energy and gives the palette a clear fresh focal point.

HEX#84A12F
RGB132, 161, 47
HSL75, 55, 41
CMYK18, 0, 71, 37
SecondarySage Mist

RolesLink, Btn Secondary Bg

It softens the stronger greens and adds a calm, airy surface color that still feels organic.

HEX#DCE7C7
RGB220, 231, 199
HSL81, 40, 84
CMYK5, 0, 14, 9
TertiaryIvory

RolesBtn Outlined Border, Btn Outlined Text, Headline

It captures the pale petals and provides a bright floral note that keeps the system light and refined.

HEX#F4F6F1
RGB244, 246, 241
HSL84, 22, 95
CMYK1, 0, 2, 4

Support Colors

The support colors extend the palette with grounded leaf and stem tones that add depth without competing with the main floral greens. They help the system feel usable across interfaces by balancing brightness with a natural dark accent.

Olive Drab

RolesIcon, Border

It adds a muted plant-like midpoint that supports structure while staying quiet beside the brighter greens.

HEX#6F7D5D
RGB111, 125, 93
HSL86, 15, 43
CMYK11, 0, 26, 51
Charcoal Green

RolesDivider, Outline

It supplies a deep leafy contrast that strengthens hierarchy and keeps thin UI elements legible.

HEX#2F3A2E
RGB47, 58, 46
HSL115, 12, 20
CMYK19, 0, 21, 77

Neutral Colors

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

White

RolesBg Light

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Snow
HEX#F7F8F5
RGB247, 248, 245
HSL80, 18, 97
CMYK0, 0, 1, 3
Raven

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

HEX#171A16
RGB23, 26, 22
HSL105, 8, 9
CMYK12, 0, 15, 90

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-moss-green: #84A12F;
  --color-sage-mist: #DCE7C7;
  --color-ivory: #F4F6F1;
  --color-olive-drab: #6F7D5D;
  --color-charcoal-green: #2F3A2E;
  --color-white: #FFFFFF;
  --color-snow: #F7F8F5;
  --color-raven: #171A16;
}

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: #84A12F;
  --role-btn-primary-bg: #84A12F;
  --role-link: #DCE7C7;
  --role-btn-secondary-bg: #DCE7C7;
  --role-btn-outlined-border: #F4F6F1;
  --role-btn-outlined-text: #F4F6F1;
  --role-headline: #F4F6F1;
  --role-icon: #6F7D5D;
  --role-border: #6F7D5D;
  --role-divider: #2F3A2E;
  --role-outline: #2F3A2E;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #171A16;
  --role-text: #171A16;
  --role-btn-primary-text: #171A16;
  --role-btn-secondary-text: #171A16;
}

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.
{
    "moss-green": "#84A12F",
    "sage-mist": "#DCE7C7",
    "ivory": "#F4F6F1",
    "olive-drab": "#6F7D5D",
    "charcoal-green": "#2F3A2E",
    "white": "#FFFFFF",
    "snow": "#F7F8F5",
    "raven": "#171A16"
}
Press Space to load new palette