Peach#F9B384
Coral#F37C6A
Burnt Orange#E96E3E
Soft Pink#E3B8B1
Muted Plum#A37482
Palette direction

Pastel Artist Balance Color Palette

This palette blends soft pastels and warm neutrals inspired by the image, creating a harmonious system that feels inviting, balanced, and artistic with distinct button and text contrasts for usability.

MonochromaticCreativepastelwarmbalancedinviting
palette-preview.example
Creative color direction

Pastel Artist Balance Color Palette

This palette blends soft pastels and warm neutrals inspired by the image, creating a harmonious system that feels inviting, balanced, and artistic with distinct button and text contrasts for usability.

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 #4E4A48on Peach #F9B3844.9:1 Strong
Logo Charcoal #4E4A48on White #FFFFFF8.8:1 Excellent
Logo White #FFFFFFon Charcoal #4E4A488.8:1 Excellent
Logo Charcoal #4E4A48on Soft Pink #E3B8B14.9:1 Strong
Icon color
BackgroundPeach#F9B384TextCharcoal#4E4A48
Primary Button4.93:1
AA

Best for the main action users should notice first.

BackgroundCoral#F37C6ATextCharcoal#4E4A48
Secondary Button3.30:1
Large text

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextPeach#F9B384
Outlined Button1.78:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextPeach#F9B384
Text Button1.78:1
Low

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

Palette composition8 colorsMonochromatic color relationship
9:41Pastel Artist Balance Color Palette Color role balance
Monochromatic 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.

CPastel Artist Balance Color PaletteCreative 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.Peach #F9B384
HeadlineUsed for main titles and key messages.Coral #F37C6A
LinkUsed for links and interactive text.Peach #F9B384

Buttons

Primary Button
BackgroundPeach #F9B384
TextCharcoal #4E4A48
Secondary Button
BackgroundCoral #F37C6A
TextCharcoal #4E4A48
Outlined Button
BackgroundPeach #F9B384
TextPeach #F9B384

Interface

TextDefault readable body text.Charcoal #4E4A48
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Ivory #F6F4F3
IconSmall interface icons and marks.Soft Pink #E3B8B1
BorderCards, inputs, and component borders.Soft Pink #E3B8B1
DividerSubtle separators between content.Soft Pink #E3B8B1
OutlineFocus rings and emphasis outlines.Soft Pink #E3B8B1

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 from warm peachy tones to soft coral and gentle orange, creating a warm, artistic flow recognized with ease.

PrimaryPeach

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

Peach offers a warm and friendly foundation that evokes creativity and approachability.

HEX#F9B384
RGB249, 179, 132
HSL24, 91, 75
CMYK0, 28, 47, 2
SecondaryCoral

RolesBtn Secondary Bg, Headline

Coral adds energy and vibrance, stimulating engagement and visual interest.

HEX#F37C6A
RGB243, 124, 106
HSL8, 85, 68
CMYK0, 49, 56, 5
TertiaryBurnt Orange

Burnt Orange provides a strong yet warm contrast for primary button text ensuring readability.

HEX#E96E3E
RGB233, 110, 62
HSL17, 80, 58
CMYK0, 53, 73, 9

Support Colors

The support colors extend the palette with soft pink and muted plum, balancing the warm main hues with cool, subtle accents that remain visually subordinate.

Soft Pink

RolesIcon, Border, Divider, Outline

Soft Pink complements main warm tones with a gentle, muted touch offering visual softness.

HEX#E3B8B1
RGB227, 184, 177
HSL8, 47, 79
CMYK0, 19, 22, 11
Muted Plum

Muted Plum adds depth and cool balance, enhancing overall palette harmony without overpowering.

HEX#A37482
RGB163, 116, 130
HSL342, 20, 55
CMYK0, 29, 20, 36

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

RolesBg Dark

HEX#F6F4F3
RGB246, 244, 243
HSL20, 14, 96
CMYK0, 1, 1, 4
Charcoal

RolesText, Btn Primary Text, Btn Secondary Text

HEX#4E4A48
RGB78, 74, 72
HSL20, 4, 29
CMYK0, 5, 8, 69

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-peach: #F9B384;
  --color-coral: #F37C6A;
  --color-burnt-orange: #E96E3E;
  --color-soft-pink: #E3B8B1;
  --color-muted-plum: #A37482;
  --color-white: #FFFFFF;
  --color-ivory: #F6F4F3;
  --color-charcoal: #4E4A48;
}

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: #F9B384;
  --role-link: #F9B384;
  --role-btn-primary-bg: #F9B384;
  --role-btn-outlined-border: #F9B384;
  --role-btn-outlined-text: #F9B384;
  --role-btn-secondary-bg: #F37C6A;
  --role-headline: #F37C6A;
  --role-icon: #E3B8B1;
  --role-border: #E3B8B1;
  --role-divider: #E3B8B1;
  --role-outline: #E3B8B1;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #F6F4F3;
  --role-text: #4E4A48;
  --role-btn-primary-text: #4E4A48;
  --role-btn-secondary-text: #4E4A48;
}

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.
{
    "peach": "#F9B384",
    "coral": "#F37C6A",
    "burnt-orange": "#E96E3E",
    "soft-pink": "#E3B8B1",
    "muted-plum": "#A37482",
    "white": "#FFFFFF",
    "ivory": "#F6F4F3",
    "charcoal": "#4E4A48"
}
Press Space to load new palette