Dark Turquoise#00CED1
Lavender#B497BD
Coral#FF6F61
Light Steel Blue#DCE3E8
Light Goldenrod#FFD966
Palette direction

Playful Energy Entertainment Color Palette

This vibrant color palette is inspired by the bright, playful, and distinctive colors of the characters in the image, combining energetic hues with softer accents and grounding neutrals for a balanced and engaging brand identity.

ComplementaryCreativevibrantplayfulfantasycharacters
palette-preview.example
Creative color direction

Playful Energy Entertainment Color Palette

This vibrant color palette is inspired by the bright, playful, and distinctive colors of the characters in the image, combining energetic hues with softer accents and grounding neutrals for a balanced and engaging brand identity.

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 Jet #2D2D2Don Dark Turquoise #00CED17.0:1 Excellent
Logo Jet #2D2D2Don Lavender #B497BD5.3:1 Strong
Logo Jet #2D2D2Don Coral #FF6F615.0:1 Strong
Logo Jet #2D2D2Don White #FFFFFF13.8:1 Excellent
Icon color
BackgroundDark Turquoise#00CED1TextJet#2D2D2D
Primary Button7.05:1
AAA

Best for the main action users should notice first.

BackgroundLavender#B497BDTextJet#2D2D2D
Secondary Button5.31:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextDark Turquoise#00CED1
Outlined Button1.95:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextDark Turquoise#00CED1
Text Button1.95:1
Low

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

Palette composition8 colorsComplementary color relationship
9:41Playful Energy Entertainment Color Palette Color role balance
Complementary 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.

CPlayful Energy Entertainment Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine bright cyan, pastel violet, and vibrant coral which together create a lively, youthful, and distinctive combination reflecting the colorful characters.

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.Dark Turquoise #00CED1
HeadlineUsed for main titles and key messages.Dark Turquoise #00CED1
LinkUsed for links and interactive text.Dark Turquoise #00CED1

Buttons

Primary Button
BackgroundDark Turquoise #00CED1
TextJet #2D2D2D
Secondary Button
BackgroundLavender #B497BD
TextJet #2D2D2D
Outlined Button
BackgroundDark Turquoise #00CED1
TextDark Turquoise #00CED1

Interface

TextDefault readable body text.Jet #2D2D2D
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Cultured #F8F8F8
IconSmall interface icons and marks.Light Steel Blue #DCE3E8
BorderCards, inputs, and component borders.Light Steel Blue #DCE3E8
DividerSubtle separators between content.Light Steel Blue #DCE3E8
OutlineFocus rings and emphasis outlines.Light Steel Blue #DCE3E8

Palette Colors

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

Main (Brand) Colors

The main colors combine bright cyan, pastel violet, and vibrant coral which together create a lively, youthful, and distinctive combination reflecting the colorful characters.

PrimaryDark Turquoise

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

Dark Turquoise brings vibrant energy and a fresh modern appeal that captures attention and conveys creativity.

HEX#00CED1
RGB0, 206, 209
HSL181, 100, 41
CMYK100, 1, 0, 18
SecondaryLavender

RolesBtn Secondary Bg

Lavender adds a soft, calming contrast to the vibrant primary, evoking fantasy and whimsy.

HEX#B497BD
RGB180, 151, 189
HSL286, 22, 67
CMYK5, 20, 0, 26
TertiaryCoral

Coral infuses warmth and a bold pop of color that energizes and balances the cooler tones.

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

Support Colors

The support colors introduce softer and earthier tones to complement the vibrancy of the main palette, providing balance without detracting from the bright accents.

Light Steel Blue

RolesIcon, Border, Divider, Outline

Light Steel Blue offers a neutral cool tone that supports the brighter colors with subtle sophistication.

HEX#DCE3E8
RGB220, 227, 232
HSL205, 21, 89
CMYK5, 2, 0, 9
Light Goldenrod

Light Goldenrod adds a gentle sunny accent that harmonizes with coral and adds a cheerful dimension.

HEX#FFD966
RGB255, 217, 102
HSL45, 100, 70
CMYK0, 15, 60, 0

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
Cultured

RolesBg Dark

HEX#F8F8F8
RGB248, 248, 248
HSL0, 0, 97
CMYK0, 0, 0, 3
Jet

RolesText, Btn Primary Text, Btn Secondary Text

HEX#2D2D2D
RGB45, 45, 45
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-dark-turquoise: #00CED1;
  --color-lavender: #B497BD;
  --color-coral: #FF6F61;
  --color-light-steel-blue: #DCE3E8;
  --color-light-goldenrod: #FFD966;
  --color-white: #FFFFFF;
  --color-cultured: #F8F8F8;
  --color-jet: #2D2D2D;
}

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: #00CED1;
  --role-link: #00CED1;
  --role-btn-primary-bg: #00CED1;
  --role-btn-outlined-border: #00CED1;
  --role-btn-outlined-text: #00CED1;
  --role-headline: #00CED1;
  --role-btn-secondary-bg: #B497BD;
  --role-icon: #DCE3E8;
  --role-border: #DCE3E8;
  --role-divider: #DCE3E8;
  --role-outline: #DCE3E8;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #F8F8F8;
  --role-text: #2D2D2D;
  --role-btn-primary-text: #2D2D2D;
  --role-btn-secondary-text: #2D2D2D;
}

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.
{
    "dark-turquoise": "#00CED1",
    "lavender": "#B497BD",
    "coral": "#FF6F61",
    "light-steel-blue": "#DCE3E8",
    "light-goldenrod": "#FFD966",
    "white": "#FFFFFF",
    "cultured": "#F8F8F8",
    "jet": "#2D2D2D"
}
Press Space to load new palette