Shocking Pink#FF2D70
Coral Red#FF5973
Tomato Red#FC5C63
Light Salmon#FFA07A
Dark Salmon#E9967A
Palette direction

Vibrant Pink Playful Color Palette

This palette channels the vibrant and playful energy of the image's bright pinks with complementary warm accents and balancing neutrals, forming a lively yet harmonious system perfect for creative and bold brand identities.

MonochromaticCreativepinkvibrantplayfulbold
palette-preview.example
Creative color direction

Vibrant Pink Playful Color Palette

This palette channels the vibrant and playful energy of the image's bright pinks with complementary warm accents and balancing neutrals, forming a lively yet harmonious system perfect for creative and bold brand identities.

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 Dark Charcoal #3A2D3Bon White #FFFFFF13.0:1 Excellent
Logo White #FFFFFFon Dark Charcoal #3A2D3B13.0:1 Excellent
Logo Dark Charcoal #3A2D3Bon Lavender Mist #F0E6F010.7:1 Excellent
Logo Dark Charcoal #3A2D3Bon Light Salmon #FFA07A6.5:1 Strong
Icon color
BackgroundShocking Pink#FF2D70TextDark Charcoal#3A2D3B
Primary Button3.62:1
Large text

Best for the main action users should notice first.

BackgroundCoral Red#FF5973TextDark Charcoal#3A2D3B
Secondary Button4.28:1
Large text

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextShocking Pink#FF2D70
Outlined Button3.58:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextShocking Pink#FF2D70
Text Button3.58:1
Large text

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

Palette composition8 colorsMonochromatic color relationship
9:41Vibrant Pink Playful 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.

CVibrant Pink Playful 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.Shocking Pink #FF2D70
HeadlineUsed for main titles and key messages.Tomato Red #FC5C63
LinkUsed for links and interactive text.Shocking Pink #FF2D70

Buttons

Primary Button
BackgroundShocking Pink #FF2D70
TextDark Charcoal #3A2D3B
Secondary Button
BackgroundCoral Red #FF5973
TextDark Charcoal #3A2D3B
Outlined Button
BackgroundShocking Pink #FF2D70
TextShocking Pink #FF2D70

Interface

TextDefault readable body text.Dark Charcoal #3A2D3B
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Lavender Mist #F0E6F0
IconSmall interface icons and marks.Light Salmon #FFA07A
BorderCards, inputs, and component borders.Light Salmon #FFA07A
DividerSubtle separators between content.Light Salmon #FFA07A
OutlineFocus rings and emphasis outlines.Light Salmon #FFA07A

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 scheme of bright pinks and reds that create a vibrant and eye-catching visual impact, establishing strong brand recognition.

PrimaryShocking Pink

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

Shocking Pink is bold and energetic, conveying excitement and youthful vibrancy essential for standout brand presence.

HEX#FF2D70
RGB255, 45, 112
HSL341, 100, 59
CMYK0, 82, 56, 0
SecondaryCoral Red

RolesBtn Secondary Bg

Coral Red adds warmth and approachability, complementing the primary pink while remaining distinct for secondary actions.

HEX#FF5973
RGB255, 89, 115
HSL351, 100, 67
CMYK0, 65, 55, 0
TertiaryTomato Red

RolesHeadline

Tomato Red provides a strong, lively accent that supports headlines and key emphasis without overpowering main colors.

HEX#FC5C63
RGB252, 92, 99
HSL357, 96, 67
CMYK0, 63, 61, 1

Support Colors

Support colors extend the main palette with softer, warm tones and a muted complementary orange that balances the intensity, enabling versatile usage across interfaces.

Light Salmon

RolesIcon, Border, Divider, Outline

Light Salmon offers a gentle warmth that complements the reds and pinks by providing subtle contrast for icons and borders.

HEX#FFA07A
RGB255, 160, 122
HSL17, 100, 74
CMYK0, 37, 52, 0
Dark Salmon

Dark Salmon deepens the palette's warmth and adds depth for use in interface elements requiring differentiation without harsh contrast.

HEX#E9967A
RGB233, 150, 122
HSL15, 72, 70
CMYK0, 36, 48, 9

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
Lavender Mist

RolesBg Dark

HEX#F0E6F0
RGB240, 230, 240
HSL300, 25, 92
CMYK0, 4, 0, 6
Dark Charcoal

RolesText, Btn Primary Text, Btn Secondary Text

HEX#3A2D3B
RGB58, 45, 59
HSL296, 13, 20
CMYK2, 24, 0, 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-shocking-pink: #FF2D70;
  --color-coral-red: #FF5973;
  --color-tomato-red: #FC5C63;
  --color-light-salmon: #FFA07A;
  --color-dark-salmon: #E9967A;
  --color-white: #FFFFFF;
  --color-lavender-mist: #F0E6F0;
  --color-dark-charcoal: #3A2D3B;
}

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: #FF2D70;
  --role-link: #FF2D70;
  --role-btn-primary-bg: #FF2D70;
  --role-btn-outlined-border: #FF2D70;
  --role-btn-outlined-text: #FF2D70;
  --role-btn-secondary-bg: #FF5973;
  --role-headline: #FC5C63;
  --role-icon: #FFA07A;
  --role-border: #FFA07A;
  --role-divider: #FFA07A;
  --role-outline: #FFA07A;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #F0E6F0;
  --role-text: #3A2D3B;
  --role-btn-primary-text: #3A2D3B;
  --role-btn-secondary-text: #3A2D3B;
}

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.
{
    "shocking-pink": "#FF2D70",
    "coral-red": "#FF5973",
    "tomato-red": "#FC5C63",
    "light-salmon": "#FFA07A",
    "dark-salmon": "#E9967A",
    "white": "#FFFFFF",
    "lavender-mist": "#F0E6F0",
    "dark-charcoal": "#3A2D3B"
}
Press Space to load new palette