Fern Green#3D9970
Goldenrod#DAA520
Sage#A3B18A
Warm Taupe#998675
Palette direction

Fern Gold Solarpunk Color Palette

This palette blends vibrant green and warm gold to evoke the solarpunk ethos of harmony with nature and sustainable energy, balanced by soft earth-tone accents and structured neutrals for a welcoming and trustworthy furry marketplace identity.

CustomEcommercegreengoldsolarpunkfurry
palette-preview.example
Ecommerce color direction

Fern Gold Solarpunk Color Palette

This palette blends vibrant green and warm gold to evoke the solarpunk ethos of harmony with nature and sustainable energy, balanced by soft earth-tone accents and structured neutrals for a welcoming and trustworthy furry marketplace identity.

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 #2B2B2Bon Goldenrod #DAA5206.3:1 Strong
Logo Charcoal #2B2B2Bon Pure White #FFFFFF14.2:1 Excellent
Logo Pure White #FFFFFFon Charcoal #2B2B2B14.2:1 Excellent
Logo Charcoal #2B2B2Bon Sage #A3B18A6.2:1 Strong
Icon color
BackgroundFern Green#3D9970TextCharcoal#2B2B2B
Primary Button4.04:1
Large text

Best for the main action users should notice first.

BackgroundGoldenrod#DAA520TextCharcoal#2B2B2B
Secondary Button6.33:1
AA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextFern Green#3D9970
Outlined Button3.51:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextFern Green#3D9970
Text Button3.51:1
Large text

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

Palette composition7 colorsCustom color relationship
9:41Fern Gold Solarpunk 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.

CFern Gold Solarpunk Color PaletteEcommerce brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors of vibrant fern green and warm goldenrod create a lively yet balanced complementary contrast that symbolizes growth and sustainable energy, forming a recognizable and vibrant visual system.

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.Fern Green #3D9970
HeadlineUsed for main titles and key messages.Goldenrod #DAA520
LinkUsed for links and interactive text.Fern Green #3D9970

Buttons

Primary Button
BackgroundFern Green #3D9970
TextCharcoal #2B2B2B
Secondary Button
BackgroundGoldenrod #DAA520
TextCharcoal #2B2B2B
Outlined Button
BackgroundFern Green #3D9970
TextFern Green #3D9970

Interface

TextDefault readable body text.Charcoal #2B2B2B
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Snow #F5F5F5
IconSmall interface icons and marks.Sage #A3B18A
BorderCards, inputs, and component borders.Sage #A3B18A
DividerSubtle separators between content.Sage #A3B18A
OutlineFocus rings and emphasis outlines.Sage #A3B18A

Palette Colors

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

Main (Brand) Colors

The main colors of vibrant fern green and warm goldenrod create a lively yet balanced complementary contrast that symbolizes growth and sustainable energy, forming a recognizable and vibrant visual system.

PrimaryFern Green

RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text

Fern Green evokes lush foliage and growth, reinforcing the eco-conscious and organic feel central to solarpunk values and the furry community's connection with nature.

HEX#3D9970
RGB61, 153, 112
HSL153, 43, 42
CMYK60, 0, 27, 40
SecondaryGoldenrod

RolesHeadline, Btn Secondary Bg

Goldenrod adds warmth and energy, symbolizing sunlight and sustainable optimism, making it ideal for headline emphasis to inspire engagement.

HEX#DAA520
RGB218, 165, 32
HSL43, 74, 49
CMYK0, 24, 85, 15

Support Colors

The support colors extend the main palette with gentle earth tones and subtle natural hues that complement and balance the vibrant main colors without overwhelming them.

Sage

RolesIcon, Border, Divider, Outline

Sage provides a muted, soft green that complements Fern Green by introducing softness and calm to interface elements, promoting usability and visual rest.

HEX#A3B18A
RGB163, 177, 138
HSL82, 20, 62
CMYK8, 0, 22, 31
Warm Taupe

Warm Taupe offers a grounded neutral earth tone that balances the brightness of Goldenrod, supporting secondary text and decorative elements.

HEX#998675
RGB153, 134, 117
HSL28, 15, 53
CMYK0, 12, 24, 40

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
Snow

RolesBg Dark

HEX#F5F5F5
RGB245, 245, 245
HSL0, 0, 96
CMYK0, 0, 0, 4
Charcoal

RolesText, Btn Primary Text, Btn Secondary Text

HEX#2B2B2B
RGB43, 43, 43
HSL0, 0, 17
CMYK0, 0, 0, 83

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-fern-green: #3D9970;
  --color-goldenrod: #DAA520;
  --color-sage: #A3B18A;
  --color-warm-taupe: #998675;
  --color-pure-white: #FFFFFF;
  --color-snow: #F5F5F5;
  --color-charcoal: #2B2B2B;
}

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: #3D9970;
  --role-link: #3D9970;
  --role-btn-primary-bg: #3D9970;
  --role-btn-outlined-border: #3D9970;
  --role-btn-outlined-text: #3D9970;
  --role-headline: #DAA520;
  --role-btn-secondary-bg: #DAA520;
  --role-icon: #A3B18A;
  --role-border: #A3B18A;
  --role-divider: #A3B18A;
  --role-outline: #A3B18A;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #F5F5F5;
  --role-text: #2B2B2B;
  --role-btn-primary-text: #2B2B2B;
  --role-btn-secondary-text: #2B2B2B;
}

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.
{
    "fern-green": "#3D9970",
    "goldenrod": "#DAA520",
    "sage": "#A3B18A",
    "warm-taupe": "#998675",
    "pure-white": "#FFFFFF",
    "snow": "#F5F5F5",
    "charcoal": "#2B2B2B"
}
Press Space to load new palette