Pastel Pink#F57C99
Light Sky Blue#7AB4D6
Moderate Purple#7F55A7
Sage Green#8DBEAD
Warm Blush#F6D1B3
Palette direction

Whimsical Pastel Artistic Color Palette

This palette captures the whimsical and dynamic essence of the image, balancing vibrant pastel pinks and light blues with grounded purples and greens, harmonized by clean neutrals for versatile use.

CustomCreativepastelwhimsicalvibrantartistic
palette-preview.example
Creative color direction

Whimsical Pastel Artistic Color Palette

This palette captures the whimsical and dynamic essence of the image, balancing vibrant pastel pinks and light blues with grounded purples and greens, harmonized by clean neutrals for versatile use.

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 Black #2E2E2Eon Light Sky Blue #7AB4D66.0:1 Strong
Logo Pure White #FFFFFFon Moderate Purple #7F55A75.6:1 Strong
Logo Charcoal Black #2E2E2Eon Pastel Pink #F57C995.3:1 Strong
Logo Charcoal Black #2E2E2Eon Pure White #FFFFFF13.6:1 Excellent
Icon color
BackgroundPastel Pink#F57C99TextCharcoal Black#2E2E2E
Primary Button5.32:1
AA

Best for the main action users should notice first.

BackgroundLight Sky Blue#7AB4D6TextCharcoal Black#2E2E2E
Secondary Button6.03:1
AA

Useful for softer choices and secondary paths.

BackgroundWarm Blush#F6D1B3TextPastel Pink#F57C99
Outlined Button1.79:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWarm Blush#F6D1B3TextPastel Pink#F57C99
Text Button1.79:1
Low

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

Palette composition8 colorsCustom color relationship
9:41Whimsical Pastel Artistic 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.

CWhimsical Pastel Artistic Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors create a balanced system using a lively pinkish red with contrasting soft blue and rich purple, fostering a whimsical yet grounded visual identity.

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.Pastel Pink #F57C99
HeadlineUsed for main titles and key messages.Moderate Purple #7F55A7
LinkUsed for links and interactive text.Pastel Pink #F57C99

Buttons

Primary Button
BackgroundPastel Pink #F57C99
TextCharcoal Black #2E2E2E
Secondary Button
BackgroundLight Sky Blue #7AB4D6
TextCharcoal Black #2E2E2E
Outlined Button
BackgroundPastel Pink #F57C99
TextPastel Pink #F57C99

Interface

TextDefault readable body text.Charcoal Black #2E2E2E
Bg LightLight page or section background.Warm Blush #F6D1B3
Bg DarkDark page or section background.Pure White #FFFFFF
IconSmall interface icons and marks.Sage Green #8DBEAD
BorderCards, inputs, and component borders.Sage Green #8DBEAD
DividerSubtle separators between content.Sage Green #8DBEAD
OutlineFocus rings and emphasis outlines.Sage Green #8DBEAD

Palette Colors

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

Main (Brand) Colors

The main colors create a balanced system using a lively pinkish red with contrasting soft blue and rich purple, fostering a whimsical yet grounded visual identity.

PrimaryPastel Pink

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

Pastel Pink brings vibrant energy and playfulness, making it an excellent choice for the brand logo and primary interactive elements.

HEX#F57C99
RGB245, 124, 153
HSL346, 86, 72
CMYK0, 49, 38, 4
SecondaryLight Sky Blue

RolesBtn Secondary Bg

Light Sky Blue adds freshness and calm contrast, supporting call-to-action buttons distinctly from the pink without overpowering.

HEX#7AB4D6
RGB122, 180, 214
HSL202, 53, 66
CMYK43, 16, 0, 16
TertiaryModerate Purple

RolesHeadline

Moderate Purple enriches the palette with creativity and depth, perfect for headlines to retain focus while complementing the primary colors.

HEX#7F55A7
RGB127, 85, 167
HSL271, 33, 49
CMYK24, 49, 0, 35

Support Colors

Supporting accents extend the palette with soft greens and a warm blush that balance vibrancy with softness and reinforce brand harmony.

Sage Green

RolesIcon, Border, Divider, Outline

Sage Green smoothly balances the vibrancy of pink and purple with soothing, natural tones, ideal for accents that do not distract.

HEX#8DBEAD
RGB141, 190, 173
HSL159, 27, 65
CMYK26, 0, 9, 25
Warm Blush

RolesBg Light

Warm Blush provides a soft and approachable light background that supports the main colors without competing for attention.

HEX#F6D1B3
RGB246, 209, 179
HSL27, 79, 83
CMYK0, 15, 27, 4

Neutral Colors

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

Pure White

RolesBg Dark

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Ivory White
HEX#F9F9F9
RGB249, 249, 249
HSL0, 0, 98
CMYK0, 0, 0, 2
Charcoal Black

RolesText, Btn Primary Text, 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-pastel-pink: #F57C99;
  --color-light-sky-blue: #7AB4D6;
  --color-moderate-purple: #7F55A7;
  --color-sage-green: #8DBEAD;
  --color-warm-blush: #F6D1B3;
  --color-pure-white: #FFFFFF;
  --color-ivory-white: #F9F9F9;
  --color-charcoal-black: #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: #F57C99;
  --role-btn-primary-bg: #F57C99;
  --role-btn-outlined-border: #F57C99;
  --role-btn-outlined-text: #F57C99;
  --role-link: #F57C99;
  --role-btn-secondary-bg: #7AB4D6;
  --role-headline: #7F55A7;
  --role-icon: #8DBEAD;
  --role-border: #8DBEAD;
  --role-divider: #8DBEAD;
  --role-outline: #8DBEAD;
  --role-bg-light: #F6D1B3;
  --role-bg-dark: #FFFFFF;
  --role-text: #2E2E2E;
  --role-btn-primary-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.
{
    "pastel-pink": "#F57C99",
    "light-sky-blue": "#7AB4D6",
    "moderate-purple": "#7F55A7",
    "sage-green": "#8DBEAD",
    "warm-blush": "#F6D1B3",
    "pure-white": "#FFFFFF",
    "ivory-white": "#F9F9F9",
    "charcoal-black": "#2E2E2E"
}
Press Space to load new palette