Coral#FF6F61
Dusty Pink#F4C2C2
Deep Green#264D47
Light Blush#FFD9DA
Palette direction

Coral Pink Green Color Palette

This strategic color palette is inspired by the delicate balance of soft pinks, fresh coral, and a deep green from the image, creating a harmonious and elegant brand identity. The main colors blend youthful warmth with refined calm, while the support colors add subtle vibrancy and balance. Neutral colors provide versatile backgrounds and text contrast to ensure readability and clarity across interfaces.

ComplementaryFashion Beautycoralpinkgreenfloral
palette-preview.example
Fashion Beauty color direction

Coral Pink Green Color Palette

This strategic color palette is inspired by the delicate balance of soft pinks, fresh coral, and a deep green from the image, creating a harmonious and elegant brand identity. The main colors blend youthful warmth with refined calm, while the support colors add subtle vibrancy and balance. Neutral colors provide versatile backgrounds and text contrast to ensure readability and clarity across 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 White #FFFFFFon Deep Green #264D479.4:1 Excellent
Logo Charcoal #2D2D2Don Dusty Pink #F4C2C28.8:1 Excellent
Logo Charcoal #2D2D2Don Coral #FF6F615.0:1 Strong
Logo Charcoal #2D2D2Don White #FFFFFF13.8:1 Excellent
Icon color
BackgroundCoral#FF6F61TextCharcoal#2D2D2D
Primary Button5.05:1
AA

Best for the main action users should notice first.

BackgroundDusty Pink#F4C2C2TextCharcoal#2D2D2D
Secondary Button8.75:1
AAA

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 colorsComplementary color relationship
9:41Coral Pink Green 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 Pink Green Color PaletteFashion Beauty brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors—coral, dusty pink, and deep green—work together as a split-complementary triad that balances warmth and freshness while providing dynamic contrast for strong visual 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 #FF6F61
HeadlineUsed for main titles and key messages.Dusty Pink #F4C2C2
LinkUsed for links and interactive text.Coral #FF6F61

Buttons

Primary Button
BackgroundCoral #FF6F61
TextCharcoal #2D2D2D
Secondary Button
BackgroundDusty Pink #F4C2C2
TextCharcoal #2D2D2D
Outlined Button
BackgroundCoral #FF6F61
TextCoral #FF6F61

Interface

TextDefault readable body text.Charcoal #2D2D2D
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Off White #F8F4F4
IconSmall interface icons and marks.Light Blush #FFD9DA
BorderCards, inputs, and component borders.Light Blush #FFD9DA
DividerSubtle separators between content.Light Blush #FFD9DA
OutlineFocus rings and emphasis outlines.Light Blush #FFD9DA

Palette Colors

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

Main (Brand) Colors

The main colors—coral, dusty pink, and deep green—work together as a split-complementary triad that balances warmth and freshness while providing dynamic contrast for strong visual recognition.

PrimaryCoral

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

Coral conveys warmth, energy, and approachability, making it perfect for main brand elements that need to engage.

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

RolesHeadline, Btn Secondary Bg

Dusty Pink adds softness and feminine elegance, supporting the core color with gentle visual appeal.

HEX#F4C2C2
RGB244, 194, 194
HSL0, 69, 86
CMYK0, 20, 20, 4
TertiaryDeep Green

Deep Green introduces sophistication and grounding contrast, enhancing readability and brand depth.

HEX#264D47
RGB38, 77, 71
HSL171, 34, 23
CMYK51, 0, 8, 70

Support Colors

These accent colors extend the palette with complementary warmth and softness, reinforcing the main colors without overpowering them.

Light Blush

RolesIcon, Border, Divider, Outline

Light Blush offers a subtle, warm accent that enhances the pink tones softly and supports cleaner interface elements.

HEX#FFD9DA
RGB255, 217, 218
HSL358, 100, 93
CMYK0, 15, 15, 0

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
Off White

RolesBg Dark

HEX#F8F4F4
RGB248, 244, 244
HSL0, 22, 96
CMYK0, 2, 2, 3
Charcoal

RolesText, Btn Primary Text, Btn Secondary Text

HEX#2D2D2D
RGB45, 45, 45
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-dusty-pink: #F4C2C2;
  --color-deep-green: #264D47;
  --color-light-blush: #FFD9DA;
  --color-white: #FFFFFF;
  --color-off-white: #F8F4F4;
  --color-charcoal: #2D2D2D;
}

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: #F4C2C2;
  --role-btn-secondary-bg: #F4C2C2;
  --role-icon: #FFD9DA;
  --role-border: #FFD9DA;
  --role-divider: #FFD9DA;
  --role-outline: #FFD9DA;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #F8F4F4;
  --role-text: #2D2D2D;
  --role-btn-primary-text: #2D2D2D;
  --role-btn-secondary-text: #2D2D2D;
}

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",
    "dusty-pink": "#F4C2C2",
    "deep-green": "#264D47",
    "light-blush": "#FFD9DA",
    "white": "#FFFFFF",
    "off-white": "#F8F4F4",
    "charcoal": "#2D2D2D"
}
Press Space to load new palette