Coral Red#C31E3A
Dark Slate Gray#343D42
Pure White#FFFFFF
Charcoal#1A1A1A
Palette direction

Coral Sage Organic Color Palette

This color palette features vibrant Coral Red and subtle Dark Slate Gray as its vibrant main colors, balanced by pure white and deep charcoal neutrals for strong contrast and modern clarity. The Dark Slate Gray replaces Pumpkin Orange with a cooler, more neutral tone that complements Coral Red's warmth, maintaining approachable subtlety while enhancing versatility. Charcoal continues to anchor UI elements as a dark accent, supporting accessibility and clear hierarchy.

ComplementaryHealth Wellnesscoralwhitecharcoaldark slate gray
palette-preview.example
Health Wellness color direction

Coral Sage Organic Color Palette

This color palette features vibrant Coral Red and subtle Dark Slate Gray as its vibrant main colors, balanced by pure white and deep charcoal neutrals for strong contrast and modern clarity. The Dark Slate Gray replaces Pumpkin Orange with a cooler, more neutral tone that complements Coral Red's warmth, maintaining approachable subtlety while enhancing versatility. Charcoal continues to anchor UI elements as a dark accent, supporting accessibility and clear hierarchy.

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 #1A1A1Aon Pure White #FFFFFF17.4:1 Excellent
Logo Pure White #FFFFFFon Dark Slate Gray #343D4211.1:1 Excellent
Logo Pure White #FFFFFFon Coral Red #C31E3A5.9:1 Strong
Icon color
BackgroundCoral Red#C31E3ATextPure White#FFFFFF
Primary Button5.89:1
AA

Best for the main action users should notice first.

BackgroundDark Slate Gray#343D42TextPure White#FFFFFF
Secondary Button11.10:1
AAA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextDark Slate Gray#343D42
Outlined Button11.10:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextCoral Red#C31E3A
Text Button5.89:1
AA

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

Palette composition7 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 Coral Red and Dark Slate Gray create a vibrant yet balanced brand identity that combines warmth with cool neutrality for strong, recognizable visuals.

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

Buttons

Primary Button
BackgroundCoral Red #C31E3A
TextPure White #FFFFFF
Secondary Button
BackgroundDark Slate Gray #343D42
TextPure White #FFFFFF
Outlined Button
BackgroundDark Slate Gray #343D42
TextDark Slate Gray #343D42

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.Charcoal #1A1A1A
BorderCards, inputs, and component borders.Charcoal #1A1A1A
DividerSubtle separators between content.Charcoal #1A1A1A
OutlineFocus rings and emphasis outlines.Charcoal #1A1A1A

Palette Colors

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

Main (Brand) Colors

The main colors Coral Red and Dark Slate Gray create a vibrant yet balanced brand identity that combines warmth with cool neutrality for strong, recognizable visuals.

PrimaryCoral Red

RolesLogo, Link, Btn Primary Bg, Headline

Coral Red adds energetic warmth and passion, serving as a compelling focal point for logos and primary calls to action.

HEX#C31E3A
RGB195, 30, 58
HSL350, 73, 44
CMYK0, 85, 70, 24
SecondaryDark Slate Gray

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

Dark Slate Gray provides a cool, sophisticated backdrop that balances Coral Red’s vibrancy with approachable subtlety.

HEX#343D42
RGB52, 61, 66
HSL201, 12, 23
CMYK21, 8, 0, 74
TertiaryPure White

Pure White introduces bright clarity that enhances contrast and brings a fresh, clean aesthetic to the palette.

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

Support Colors

Charcoal remains as a deep, grounding accent holding UI elements together with strong legibility and subtle emphasis, complementing both main colors without competing.

Charcoal

RolesIcon, Border, Divider, Outline

Charcoal provides a strong, dark accent that anchors UI elements and improves legibility without overpowering the main palette.

HEX#1A1A1A
RGB26, 26, 26
HSL0, 0, 10
CMYK0, 0, 0, 90

Neutral Colors

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

Pure White

RolesBg Light, Btn Primary Text, Btn Secondary 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

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: #C31E3A;
  --color-dark-slate-gray: #343D42;
  --color-pure-white: #FFFFFF;
  --color-charcoal: #3B3B3B;
  --color-off-white: #F9F5F1;
}

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: #C31E3A;
  --role-link: #C31E3A;
  --role-btn-primary-bg: #C31E3A;
  --role-headline: #C31E3A;
  --role-btn-secondary-bg: #343D42;
  --role-btn-outlined-border: #343D42;
  --role-btn-outlined-text: #343D42;
  --role-icon: #1A1A1A;
  --role-border: #1A1A1A;
  --role-divider: #1A1A1A;
  --role-outline: #1A1A1A;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F9F5F1;
  --role-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": "#C31E3A",
    "dark-slate-gray": "#343D42",
    "pure-white": "#FFFFFF",
    "charcoal": "#3B3B3B",
    "off-white": "#F9F5F1"
}
Press Space to load new palette