Blue#007ACC
Coral#FF5E43
Teal#33BABB
Sand#D0B49F
Palette direction

Coral Blue Nutrition Color Palette

This clean and professional palette uses vibrant and fresh main colors paired with soft support tones and balanced neutrals to convey expert nutrition advice with premium appeal. The interplay of lively Blue and rich Coral gives a confident yet approachable brand presence, while muted Teal and warm Sand accents enhance usability and visual interest without overpowering. Crisp neutrals ensure readability and refine the overall sophisticated look.

Split ComplementaryHealth Wellnessnutritionnutricionistacleanprofessional
palette-preview.example
Health Wellness color direction

Coral Blue Nutrition Color Palette

This clean and professional palette uses vibrant and fresh main colors paired with soft support tones and balanced neutrals to convey expert nutrition advice with premium appeal. The interplay of lively Blue and rich Coral gives a confident yet approachable brand presence, while muted Teal and warm Sand accents enhance usability and visual interest without overpowering. Crisp neutrals ensure readability and refine the overall sophisticated look.

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 #2B2B2Bon Teal #33BABB6.0:1 Strong
Logo Charcoal #2B2B2Bon Coral #FF5E434.7:1 Strong
Logo White #FFFFFFon Blue #007ACC4.5:1 Strong
Logo Charcoal #2B2B2Bon White #FFFFFF14.2:1 Excellent
Icon color
BackgroundBlue#007ACCTextWhite#FFFFFF
Primary Button4.51:1
AA

Best for the main action users should notice first.

BackgroundCoral#FF5E43TextCharcoal#2B2B2B
Secondary Button4.68:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextBlue#007ACC
Outlined Button4.51:1
AA

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextBlue#007ACC
Text Button4.51:1
AA

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

Palette composition7 colorsSplit Complementary color relationship
9:41Coral Blue Nutrition Color Palette Color role balance
Split Complementary 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 Blue Nutrition Color PaletteHealth Wellness brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine a vibrant Blue with a warm Coral and a lively Aqua to build contrast and vitality while remaining cohesive as a premium nutrition brand system.

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.Blue #007ACC
HeadlineUsed for main titles and key messages.Blue #007ACC
LinkUsed for links and interactive text.Blue #007ACC

Buttons

Primary Button
BackgroundBlue #007ACC
TextWhite #FFFFFF
Secondary Button
BackgroundCoral #FF5E43
TextCharcoal #2B2B2B
Outlined Button
BackgroundBlue #007ACC
TextBlue #007ACC

Interface

TextDefault readable body text.Charcoal #2B2B2B
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Ivory #F5F6F7
IconSmall interface icons and marks.Teal #33BABB
BorderCards, inputs, and component borders.Teal #33BABB
DividerSubtle separators between content.Teal #33BABB
OutlineFocus rings and emphasis outlines.Teal #33BABB

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 Blue with a warm Coral and a lively Aqua to build contrast and vitality while remaining cohesive as a premium nutrition brand system.

PrimaryBlue

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

Blue conveys trust, professionalism, and clarity, essential for a nutritionist brand seeking to establish credibility.

HEX#007ACC
RGB0, 122, 204
HSL204, 100, 40
CMYK100, 40, 0, 20
SecondaryCoral

RolesBtn Secondary Bg

Coral adds warmth and energy, making the brand approachable and inviting without sacrificing sophistication.

HEX#FF5E43
RGB255, 94, 67
HSL9, 100, 63
CMYK0, 63, 74, 0
TertiaryTeal

RolesIcon, Border, Divider, Outline

Teal provides a fresh, natural accent that balances the vibrancy of Blue and Coral while reinforcing health and vitality.

HEX#33BABB
RGB51, 186, 187
HSL180, 57, 47
CMYK73, 1, 0, 27

Support Colors

Soft neutral support colors extend the main palette with complementary warmth and subtle contrast, ensuring usability and a balanced visual hierarchy.

Sand

Sand brings an earthy grounding tone that complements the Coral and softens the overall brand warmth.

HEX#D0B49F
RGB208, 180, 159
HSL26, 34, 72
CMYK0, 13, 24, 18

Neutral Colors

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

White

RolesBg Light, Btn Primary Text

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

RolesBg Dark

HEX#F5F6F7
RGB245, 246, 247
HSL210, 11, 96
CMYK1, 0, 0, 3
Charcoal

RolesText, Btn Secondary Text

HEX#2B2B2B
RGB43, 43, 43
HSL0, 0, 17
CMYK0, 0, 0, 83

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-blue: #007ACC;
  --color-coral: #FF5E43;
  --color-teal: #33BABB;
  --color-sand: #D0B49F;
  --color-white: #FFFFFF;
  --color-ivory: #F5F6F7;
  --color-charcoal: #2B2B2B;
}

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: #007ACC;
  --role-link: #007ACC;
  --role-btn-primary-bg: #007ACC;
  --role-btn-outlined-border: #007ACC;
  --role-btn-outlined-text: #007ACC;
  --role-headline: #007ACC;
  --role-btn-secondary-bg: #FF5E43;
  --role-icon: #33BABB;
  --role-border: #33BABB;
  --role-divider: #33BABB;
  --role-outline: #33BABB;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #F5F6F7;
  --role-text: #2B2B2B;
  --role-btn-secondary-text: #2B2B2B;
}

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.
{
    "blue": "#007ACC",
    "coral": "#FF5E43",
    "teal": "#33BABB",
    "sand": "#D0B49F",
    "white": "#FFFFFF",
    "ivory": "#F5F6F7",
    "charcoal": "#2B2B2B"
}
Press Space to load new palette