Coral#FF6F61
Green#4CAF50
Olive#8A9A5B
Beige#F5EBDD
Palette direction

Coral Green Nutrition Color Palette

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.

CustomHealth Wellnessnutritionhealthwellnessfresh
palette-preview.example
Health Wellness color direction

Coral Green Nutrition Color Palette

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 system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo Charcoal #2E2E2Eon Coral #FF6F615.0:1 Strong
Logo Charcoal #2E2E2Eon Green #4CAF504.9:1 Strong
Logo Charcoal #2E2E2Eon White #FFFFFF13.6:1 Excellent
Logo White #FFFFFFon Charcoal #2E2E2E13.6:1 Excellent
Icon color
BackgroundCoral#FF6F61TextCharcoal#2E2E2E
Primary Button4.98:1
AA

Best for the main action users should notice first.

BackgroundGreen#4CAF50TextCharcoal#2E2E2E
Secondary Button4.89:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextCoral#FF6F61
Outlined Button2.73:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextCoral#FF6F61
Text Button2.73:1
Low

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

Palette composition7 colorsCustom color relationship
9:41Coral Green Nutrition 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.

CCoral Green Nutrition Color PaletteHealth Wellness brand direction ColorFly.design
Strategic palette preview

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.Coral #FF6F61
HeadlineUsed for main titles and key messages.Green #4CAF50
LinkUsed for links and interactive text.Coral #FF6F61

Buttons

Primary Button
BackgroundCoral #FF6F61
TextCharcoal #2E2E2E
Secondary Button
BackgroundGreen #4CAF50
TextCharcoal #2E2E2E
Outlined Button
BackgroundCoral #FF6F61
TextCoral #FF6F61

Interface

TextDefault readable body text.Charcoal #2E2E2E
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Ivory #FAFAF6
IconSmall interface icons and marks.Olive #8A9A5B
BorderCards, inputs, and component borders.Olive #8A9A5B
DividerSubtle separators between content.Olive #8A9A5B
OutlineFocus rings and emphasis outlines.Olive #8A9A5B

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 vibrant Coral with a fresh Green and a warm Olive to create a lively yet grounded palette that conveys health and vitality.

PrimaryCoral

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

Coral injects energy and warmth, symbolizing vitality and an appetizing approach to nutrition.

HEX#FF6F61
RGB255, 111, 97
HSL5, 100, 69
CMYK0, 56, 62, 0
SecondaryGreen

RolesHeadline, Btn Secondary Bg

Green evokes freshness and natural health, reinforcing the brand's focus on wholesome living.

HEX#4CAF50
RGB76, 175, 80
HSL122, 39, 49
CMYK57, 0, 54, 31
TertiaryOlive

RolesIcon, Border, Divider, Outline

Olive adds a muted earthiness that supports the main colors without competing for attention.

HEX#8A9A5B
RGB138, 154, 91
HSL75, 26, 48
CMYK10, 0, 41, 40

Support Colors

Support colors incorporate a soft Beige for warmth and balance, extending the natural theme and providing gentle contrast for interface elements.

Beige

Beige offers warmth and softness to balance the stronger main hues, making the brand approachable and comforting.

HEX#F5EBDD
RGB245, 235, 221
HSL35, 55, 91
CMYK0, 4, 10, 4

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

White

RolesBg Light

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Ivory

RolesBg Dark

HEX#FAFAF6
RGB250, 250, 246
HSL60, 29, 97
CMYK0, 0, 2, 2
Charcoal

RolesText, Btn Primary Text, Btn Secondary Text

HEX#2E2E2E
RGB46, 46, 46
HSL0, 0, 18
CMYK0, 0, 0, 82

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-coral: #FF6F61;
  --color-green: #4CAF50;
  --color-olive: #8A9A5B;
  --color-beige: #F5EBDD;
  --color-white: #FFFFFF;
  --color-ivory: #FAFAF6;
  --color-charcoal: #2E2E2E;
}

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: #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;
}

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.
{
    "coral": "#FF6F61",
    "green": "#4CAF50",
    "olive": "#8A9A5B",
    "beige": "#F5EBDD",
    "white": "#FFFFFF",
    "ivory": "#FAFAF6",
    "charcoal": "#2E2E2E"
}
Press Space to load new palette