Cranberry#8B2F3B
Rose#C4626E
Peach#F2B89A
Clay Brown#9E7A70
Sand#D7B8A5
Palette direction

Cranberry Rose Peach Color Palette

This palette is inspired by the warm, elegant blend of deep reds, soft pinks, and understated neutrals from the image, creating a sophisticated and accessible brand identity. The main colors combine a rich, muted cranberry red, a warm rose, and a soft peach, fostering warmth and approachability with a balanced contrast. Supporting colors extend the palette with gentle earthy hues to complement and ground the vibrancy of the main colors, while the neutrals offer clear, readable text contrast and subtle background versatility.

AnalogousFashion Beautycranberryrosepeachfashion
palette-preview.example
Fashion Beauty color direction

Cranberry Rose Peach Color Palette

This palette is inspired by the warm, elegant blend of deep reds, soft pinks, and understated neutrals from the image, creating a sophisticated and accessible brand identity. The main colors combine a rich, muted cranberry red, a warm rose, and a soft peach, fostering warmth and approachability with a balanced contrast. Supporting colors extend the palette with gentle earthy hues to complement and ground the vibrancy of the main colors, while the neutrals offer clear, readable text contrast and subtle background versatility.

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 Cranberry #8B2F3B8.2:1 Excellent
Logo Charcoal #2E2E2Eon Peach #F2B89A7.8:1 Excellent
Logo Charcoal #2E2E2Eon White #FFFFFF13.6:1 Excellent
Logo Charcoal #2E2E2Eon Sand #D7B8A57.3:1 Excellent
Icon color
BackgroundCranberry#8B2F3BTextWhite#FFFFFF
Primary Button8.18:1
AAA

Best for the main action users should notice first.

BackgroundPeach#F2B89ATextCharcoal#2E2E2E
Secondary Button7.82:1
AAA

Useful for softer choices and secondary paths.

BackgroundSand#D7B8A5TextRose#C4626E
Outlined Button2.12:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundSand#D7B8A5TextCranberry#8B2F3B
Text Button4.40:1
Large text

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

Palette composition8 colorsAnalogous color relationship
9:41Cranberry Rose Peach Color Palette Color role balance
Analogous 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.

CCranberry Rose Peach Color PaletteFashion Beauty brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors form an analogous harmony with shades of cranberry red, warm rose, and soft peach, providing a warm yet elegant palette that is distinctive and cohesive for brand 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.Cranberry #8B2F3B
HeadlineUsed for main titles and key messages.Rose #C4626E
LinkUsed for links and interactive text.Cranberry #8B2F3B

Buttons

Primary Button
BackgroundCranberry #8B2F3B
TextWhite #FFFFFF
Secondary Button
BackgroundPeach #F2B89A
TextCharcoal #2E2E2E
Outlined Button
BackgroundRose #C4626E
TextRose #C4626E

Interface

TextDefault readable body text.Charcoal #2E2E2E
Bg LightLight page or section background.Sand #D7B8A5
Bg DarkDark page or section background.White #FFFFFF
IconSmall interface icons and marks.Clay Brown #9E7A70
BorderCards, inputs, and component borders.Clay Brown #9E7A70
DividerSubtle separators between content.Clay Brown #9E7A70
OutlineFocus rings and emphasis outlines.Clay Brown #9E7A70

Palette Colors

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

Main (Brand) Colors

The main colors form an analogous harmony with shades of cranberry red, warm rose, and soft peach, providing a warm yet elegant palette that is distinctive and cohesive for brand recognition.

PrimaryCranberry

RolesLogo, Link, Btn Primary Bg

Cranberry brings a rich, deep, and sophisticated red that conveys passion, elegance, and confidence, perfect for making a strong brand statement.

HEX#8B2F3B
RGB139, 47, 59
HSL352, 49, 36
CMYK0, 66, 58, 45
SecondaryRose

RolesBtn Outlined Border, Btn Outlined Text, Headline

Rose offers a softer, warm red that adds approachability and charm, balancing the depth of Cranberry with its inviting tone.

HEX#C4626E
RGB196, 98, 110
HSL353, 45, 58
CMYK0, 50, 44, 23
TertiaryPeach

RolesBtn Secondary Bg

Peach provides a gentle, warm hue that brings softness and a fresh, friendly feel to the palette, making secondary elements inviting and distinct.

HEX#F2B89A
RGB242, 184, 154
HSL20, 77, 78
CMYK0, 24, 36, 5

Support Colors

The support colors introduce muted earthy tones that enrich the palette with stability and subtle contrast without overpowering the main colors.

Clay Brown

RolesIcon, Border, Divider, Outline

Clay Brown harmonizes with the reds by adding a grounded, natural element that balances warmth with calm, ensuring visual support in UI elements.

HEX#9E7A70
RGB158, 122, 112
HSL13, 19, 53
CMYK0, 23, 29, 38
Sand

RolesBg Light

Sand is a light, muted tone that provides a soft, unobtrusive background to showcase the warm reds without distraction.

HEX#D7B8A5
RGB215, 184, 165
HSL23, 38, 75
CMYK0, 14, 23, 16

Neutral Colors

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

White

RolesBg Dark, Btn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Ivory
HEX#FAF9F6
RGB250, 249, 246
HSL45, 29, 97
CMYK0, 0, 2, 2
Charcoal

RolesText, Btn Secondary Text

HEX#2E2E2E
RGB46, 46, 46
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-cranberry: #8B2F3B;
  --color-rose: #C4626E;
  --color-peach: #F2B89A;
  --color-clay-brown: #9E7A70;
  --color-sand: #D7B8A5;
  --color-white: #FFFFFF;
  --color-ivory: #FAF9F6;
  --color-charcoal: #2E2E2E;
}

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: #8B2F3B;
  --role-link: #8B2F3B;
  --role-btn-primary-bg: #8B2F3B;
  --role-btn-outlined-border: #C4626E;
  --role-btn-outlined-text: #C4626E;
  --role-headline: #C4626E;
  --role-btn-secondary-bg: #F2B89A;
  --role-icon: #9E7A70;
  --role-border: #9E7A70;
  --role-divider: #9E7A70;
  --role-outline: #9E7A70;
  --role-bg-light: #D7B8A5;
  --role-bg-dark: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-text: #2E2E2E;
  --role-btn-secondary-text: #2E2E2E;
}

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.
{
    "cranberry": "#8B2F3B",
    "rose": "#C4626E",
    "peach": "#F2B89A",
    "clay-brown": "#9E7A70",
    "sand": "#D7B8A5",
    "white": "#FFFFFF",
    "ivory": "#FAF9F6",
    "charcoal": "#2E2E2E"
}
Press Space to load new palette