This palette uses fresh and natural hues of green and coral to reflect health and vitality, supported by warm beige and muted olive accents for balance, grounded by a harmonious set of neutral tones for readability and versatility.
This palette uses fresh and natural hues of green and coral to reflect health and vitality, supported by warm beige and muted olive accents for balance, grounded by a harmonious set of neutral tones for readability and versatility.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine a vibrant Coral with a fresh Green and a warm Olive to create a lively yet grounded palette that conveys health and vitality.
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 main colors combine a vibrant Coral with a fresh Green and a warm Olive to create a lively yet grounded palette that conveys health and vitality.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Coral injects energy and warmth, symbolizing vitality and an appetizing approach to nutrition.
#FF6F61255, 111, 975, 100, 690, 56, 62, 0RolesHeadline, Btn Secondary Bg
Green evokes freshness and natural health, reinforcing the brand's focus on wholesome living.
#4CAF5076, 175, 80122, 39, 4957, 0, 54, 31RolesIcon, Border, Divider, Outline
Olive adds a muted earthiness that supports the main colors without competing for attention.
#8A9A5B138, 154, 9175, 26, 4810, 0, 41, 40Support colors incorporate a soft Beige for warmth and balance, extending the natural theme and providing gentle contrast for interface elements.
Beige offers warmth and softness to balance the stronger main hues, making the brand approachable and comforting.
#F5EBDD245, 235, 22135, 55, 910, 4, 10, 4Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#FAFAF6250, 250, 24660, 29, 970, 0, 2, 2RolesText, Btn Primary Text, Btn Secondary Text
#2E2E2E46, 46, 460, 0, 180, 0, 0, 82Copy 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-coral: #FF6F61;
--color-green: #4CAF50;
--color-olive: #8A9A5B;
--color-beige: #F5EBDD;
--color-white: #FFFFFF;
--color-ivory: #FAFAF6;
--color-charcoal: #2E2E2E;
}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: #FF6F61;
--role-link: #FF6F61;
--role-btn-primary-bg: #FF6F61;
--role-btn-outlined-border: #FF6F61;
--role-btn-outlined-text: #FF6F61;
--role-headline: #4CAF50;
--role-btn-secondary-bg: #4CAF50;
--role-icon: #8A9A5B;
--role-border: #8A9A5B;
--role-divider: #8A9A5B;
--role-outline: #8A9A5B;
--role-bg-light: #FFFFFF;
--role-bg-dark: #FAFAF6;
--role-text: #2E2E2E;
--role-btn-primary-text: #2E2E2E;
--role-btn-secondary-text: #2E2E2E;
}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.{
"coral": "#FF6F61",
"green": "#4CAF50",
"olive": "#8A9A5B",
"beige": "#F5EBDD",
"white": "#FFFFFF",
"ivory": "#FAFAF6",
"charcoal": "#2E2E2E"
}