Crimson#E03060
Olive Green#87B854
Goldenrod#F2B844
Light Rose#D97A99
Moss Green#A4C26B
Palette direction

Happy Berry Playful Color Palette

This palette draws inspiration from the cheerful, playful pink and green tones of the logo, balanced with warm and neutral colors for versatility and readability. The palette conveys joy, freshness, and approachability, ideal for a bright and friendly brand identity.

CustomFood Beveragepinkgreenplayfulfresh
palette-preview.example
Food Beverage color direction

Happy Berry Playful Color Palette

This palette draws inspiration from the cheerful, playful pink and green tones of the logo, balanced with warm and neutral colors for versatility and readability. The palette conveys joy, freshness, and approachability, ideal for a bright and friendly brand 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 #222222on Goldenrod #F2B8448.9:1 Excellent
Logo Charcoal #222222on Olive Green #87B8546.8:1 Strong
Logo Charcoal #222222on Pure White #FFFFFF15.9:1 Excellent
Logo Pure White #FFFFFFon Charcoal #22222215.9:1 Excellent
Icon color
BackgroundCrimson#E03060TextPure White#FFFFFF
Primary Button4.41:1
Large text

Best for the main action users should notice first.

BackgroundOlive Green#87B854TextCharcoal#222222
Secondary Button6.83:1
AA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextOlive Green#87B854
Outlined Button2.33:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextCrimson#E03060
Text Button4.41:1
Large text

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

Palette composition8 colorsCustom color relationship
9:41Happy Berry Playful 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.

CHappy Berry Playful Color PaletteFood Beverage brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine a vivid pink, a fresh green, and a complementary warm yellow-orange, creating a dynamic and recognizable color system that reflects energy and joy.

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.Crimson #E03060
HeadlineUsed for main titles and key messages.Goldenrod #F2B844
LinkUsed for links and interactive text.Crimson #E03060

Buttons

Primary Button
BackgroundCrimson #E03060
TextPure White #FFFFFF
Secondary Button
BackgroundOlive Green #87B854
TextCharcoal #222222
Outlined Button
BackgroundOlive Green #87B854
TextOlive Green #87B854

Interface

TextDefault readable body text.Charcoal #222222
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Snow #F7F7F7
IconSmall interface icons and marks.Light Rose #D97A99
BorderCards, inputs, and component borders.Light Rose #D97A99
DividerSubtle separators between content.Light Rose #D97A99
OutlineFocus rings and emphasis outlines.Light Rose #D97A99

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 pink, a fresh green, and a complementary warm yellow-orange, creating a dynamic and recognizable color system that reflects energy and joy.

PrimaryCrimson

RolesLogo, Link, Btn Primary Bg

Crimson delivers vibrant energy and conveys warmth and excitement to capture attention instantly.

HEX#E03060
RGB224, 48, 96
HSL344, 74, 53
CMYK0, 79, 57, 12
SecondaryOlive Green

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Olive Green brings freshness and a natural vibe that balances the warmth of crimson with a grounded, healthy feel.

HEX#87B854
RGB135, 184, 84
HSL89, 41, 53
CMYK27, 0, 54, 28
TertiaryGoldenrod

RolesHeadline

Goldenrod adds brightness and a sunny accent that complements both crimson and olive green with a cheerful warmth.

HEX#F2B844
RGB242, 184, 68
HSL40, 87, 61
CMYK0, 24, 72, 5

Support Colors

Support colors are softer and muted variations of the main palette hues, reinforcing the fresh and playful character without overpowering the primary colors.

Light Rose

RolesIcon, Border, Divider, Outline

Light Rose softens the palette with a gentle pink tone that supports crimson by reducing visual intensity.

HEX#D97A99
RGB217, 122, 153
HSL340, 56, 66
CMYK0, 44, 29, 15
Moss Green

Moss Green complements olive with a subdued tone to enhance visual harmony and usability without distraction.

HEX#A4C26B
RGB164, 194, 107
HSL81, 42, 59
CMYK15, 0, 45, 24

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
Snow

RolesBg Dark

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

RolesText, Btn Secondary Text

HEX#222222
RGB34, 34, 34
HSL0, 0, 13
CMYK0, 0, 0, 87

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-crimson: #E03060;
  --color-olive-green: #87B854;
  --color-goldenrod: #F2B844;
  --color-light-rose: #D97A99;
  --color-moss-green: #A4C26B;
  --color-pure-white: #FFFFFF;
  --color-snow: #F7F7F7;
  --color-charcoal: #222222;
}

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: #E03060;
  --role-link: #E03060;
  --role-btn-primary-bg: #E03060;
  --role-btn-secondary-bg: #87B854;
  --role-btn-outlined-border: #87B854;
  --role-btn-outlined-text: #87B854;
  --role-headline: #F2B844;
  --role-icon: #D97A99;
  --role-border: #D97A99;
  --role-divider: #D97A99;
  --role-outline: #D97A99;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #F7F7F7;
  --role-text: #222222;
  --role-btn-secondary-text: #222222;
}

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.
{
    "crimson": "#E03060",
    "olive-green": "#87B854",
    "goldenrod": "#F2B844",
    "light-rose": "#D97A99",
    "moss-green": "#A4C26B",
    "pure-white": "#FFFFFF",
    "snow": "#F7F7F7",
    "charcoal": "#222222"
}
Press Space to load new palette