Golden Yellow#F5C900
Forest Green#2D5129
Sage Green#8CA67C
Warm Sand#D8D3B6
Palette direction

Yellow Green Contrast Color Palette

This palette draws inspiration from the sharp contrast and vibrant yellow in the logo against a blurred neutral background, creating a fresh, engaging brand identity. The main colors balance energizing yellow with deep green tones for strong brand recognition, while support colors add subtle earthiness and balance. The neutrals provide clean usability for backgrounds, text, and interface elements, maintaining clarity and hierarchy.

AnalogousTechyellowgreencontrasttech
palette-preview.example
Tech color direction

Yellow Green Contrast Color Palette

This palette draws inspiration from the sharp contrast and vibrant yellow in the logo against a blurred neutral background, creating a fresh, engaging brand identity. The main colors balance energizing yellow with deep green tones for strong brand recognition, while support colors add subtle earthiness and balance. The neutrals provide clean usability for backgrounds, text, and interface elements, maintaining clarity and hierarchy.

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 Charcoal Black #1B1B1Bon Golden Yellow #F5C90010.9:1 Excellent
Logo Pure White #FFFFFFon Forest Green #2D51299.0:1 Excellent
Logo Charcoal Black #1B1B1Bon Pure White #FFFFFF17.2:1 Excellent
Logo Charcoal Black #1B1B1Bon Warm Sand #D8D3B611.4:1 Excellent
Icon color
BackgroundGolden Yellow#F5C900TextCharcoal Black#1B1B1B
Primary Button10.86:1
AAA

Best for the main action users should notice first.

BackgroundForest Green#2D5129TextPure White#FFFFFF
Secondary Button9.05:1
AAA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextForest Green#2D5129
Outlined Button9.05:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextGolden Yellow#F5C900
Text Button1.59:1
Low

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

Palette composition7 colorsAnalogous color relationship
9:41Yellow Green Contrast 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.

CYellow Green Contrast Color PaletteTech 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.Golden Yellow #F5C900
HeadlineUsed for main titles and key messages.Forest Green #2D5129
LinkUsed for links and interactive text.Golden Yellow #F5C900

Buttons

Primary Button
BackgroundGolden Yellow #F5C900
TextCharcoal Black #1B1B1B
Secondary Button
BackgroundForest Green #2D5129
TextPure White #FFFFFF
Outlined Button
BackgroundForest Green #2D5129
TextForest Green #2D5129

Interface

TextDefault readable body text.Charcoal Black #1B1B1B
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Ivory #F7F6F2
IconSmall interface icons and marks.Sage Green #8CA67C
BorderCards, inputs, and component borders.Sage Green #8CA67C
DividerSubtle separators between content.Sage Green #8CA67C
OutlineFocus rings and emphasis outlines.Sage Green #8CA67C

Palette Colors

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

Main (Brand) Colors

The main colors combine a vivid yellow with a deep green to create a visually distinct and recognizable color system reflecting energy and trust.

PrimaryGolden Yellow

RolesLogo, Btn Primary Bg, Link

Golden Yellow evokes energy and optimism, making it an ideal primary color for drawing attention and fostering positivity.

HEX#F5C900
RGB245, 201, 0
HSL49, 100, 48
CMYK0, 18, 100, 4
SecondaryForest Green

RolesBtn Outlined Border, Btn Outlined Text, Headline, Btn Secondary Bg

Forest Green offers stability and trust, balancing the brightness of yellow with a calm, deep hue.

HEX#2D5129
RGB45, 81, 41
HSL114, 33, 24
CMYK44, 0, 49, 68

Support Colors

Support colors extend the main palette with muted, earthy tones that quiet the vibrancy while reinforcing natural balance and usability.

Sage Green

RolesIcon, Border, Divider, Outline

Sage Green provides a softer, grounded complement to the stronger greens, enhancing visual hierarchy without overwhelming.

HEX#8CA67C
RGB140, 166, 124
HSL97, 19, 57
CMYK16, 0, 25, 35
Warm Sand

Warm Sand adds warmth and subtle contrast to support the main colors, ideal for headlines or accents that require softness.

HEX#D8D3B6
RGB216, 211, 182
HSL51, 30, 78
CMYK0, 2, 16, 15

Neutral Colors

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

Pure White

RolesBg Light, Btn Secondary Text

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

RolesBg Dark

HEX#F7F6F2
RGB247, 246, 242
HSL48, 24, 96
CMYK0, 0, 2, 3
Charcoal Black

RolesText, Btn Primary Text

HEX#1B1B1B
RGB27, 27, 27
HSL0, 0, 11
CMYK0, 0, 0, 89

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-golden-yellow: #F5C900;
  --color-forest-green: #2D5129;
  --color-sage-green: #8CA67C;
  --color-warm-sand: #D8D3B6;
  --color-pure-white: #FFFFFF;
  --color-ivory: #F7F6F2;
  --color-charcoal-black: #1B1B1B;
}

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: #F5C900;
  --role-btn-primary-bg: #F5C900;
  --role-link: #F5C900;
  --role-btn-outlined-border: #2D5129;
  --role-btn-outlined-text: #2D5129;
  --role-headline: #2D5129;
  --role-btn-secondary-bg: #2D5129;
  --role-icon: #8CA67C;
  --role-border: #8CA67C;
  --role-divider: #8CA67C;
  --role-outline: #8CA67C;
  --role-bg-light: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F7F6F2;
  --role-text: #1B1B1B;
  --role-btn-primary-text: #1B1B1B;
}

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.
{
    "golden-yellow": "#F5C900",
    "forest-green": "#2D5129",
    "sage-green": "#8CA67C",
    "warm-sand": "#D8D3B6",
    "pure-white": "#FFFFFF",
    "ivory": "#F7F6F2",
    "charcoal-black": "#1B1B1B"
}
Press Space to load new palette