Forest Green#1B4D3E
Sunflower Yellow#F0B82D
Teal Green#3D9366
Olive Drab#5B6A4F
Moss Green#7CA982
Palette direction

Forest Green Yellow Color Palette

This palette is inspired by the rich, organic greens and the vibrant yellow found on the textured surface of the image, translated into a balanced system with main green hues and warm yellow accents, complemented by subdued earthy tones for depth and neutrality.

CustomCreativegreenyellownaturalorganic
palette-preview.example
Creative color direction

Forest Green Yellow Color Palette

This palette is inspired by the rich, organic greens and the vibrant yellow found on the textured surface of the image, translated into a balanced system with main green hues and warm yellow accents, complemented by subdued earthy tones for depth and neutrality.

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 Pure White #FFFFFFon Forest Green #1B4D3E9.6:1 Excellent
Logo Charcoal #2F2F2Fon Sunflower Yellow #F0B82D7.4:1 Excellent
Logo Charcoal #2F2F2Fon Pure White #FFFFFF13.4:1 Excellent
Logo Pure White #FFFFFFon Olive Drab #5B6A4F5.8:1 Strong
Icon color
BackgroundForest Green#1B4D3ETextPure White#FFFFFF
Primary Button9.64:1
AAA

Best for the main action users should notice first.

BackgroundSunflower Yellow#F0B82DTextCharcoal#2F2F2F
Secondary Button7.39:1
AAA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextSunflower Yellow#F0B82D
Outlined Button1.81:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextSunflower Yellow#F0B82D
Text Button1.81:1
Low

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

Palette composition8 colorsCustom color relationship
9:41Forest Green Yellow 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.

CForest Green Yellow Color PaletteCreative brand direction ColorFly.design
Strategic palette preview

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.Forest Green #1B4D3E
HeadlineUsed for main titles and key messages.Teal Green #3D9366
LinkUsed for links and interactive text.Sunflower Yellow #F0B82D

Buttons

Primary Button
BackgroundForest Green #1B4D3E
TextPure White #FFFFFF
Secondary Button
BackgroundSunflower Yellow #F0B82D
TextCharcoal #2F2F2F
Outlined Button
BackgroundSunflower Yellow #F0B82D
TextSunflower Yellow #F0B82D

Interface

TextDefault readable body text.Charcoal #2F2F2F
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Light Gray #F7F7F7
IconSmall interface icons and marks.Olive Drab #5B6A4F
BorderCards, inputs, and component borders.Olive Drab #5B6A4F
DividerSubtle separators between content.Olive Drab #5B6A4F
OutlineFocus rings and emphasis outlines.Olive Drab #5B6A4F

Palette Colors

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

Main (Brand) Colors

The main colors combine deep forest greens with a striking sunflower yellow to create a vivid, memorable contrast while maintaining a natural feel.

PrimaryForest Green

RolesLogo, Btn Primary Bg

Forest Green provides a strong, natural presence that evokes growth and stability.

HEX#1B4D3E
RGB27, 77, 62
HSL162, 48, 20
CMYK65, 0, 19, 70
SecondarySunflower Yellow

RolesLink, Btn Outlined Border, Btn Outlined Text, Btn Secondary Bg

Sunflower Yellow adds energetic warmth and vitality that contrasts sharply with the deep greens.

HEX#F0B82D
RGB240, 184, 45
HSL43, 87, 56
CMYK0, 23, 81, 6
TertiaryTeal Green

RolesHeadline

Teal Green extends the green spectrum with a softer, cooler tone ideal for headlines and highlights.

HEX#3D9366
RGB61, 147, 102
HSL149, 41, 41
CMYK59, 0, 31, 42

Support Colors

These support colors extend the natural palette with muted earthy dark olive and fresh moss green, balancing the vivid main colors for usability.

Olive Drab

RolesIcon, Border, Divider, Outline

Olive Drab complements the darker greens by providing an earthy anchor for interface elements.

HEX#5B6A4F
RGB91, 106, 79
HSL93, 15, 36
CMYK14, 0, 25, 58
Moss Green

Moss Green offers a fresh, subdued green that balances the intense Sunflower Yellow and Forest Green.

HEX#7CA982
RGB124, 169, 130
HSL128, 21, 57
CMYK27, 0, 23, 34

Neutral Colors

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

Pure White

RolesBg Light, Btn Primary Text

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

RolesBg Dark

HEX#F7F7F7
RGB247, 247, 247
HSL0, 0, 97
CMYK0, 0, 0, 3
Charcoal

RolesText, Btn Secondary Text

HEX#2F2F2F
RGB47, 47, 47
HSL0, 0, 18
CMYK0, 0, 0, 82

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-forest-green: #1B4D3E;
  --color-sunflower-yellow: #F0B82D;
  --color-teal-green: #3D9366;
  --color-olive-drab: #5B6A4F;
  --color-moss-green: #7CA982;
  --color-pure-white: #FFFFFF;
  --color-light-gray: #F7F7F7;
  --color-charcoal: #2F2F2F;
}

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: #1B4D3E;
  --role-btn-primary-bg: #1B4D3E;
  --role-link: #F0B82D;
  --role-btn-outlined-border: #F0B82D;
  --role-btn-outlined-text: #F0B82D;
  --role-btn-secondary-bg: #F0B82D;
  --role-headline: #3D9366;
  --role-icon: #5B6A4F;
  --role-border: #5B6A4F;
  --role-divider: #5B6A4F;
  --role-outline: #5B6A4F;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #F7F7F7;
  --role-text: #2F2F2F;
  --role-btn-secondary-text: #2F2F2F;
}

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.
{
    "forest-green": "#1B4D3E",
    "sunflower-yellow": "#F0B82D",
    "teal-green": "#3D9366",
    "olive-drab": "#5B6A4F",
    "moss-green": "#7CA982",
    "pure-white": "#FFFFFF",
    "light-gray": "#F7F7F7",
    "charcoal": "#2F2F2F"
}
Press Space to load new palette