Coral#FF6F61
Peach#FFB07C
Lavender#9B8CE6
Teal#6CA6A9
Sand#E9D8C2
Palette direction

Coral Peach Lavender Color Palette

This palette blends vibrant and nurturing hues that evoke creativity and warmth, perfectly embodying a premium children's lifestyle brand focused on growth and identity. The main colors form a triadic scheme providing energy and balance, while the support colors offer gentle accents that complement without overwhelming, and the neutrals anchor readability and usability across digital interfaces.

CustomFashion Beautychildrenlifestylepremiumconfidence
palette-preview.example
Fashion Beauty color direction

Coral Peach Lavender Color Palette

This palette blends vibrant and nurturing hues that evoke creativity and warmth, perfectly embodying a premium children's lifestyle brand focused on growth and identity. The main colors form a triadic scheme providing energy and balance, while the support colors offer gentle accents that complement without overwhelming, and the neutrals anchor readability and usability 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 #3B3A38on Peach #FFB07C6.4:1 Strong
Logo Charcoal #3B3A38on Ivory #FFFFFF11.4:1 Excellent
Logo Ivory #FFFFFFon Charcoal #3B3A3811.4:1 Excellent
Logo Charcoal #3B3A38on Sand #E9D8C28.2:1 Excellent
Icon color
BackgroundCoral#FF6F61TextCharcoal#3B3A38
Primary Button4.17:1
Large text

Best for the main action users should notice first.

BackgroundPeach#FFB07CTextCharcoal#3B3A38
Secondary Button6.36:1
AA

Useful for softer choices and secondary paths.

BackgroundIvory#FFFFFFTextCoral#FF6F61
Outlined Button2.73:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundIvory#FFFFFFTextCoral#FF6F61
Text Button2.73:1
Low

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

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

A usable
color system.

The triadic main colors—Coral, Peach, and Lavender—create a lively yet harmonious foundation that reflects creativity, warmth, and imagination, essential for engaging children and their families.

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.Peach #FFB07C
LinkUsed for links and interactive text.Coral #FF6F61

Buttons

Primary Button
BackgroundCoral #FF6F61
TextCharcoal #3B3A38
Secondary Button
BackgroundPeach #FFB07C
TextCharcoal #3B3A38
Outlined Button
BackgroundCoral #FF6F61
TextCoral #FF6F61

Interface

TextDefault readable body text.Charcoal #3B3A38
Bg LightLight page or section background.Ivory #FFFFFF
Bg DarkDark page or section background.Almond #F7F5F2
IconSmall interface icons and marks.Teal #6CA6A9
BorderCards, inputs, and component borders.Teal #6CA6A9
DividerSubtle separators between content.Teal #6CA6A9
OutlineFocus rings and emphasis outlines.Teal #6CA6A9

Palette Colors

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

Main (Brand) Colors

The triadic main colors—Coral, Peach, and Lavender—create a lively yet harmonious foundation that reflects creativity, warmth, and imagination, essential for engaging children and their families.

PrimaryCoral

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

Coral evokes youthful energy and warmth, fostering a sense of confidence and engagement for the brand's identity.

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

RolesBtn Secondary Bg, Headline

Peach brings nurturing softness and approachability, supporting the emotional connection in storytelling and design.

HEX#FFB07C
RGB255, 176, 124
HSL24, 100, 74
CMYK0, 31, 51, 0
TertiaryLavender

Lavender adds a whimsical and imaginative touch, encouraging creativity and growth in the brand experience.

HEX#9B8CE6
RGB155, 140, 230
HSL250, 64, 73
CMYK33, 39, 0, 10

Support Colors

The support colors extend the main palette with muted, cooler tones of teal and sand that maintain harmony and provide subtle visual interest without overpowering the vibrant main colors.

Teal

RolesIcon, Border, Divider, Outline

Teal balances warmth with a soothing coolness, complementing the livelier main colors and enhancing interface elements for clarity.

HEX#6CA6A9
RGB108, 166, 169
HSL183, 26, 54
CMYK36, 2, 0, 34
Sand

Sand offers a calm, neutral accent that reinforces warmth and softness, helping to balance vibrant hues while remaining understated.

HEX#E9D8C2
RGB233, 216, 194
HSL34, 47, 84
CMYK0, 7, 17, 9

Neutral Colors

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

Ivory

RolesBg Light

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

RolesBg Dark

HEX#F7F5F2
RGB247, 245, 242
HSL36, 24, 96
CMYK0, 1, 2, 3
Charcoal

RolesText, Btn Primary Text, Btn Secondary Text

HEX#3B3A38
RGB59, 58, 56
HSL40, 3, 23
CMYK0, 2, 5, 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: #FF6F61;
  --color-peach: #FFB07C;
  --color-lavender: #9B8CE6;
  --color-teal: #6CA6A9;
  --color-sand: #E9D8C2;
  --color-ivory: #FFFFFF;
  --color-almond: #F7F5F2;
  --color-charcoal: #3B3A38;
}

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-btn-secondary-bg: #FFB07C;
  --role-headline: #FFB07C;
  --role-icon: #6CA6A9;
  --role-border: #6CA6A9;
  --role-divider: #6CA6A9;
  --role-outline: #6CA6A9;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #F7F5F2;
  --role-text: #3B3A38;
  --role-btn-primary-text: #3B3A38;
  --role-btn-secondary-text: #3B3A38;
}

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",
    "peach": "#FFB07C",
    "lavender": "#9B8CE6",
    "teal": "#6CA6A9",
    "sand": "#E9D8C2",
    "ivory": "#FFFFFF",
    "almond": "#F7F5F2",
    "charcoal": "#3B3A38"
}
Press Space to load new palette