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.
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 systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
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.Assign existing palette colors to brand, typography, and interface roles.
A compact view of the brand, support, and neutral colors that make up this 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.
RolesLogo, Btn Primary Bg, Link
A rich watermelon red that gives the brand immediate appetite appeal and a bold, memorable signature.
#B91C29185, 28, 41355, 74, 420, 85, 78, 27RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
A vivid lime green that adds freshness, contrast, and a clean natural cue without losing punch.
#769E2E118, 158, 4681, 55, 4025, 0, 71, 38The 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,,
RolesHeadline
A soft pink accent that warms the layout and echoes the fruit-forward character of the main red.
#F2697E242, 105, 126351, 84, 680, 57, 48, 5RolesIcon, Border, Divider, Outline
A lighter green that eases the palette into UI details and gives supporting elements a fresher, airier feel.
#A9D97A169, 217, 12290, 56, 6622, 0, 44, 15Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F7F6F1247, 246, 24150, 27, 960, 0, 2, 3RolesBg Dark, Text, Btn Secondary Text
#22222234, 34, 340, 0, 130, 0, 0, 87Copy palette values for design systems, websites, and client handoff.
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;
}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;
}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"
}