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.
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 systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
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.Assign existing palette colors to brand, typography, and interface roles.
A compact view of the brand, support, and neutral colors that make up this 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.
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.
#00CED10, 206, 209181, 100, 41100, 1, 0, 18RolesBtn Secondary Bg
Lavender adds a soft, calming contrast to the vibrant primary, evoking fantasy and whimsy.
#B497BD180, 151, 189286, 22, 675, 20, 0, 26Coral infuses warmth and a bold pop of color that energizes and balances the cooler tones.
#FF6F61255, 111, 975, 100, 690, 56, 62, 0The support colors introduce softer and earthier tones to complement the vibrancy of the main palette, providing balance without detracting from the bright accents.
RolesIcon, Border, Divider, Outline
Light Steel Blue offers a neutral cool tone that supports the brighter colors with subtle sophistication.
#DCE3E8220, 227, 232205, 21, 895, 2, 0, 9Light Goldenrod adds a gentle sunny accent that harmonizes with coral and adds a cheerful dimension.
#FFD966255, 217, 10245, 100, 700, 15, 60, 0Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F8F8F8248, 248, 2480, 0, 970, 0, 0, 3RolesText, Btn Primary Text, Btn Secondary Text
#2D2D2D45, 45, 450, 0, 180, 0, 0, 82Copy palette values for design systems, websites, and client handoff.
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;
}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;
}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"
}