This color palette is inspired by the vibrant and diverse hues from the image, combining bold and energetic main colors with softer support hues and balanced neutrals for a dynamic yet harmonious brand identity.
This color palette is inspired by the vibrant and diverse hues from the image, combining bold and energetic main colors with softer support hues and balanced neutrals for a dynamic yet harmonious brand identity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine vivid complementary and analogous hues to create a lively, memorable palette that conveys creativity and energy while maintaining balance.
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 vivid complementary and analogous hues to create a lively, memorable palette that conveys creativity and energy while maintaining balance.
RolesLogo, Btn Primary Bg, Link
Crimson brings strong energy and passion, making it an assertive choice for brand recognition and key interactive elements.
#F12543241, 37, 67351, 88, 550, 85, 72, 5RolesBtn Secondary Bg, Headline
Royal Blue adds a trustworthy and calm quality that balances the vibrancy of crimson and anchors the palette.
#4269BA66, 105, 186221, 48, 4965, 44, 0, 27RolesBtn Outlined Border, Btn Outlined Text
Warm Mustard enhances the palette with a bright accent that complements both red and blue, improving visual interest and interaction cues.
#F2E366242, 227, 10254, 84, 670, 6, 58, 5The support colors provide softer, muted tones that extend the palette without overpowering the vivid main colors, ensuring versatile application across UI and branding.
RolesIcon, Border, Divider, Outline
Sage Green offers a gentle, natural feel that complements the energetic main colors by providing visual rest and balance.
#A4D9A9164, 217, 169126, 41, 7524, 0, 22, 15Soft Rose brings subtle warmth and softness, harmonizing with crimson and mustard while supporting the overall palette's friendliness.
#F3B7C3243, 183, 195348, 71, 840, 25, 20, 5Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F9F6F5249, 246, 24515, 25, 970, 1, 2, 2RolesBg Dark, Text
#2A2A2A42, 42, 420, 0, 160, 0, 0, 84Copy 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-crimson: #F12543;
--color-royal-blue: #4269BA;
--color-warm-mustard: #F2E366;
--color-sage-green: #A4D9A9;
--color-soft-rose: #F3B7C3;
--color-pure-white: #FFFFFF;
--color-ivory: #F9F6F5;
--color-charcoal: #2A2A2A;
}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: #F12543;
--role-btn-primary-bg: #F12543;
--role-link: #F12543;
--role-btn-secondary-bg: #4269BA;
--role-headline: #4269BA;
--role-btn-outlined-border: #F2E366;
--role-btn-outlined-text: #F2E366;
--role-icon: #A4D9A9;
--role-border: #A4D9A9;
--role-divider: #A4D9A9;
--role-outline: #A4D9A9;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #2A2A2A;
--role-text: #2A2A2A;
}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.{
"crimson": "#F12543",
"royal-blue": "#4269BA",
"warm-mustard": "#F2E366",
"sage-green": "#A4D9A9",
"soft-rose": "#F3B7C3",
"pure-white": "#FFFFFF",
"ivory": "#F9F6F5",
"charcoal": "#2A2A2A"
}