Coral Red#E45950
Light Pumpkin#F1A073
Muted Sage#8DA99E
Peach Cream#EFD8CC
Sage Mist#A3C0B1
Palette direction

Coral Sage Organic Color Palette

This color palette draws inspiration from the warm, floral hues and subtle earthy greens found in the image, forming a harmonious and inviting system perfect for brands that want to evoke warmth, nature, and elegance. The main colors provide vibrant yet balanced shades reminiscent of the flower petals and leaves, while support colors add depth and subtlety, with neutrals grounding the scheme for versatile usability.

ComplementaryHealth Wellnesscoralsagewarmfloral
palette-preview.example
Health Wellness color direction

Coral Sage Organic Color Palette

This color palette draws inspiration from the warm, floral hues and subtle earthy greens found in the image, forming a harmonious and inviting system perfect for brands that want to evoke warmth, nature, and elegance. The main colors provide vibrant yet balanced shades reminiscent of the flower petals and leaves, while support colors add depth and subtlety, with neutrals grounding the scheme for versatile usability.

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 #3B3B3Bon Light Pumpkin #F1A0735.3:1 Strong
Logo Charcoal #3B3B3Bon Pure White #FFFFFF11.2:1 Excellent
Logo Pure White #FFFFFFon Charcoal #3B3B3B11.2:1 Excellent
Logo Charcoal #3B3B3Bon Peach Cream #EFD8CC8.2:1 Excellent
Icon color
BackgroundCoral Red#E45950TextPure White#FFFFFF
Primary Button3.59:1
Large text

Best for the main action users should notice first.

BackgroundLight Pumpkin#F1A073TextCharcoal#3B3B3B
Secondary Button5.34:1
AA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextLight Pumpkin#F1A073
Outlined Button2.10:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextCoral Red#E45950
Text Button3.59:1
Large text

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

Palette composition8 colorsComplementary color relationship
9:41Coral Sage Organic Color Palette Color role balance
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 Sage Organic Color PaletteHealth Wellness brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine warm coral and soft orange shades with a muted sage green, creating a distinctive trio that balances vibrancy with calmness for easy recognition.

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.Coral Red #E45950
HeadlineUsed for main titles and key messages.Coral Red #E45950
LinkUsed for links and interactive text.Coral Red #E45950

Buttons

Primary Button
BackgroundCoral Red #E45950
TextPure White #FFFFFF
Secondary Button
BackgroundLight Pumpkin #F1A073
TextCharcoal #3B3B3B
Outlined Button
BackgroundLight Pumpkin #F1A073
TextLight Pumpkin #F1A073

Interface

TextDefault readable body text.Charcoal #3B3B3B
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Off White #F9F5F1
IconSmall interface icons and marks.Peach Cream #EFD8CC
BorderCards, inputs, and component borders.Peach Cream #EFD8CC
DividerSubtle separators between content.Peach Cream #EFD8CC
OutlineFocus rings and emphasis outlines.Peach Cream #EFD8CC

Palette Colors

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

Main (Brand) Colors

The main colors combine warm coral and soft orange shades with a muted sage green, creating a distinctive trio that balances vibrancy with calmness for easy recognition.

PrimaryCoral Red

RolesLogo, Link, Btn Primary Bg, Headline

Coral Red brings warmth and energetic vitality, making it a strong anchor for brand recognition and engaging call-to-actions.

HEX#E45950
RGB228, 89, 80
HSL4, 73, 60
CMYK0, 61, 65, 11
SecondaryLight Pumpkin

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Light Pumpkin offers a softer orange contrast, providing friendly and inviting touchpoints that complement the stronger coral.

HEX#F1A073
RGB241, 160, 115
HSL21, 82, 70
CMYK0, 34, 52, 5
TertiaryMuted Sage

Muted Sage adds a grounded, calming presence to balance the warmth of coral and orange with sophisticated natural tones.

HEX#8DA99E
RGB141, 169, 158
HSL156, 14, 61
CMYK17, 0, 7, 34

Support Colors

The support colors include light peach and sage tones that quietly reinforce the natural and organic feeling of the main palette while defining interface elements like icons and borders without overpowering.

Peach Cream

RolesIcon, Border, Divider, Outline

Peach Cream softly extends the warm tones with a gentle, light touch that enhances readability and subtle accents.

HEX#EFD8CC
RGB239, 216, 204
HSL21, 52, 87
CMYK0, 10, 15, 6
Sage Mist

Sage Mist complements Muted Sage with a cooler variation, ensuring visual consistency and depth in secondary details.

HEX#A3C0B1
RGB163, 192, 177
HSL149, 19, 70
CMYK15, 0, 8, 25

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

RolesBg Dark

HEX#F9F5F1
RGB249, 245, 241
HSL30, 40, 96
CMYK0, 2, 3, 2
Charcoal

RolesText, Btn Secondary Text

HEX#3B3B3B
RGB59, 59, 59
HSL0, 0, 23
CMYK0, 0, 0, 77

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-red: #E45950;
  --color-light-pumpkin: #F1A073;
  --color-muted-sage: #8DA99E;
  --color-peach-cream: #EFD8CC;
  --color-sage-mist: #A3C0B1;
  --color-pure-white: #FFFFFF;
  --color-off-white: #F9F5F1;
  --color-charcoal: #3B3B3B;
}

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: #E45950;
  --role-link: #E45950;
  --role-btn-primary-bg: #E45950;
  --role-headline: #E45950;
  --role-btn-secondary-bg: #F1A073;
  --role-btn-outlined-border: #F1A073;
  --role-btn-outlined-text: #F1A073;
  --role-icon: #EFD8CC;
  --role-border: #EFD8CC;
  --role-divider: #EFD8CC;
  --role-outline: #EFD8CC;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #F9F5F1;
  --role-text: #3B3B3B;
  --role-btn-secondary-text: #3B3B3B;
}

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-red": "#E45950",
    "light-pumpkin": "#F1A073",
    "muted-sage": "#8DA99E",
    "peach-cream": "#EFD8CC",
    "sage-mist": "#A3C0B1",
    "pure-white": "#FFFFFF",
    "off-white": "#F9F5F1",
    "charcoal": "#3B3B3B"
}
Press Space to load new palette