Blush Pink#E5C9CB
Coral#FF6B57
Forest Green#144231
Warm Peach#F6D6CC
Light Rose#F9BCCF
Palette direction

Blush Coral Forest Color Palette

This palette draws from the soft blush pink, vibrant coral, and deep forest green in the image to express a blend of elegance, warmth, and sophistication. The main colors create clear visual hierarchy and strong brand recognition, while the support colors provide gentle accents and readability. The neutrals balance the palette with clean, subtle background and text colors ensuring accessibility and modern clarity.

ComplementaryFashion Beautyblush pinkcoralforest greenfashion
palette-preview.example
Fashion Beauty color direction

Blush Coral Forest Color Palette

This palette draws from the soft blush pink, vibrant coral, and deep forest green in the image to express a blend of elegance, warmth, and sophistication. The main colors create clear visual hierarchy and strong brand recognition, while the support colors provide gentle accents and readability. The neutrals balance the palette with clean, subtle background and text colors ensuring accessibility and modern clarity.

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 Forest Green #14423111.3:1 Excellent
Logo Charcoal #2B2B2Bon Blush Pink #E5C9CB9.1:1 Excellent
Logo Charcoal #2B2B2Bon Coral #FF6B575.1:1 Strong
Logo Charcoal #2B2B2Bon White #FFFFFF14.2:1 Excellent
Icon color
BackgroundIvory Blush#F7F0F1TextCharcoal#2B2B2B
Primary Button12.60:1
AAA

Best for the main action users should notice first.

BackgroundCoral#FF6B57TextCharcoal#2B2B2B
Secondary Button5.05:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextForest Green#144231
Outlined Button11.33:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextBlush Pink#E5C9CB
Text Button1.55:1
Low

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

Palette composition8 colorsComplementary color relationship
9:41Blush Coral Forest 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.

CBlush Coral Forest Color PaletteFashion Beauty brand direction ColorFly.design
Strategic palette preview

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.Blush Pink #E5C9CB
HeadlineUsed for main titles and key messages.Coral #FF6B57
LinkUsed for links and interactive text.Blush Pink #E5C9CB

Buttons

Primary Button
BackgroundIvory Blush #F7F0F1
TextCharcoal #2B2B2B
Secondary Button
BackgroundCoral #FF6B57
TextCharcoal #2B2B2B
Outlined Button
BackgroundForest Green #144231
TextForest Green #144231

Interface

TextDefault readable body text.Charcoal #2B2B2B
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Ivory Blush #F7F0F1
IconSmall interface icons and marks.Warm Peach #F6D6CC
BorderCards, inputs, and component borders.Warm Peach #F6D6CC
DividerSubtle separators between content.Warm Peach #F6D6CC
OutlineFocus rings and emphasis outlines.Light Rose #F9BCCF

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 soft blush pink, a vibrant coral, and a deep forest green for a balanced, memorable triadic harmony that is both elegant and lively.

PrimaryBlush Pink

RolesLogo, Link

Blush Pink sets a gentle, approachable tone as the primary brand color, evoking softness and femininity.

HEX#E5C9CB
RGB229, 201, 203
HSL356, 35, 84
CMYK0, 12, 11, 10
SecondaryCoral

RolesBtn Secondary Bg, Headline

Coral adds vibrant energy and warmth, making secondary elements dynamic and eye-catching.

HEX#FF6B57
RGB255, 107, 87
HSL7, 100, 67
CMYK0, 58, 66, 0
TertiaryForest Green

RolesBtn Outlined Border, Btn Outlined Text

Forest Green anchors the palette with a refined, grounded feel, enhancing sophistication and contrast.

HEX#144231
RGB20, 66, 49
HSL158, 53, 17
CMYK70, 0, 26, 74

Support Colors

Support colors extend the main palette with a muted warm peach and a subtle light rose, which provide gentle accents without competing for attention.

Warm Peach

RolesIcon, Border, Divider

Warm Peach complements the blush pink by adding softness and warmth to icons and borders.

HEX#F6D6CC
RGB246, 214, 204
HSL14, 70, 88
CMYK0, 13, 17, 4
Light Rose

RolesOutline

Light Rose reinforces the gentle, feminine quality of the palette, providing subtle outlines and visual clarity.

HEX#F9BCCF
RGB249, 188, 207
HSL341, 84, 86
CMYK0, 24, 17, 2

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
Ivory Blush

RolesBg Dark, Btn Primary Bg

HEX#F7F0F1
RGB247, 240, 241
HSL351, 30, 95
CMYK0, 3, 2, 3
Charcoal

RolesText, Btn Primary Text, 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-blush-pink: #E5C9CB;
  --color-coral: #FF6B57;
  --color-forest-green: #144231;
  --color-warm-peach: #F6D6CC;
  --color-light-rose: #F9BCCF;
  --color-white: #FFFFFF;
  --color-ivory-blush: #F7F0F1;
  --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: #E5C9CB;
  --role-link: #E5C9CB;
  --role-btn-secondary-bg: #FF6B57;
  --role-headline: #FF6B57;
  --role-btn-outlined-border: #144231;
  --role-btn-outlined-text: #144231;
  --role-icon: #F6D6CC;
  --role-border: #F6D6CC;
  --role-divider: #F6D6CC;
  --role-outline: #F9BCCF;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #F7F0F1;
  --role-btn-primary-bg: #F7F0F1;
  --role-text: #2B2B2B;
  --role-btn-primary-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.
{
    "blush-pink": "#E5C9CB",
    "coral": "#FF6B57",
    "forest-green": "#144231",
    "warm-peach": "#F6D6CC",
    "light-rose": "#F9BCCF",
    "white": "#FFFFFF",
    "ivory-blush": "#F7F0F1",
    "charcoal": "#2B2B2B"
}
Press Space to load new palette