This palette turns the image’s bold blue, soft pinks, warm cream, and coral into a polished brand system with a lively but controlled feel. The result is a recognizable identity that feels modern, approachable, and visually balanced across interfaces.
This palette turns the image’s bold blue, soft pinks, warm cream, and coral into a polished brand system with a lively but controlled feel. The result is a recognizable identity that feels modern, approachable, and visually balanced across interfaces.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine a saturated electric blue with two vivid pink-driven tones, creating a high-contrast identity that feels energetic without losing softness. Together they read as a modern, expressive system that can flex between premium and playful uses.
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 a saturated electric blue with two vivid pink-driven tones, creating a high-contrast identity that feels energetic without losing softness. Together they read as a modern, expressive system that can flex between premium and playful uses.
RolesLogo, Btn Primary Bg
This blue gives the brand a sharp, confident anchor that works well for recognition and primary actions.
#2F5BD647, 91, 214224, 67, 5178, 57, 0, 16RolesLink, Btn Secondary Bg
This pink adds a lively, expressive signal that keeps the palette contemporary and memorable.
#F58BD2245, 139, 210320, 84, 750, 43, 14, 4RolesHeadline, Btn Outlined Border, Btn Outlined Text
This coral bridges the cooler blue and the softer pinks with a warm, human tone that supports emphasis.
#FFA6A0255, 166, 1604, 100, 810, 35, 37, 0The support colors extend the main palette with warm softness and a deeper rosy accent, keeping the system cohesive without competing with the core hues. They are best used for subtle UI accents, states, and secondary visual details.
RolesIcon, Border
This muted rose quiets the brighter pinks and helps interface elements feel softer and more refined.
#F2B8C9242, 184, 201342, 69, 840, 24, 17, 5RolesDivider, Outline
This restrained warm accent supports separation and structure while staying visually subordinate to the main hues.
#E79AA1231, 154, 161355, 62, 750, 33, 30, 9Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F7F3EE247, 243, 23833, 36, 950, 2, 4, 3RolesBg Dark, Text, Btn Secondary Text
#11111117, 17, 170, 0, 70, 0, 0, 93Copy 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-electric-cobalt: #2F5BD6;
--color-petal-magenta: #F58BD2;
--color-coral-blush: #FFA6A0;
--color-dusty-rose: #F2B8C9;
--color-warm-petal: #E79AA1;
--color-pure-white: #FFFFFF;
--color-soft-porcelain: #F7F3EE;
--color-ink-black: #111111;
}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: #2F5BD6;
--role-btn-primary-bg: #2F5BD6;
--role-link: #F58BD2;
--role-btn-secondary-bg: #F58BD2;
--role-headline: #FFA6A0;
--role-btn-outlined-border: #FFA6A0;
--role-btn-outlined-text: #FFA6A0;
--role-icon: #F2B8C9;
--role-border: #F2B8C9;
--role-divider: #E79AA1;
--role-outline: #E79AA1;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #111111;
--role-text: #111111;
--role-btn-secondary-text: #111111;
}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.{
"electric-cobalt": "#2F5BD6",
"petal-magenta": "#F58BD2",
"coral-blush": "#FFA6A0",
"dusty-rose": "#F2B8C9",
"warm-petal": "#E79AA1",
"pure-white": "#FFFFFF",
"soft-porcelain": "#F7F3EE",
"ink-black": "#111111"
}