Coral#ECA8B5
Slate#708090
Olive#556B2F
Silk Blue#B0C4DE
Warm Taupe#D2B48C
Palette direction

Coral Slate Olive Color Palette

This palette blends a warm Coral, a calming Slate, and a grounded Olive as main colors to create a distinct and harmonious visual identity. The support colors Silk Blue and Warm Taupe extend the palette with muted and soft tones, providing balanced accents that enhance usability without competing with the main hues. The neutrals Ivory, Sand, and Charcoal offer a clean foundation and high contrast for text and backgrounds, ensuring excellent readability across digital interfaces.

TriadicFashion Beautycoralslateolivefashion
palette-preview.example
Fashion Beauty color direction

Coral Slate Olive Color Palette

This palette blends a warm Coral, a calming Slate, and a grounded Olive as main colors to create a distinct and harmonious visual identity. The support colors Silk Blue and Warm Taupe extend the palette with muted and soft tones, providing balanced accents that enhance usability without competing with the main hues. The neutrals Ivory, Sand, and Charcoal offer a clean foundation and high contrast for text and backgrounds, ensuring excellent readability across digital interfaces.

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 #333333on Coral #ECA8B56.5:1 Strong
Logo Ivory #FFFFFFon Olive #556B2F5.9:1 Strong
Logo Charcoal #333333on Ivory #FFFFFF12.6:1 Excellent
Logo Ivory #FFFFFFon Charcoal #33333312.6:1 Excellent
Icon color
BackgroundCoral#ECA8B5TextCharcoal#333333
Primary Button6.52:1
AA

Best for the main action users should notice first.

BackgroundSlate#708090TextIvory#FFFFFF
Secondary Button4.05:1
Large text

Useful for softer choices and secondary paths.

BackgroundIvory#FFFFFFTextCoral#ECA8B5
Outlined Button1.94:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundIvory#FFFFFFTextCoral#ECA8B5
Text Button1.94:1
Low

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

Palette composition8 colorsTriadic color relationship
9:41Coral Slate Olive Color Palette Color role balance
Triadic 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 Slate Olive Color PaletteFashion Beauty brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The warm Coral, soft Slate, and deep Olive create a unique, recognizable triadic-inspired palette that balances vibrancy with earthy calmness, ideal for a progressive fashion and beauty brand identity.

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

Buttons

Primary Button
BackgroundCoral #ECA8B5
TextCharcoal #333333
Secondary Button
BackgroundSlate #708090
TextIvory #FFFFFF
Outlined Button
BackgroundCoral #ECA8B5
TextCoral #ECA8B5

Interface

TextDefault readable body text.Charcoal #333333
Bg LightLight page or section background.Ivory #FFFFFF
Bg DarkDark page or section background.Sand #F5F5DC
IconSmall interface icons and marks.Silk Blue #B0C4DE
BorderCards, inputs, and component borders.Silk Blue #B0C4DE
DividerSubtle separators between content.Silk Blue #B0C4DE
OutlineFocus rings and emphasis outlines.Silk Blue #B0C4DE

Palette Colors

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

Main (Brand) Colors

The warm Coral, soft Slate, and deep Olive create a unique, recognizable triadic-inspired palette that balances vibrancy with earthy calmness, ideal for a progressive fashion and beauty brand identity.

PrimaryCoral

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

Coral evokes warmth, approachability, and modern femininity, making it perfect for representing the brand's inviting personality and creative energy.

HEX#ECA8B5
RGB236, 168, 181
HSL349, 64, 79
CMYK0, 29, 23, 7
SecondarySlate

RolesBtn Secondary Bg, Headline

Slate adds a calming, trustworthy quality that balances the vibrancy of Coral while reinforcing professionalism and style sophistication.

HEX#708090
RGB112, 128, 144
HSL210, 13, 50
CMYK22, 11, 0, 44
TertiaryOlive

Olive grounds the palette with its earthy, organic tone, conveying stability and a subtle natural connection that complements the other main colors.

HEX#556B2F
RGB85, 107, 47
HSL82, 39, 30
CMYK21, 0, 56, 58

Support Colors

The support colors Silk Blue and Warm Taupe provide muted, subdued accents that enhance contrast and usability across UI elements, enriching the main palette without overpowering it.

Silk Blue

RolesIcon, Border, Divider, Outline

Silk Blue serves as a soft, neutral blue accent that complements Slate and adds subtle depth to interface elements.

HEX#B0C4DE
RGB176, 196, 222
HSL214, 41, 78
CMYK21, 12, 0, 13
Warm Taupe

Warm Taupe introduces a warm, muted brown accent that harmonizes with Coral and Olive, offering visual balance and understated refinement.

HEX#D2B48C
RGB210, 180, 140
HSL34, 44, 69
CMYK0, 14, 33, 18

Neutral Colors

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

Ivory

RolesBg Light, Btn Secondary Text

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

RolesBg Dark

HEX#F5F5DC
RGB245, 245, 220
HSL60, 56, 91
CMYK0, 0, 10, 4
Charcoal

RolesText, Btn Primary Text

HEX#333333
RGB51, 51, 51
HSL0, 0, 20
CMYK0, 0, 0, 80

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: #ECA8B5;
  --color-slate: #708090;
  --color-olive: #556B2F;
  --color-silk-blue: #B0C4DE;
  --color-warm-taupe: #D2B48C;
  --color-ivory: #FFFFFF;
  --color-sand: #F5F5DC;
  --color-charcoal: #333333;
}

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: #ECA8B5;
  --role-link: #ECA8B5;
  --role-btn-primary-bg: #ECA8B5;
  --role-btn-outlined-border: #ECA8B5;
  --role-btn-outlined-text: #ECA8B5;
  --role-btn-secondary-bg: #708090;
  --role-headline: #708090;
  --role-icon: #B0C4DE;
  --role-border: #B0C4DE;
  --role-divider: #B0C4DE;
  --role-outline: #B0C4DE;
  --role-bg-light: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #F5F5DC;
  --role-text: #333333;
  --role-btn-primary-text: #333333;
}

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": "#ECA8B5",
    "slate": "#708090",
    "olive": "#556B2F",
    "silk-blue": "#B0C4DE",
    "warm-taupe": "#D2B48C",
    "ivory": "#FFFFFF",
    "sand": "#F5F5DC",
    "charcoal": "#333333"
}
Press Space to load new palette