Watermelon Red#B91C29
Lime Green#769E2E
Soft Melon Pink#F2697E
Light Sprout Green#A9D97A
Palette direction

Watermelon Lime Fresh Color Palette

This palette keeps the watermelon-and-lime energy but softens the support green so the system feels lighter and more approachable. The result is a fresh, food-friendly identity with clear hierarchy, playful brightness, and strong usability across UI states.

AnalogousFood Beveragewatermelonlimefreshvibrant
palette-preview.example
Food Beverage color direction

Watermelon Lime Fresh Color Palette

This palette keeps the watermelon-and-lime energy but softens the support green so the system feels lighter and more approachable. The result is a fresh, food-friendly identity with clear hierarchy, playful brightness, and strong usability across UI states.

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 Watermelon Red #B91C296.4:1 Strong
Logo Charcoal Black #222222on Lime Green #769E2E5.1:1 Strong
Logo Charcoal Black #222222on Pure White #FFFFFF15.9:1 Excellent
Logo Charcoal Black #222222on Light Sprout Green #A9D97A9.8:1 Excellent
Icon color
BackgroundWatermelon Red#B91C29TextPure White#FFFFFF
Primary Button6.44:1
AA

Best for the main action users should notice first.

BackgroundLime Green#769E2ETextCharcoal Black#222222
Secondary Button5.08:1
AA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextLime Green#769E2E
Outlined Button3.13:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextWatermelon Red#B91C29
Text Button6.44:1
AA

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

Palette composition7 colorsAnalogous color relationship
9:41Watermelon Lime Fresh 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.

CWatermelon Lime Fresh Color PaletteFood Beverage brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The red watermelon tone and lime green create a lively, recognizable pairing with strong tension and freshness. They work as a custom food palette because the relationship is more playful and brand-specific than a strict harmony pattern.

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.Watermelon Red #B91C29
HeadlineUsed for main titles and key messages.Soft Melon Pink #F2697E
LinkUsed for links and interactive text.Watermelon Red #B91C29

Buttons

Primary Button
BackgroundWatermelon Red #B91C29
TextPure White #FFFFFF
Secondary Button
BackgroundLime Green #769E2E
TextCharcoal Black #222222
Outlined Button
BackgroundLime Green #769E2E
TextLime Green #769E2E

Interface

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

Palette Colors

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

Main (Brand) Colors

The red watermelon tone and lime green create a lively, recognizable pairing with strong tension and freshness. They work as a custom food palette because the relationship is more playful and brand-specific than a strict harmony pattern.

PrimaryWatermelon Red

RolesLogo, Btn Primary Bg, Link

A rich watermelon red that gives the brand immediate appetite appeal and a bold, memorable signature.

HEX#B91C29
RGB185, 28, 41
HSL355, 74, 42
CMYK0, 85, 78, 27
SecondaryLime Green

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

A vivid lime green that adds freshness, contrast, and a clean natural cue without losing punch.

HEX#769E2E
RGB118, 158, 46
HSL81, 55, 40
CMYK25, 0, 71, 38

Support Colors

The support accents extend the main palette with softer, lighter green and pink notes that keep the system bright while staying subordinate. They help shape hierarchy and balance,,

Soft Melon Pink

RolesHeadline

A soft pink accent that warms the layout and echoes the fruit-forward character of the main red.

HEX#F2697E
RGB242, 105, 126
HSL351, 84, 68
CMYK0, 57, 48, 5
Light Sprout Green

RolesIcon, Border, Divider, Outline

A lighter green that eases the palette into UI details and gives supporting elements a fresher, airier feel.

HEX#A9D97A
RGB169, 217, 122
HSL90, 56, 66
CMYK22, 0, 44, 15

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
Off White
HEX#F7F6F1
RGB247, 246, 241
HSL50, 27, 96
CMYK0, 0, 2, 3
Charcoal Black

RolesBg Dark, Text, 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-watermelon-red: #B91C29;
  --color-lime-green: #769E2E;
  --color-soft-melon-pink: #F2697E;
  --color-light-sprout-green: #A9D97A;
  --color-pure-white: #FFFFFF;
  --color-off-white: #F7F6F1;
  --color-charcoal-black: #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: #B91C29;
  --role-btn-primary-bg: #B91C29;
  --role-link: #B91C29;
  --role-btn-secondary-bg: #769E2E;
  --role-btn-outlined-border: #769E2E;
  --role-btn-outlined-text: #769E2E;
  --role-headline: #F2697E;
  --role-icon: #A9D97A;
  --role-border: #A9D97A;
  --role-divider: #A9D97A;
  --role-outline: #A9D97A;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #222222;
  --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.
{
    "watermelon-red": "#B91C29",
    "lime-green": "#769E2E",
    "soft-melon-pink": "#F2697E",
    "light-sprout-green": "#A9D97A",
    "pure-white": "#FFFFFF",
    "off-white": "#F7F6F1",
    "charcoal-black": "#222222"
}
Press Space to load new palette