This palette draws inspiration from the image's vibrant mix of cool and warm tones, combining deep purples, soft teals, bright yellows, and warm reds that create a dynamic and intriguing visual identity. The choice of colors balances boldness with subtlety, reflecting the conceptual brain theme and the surrounding abstract elements.
This palette draws inspiration from the image's vibrant mix of cool and warm tones, combining deep purples, soft teals, bright yellows, and warm reds that create a dynamic and intriguing visual identity. The choice of colors balances boldness with subtlety, reflecting the conceptual brain theme and the surrounding abstract elements.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine a strong purple hue with yellow and reddish-orange accents, forming a split complementary scheme that offers vibrant contrast and balance for a creative brand.
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 strong purple hue with yellow and reddish-orange accents, forming a split complementary scheme that offers vibrant contrast and balance for a creative brand.
RolesLogo, Btn Primary Bg, Btn Outlined Border
Slate Purple brings depth and creativity, making it a compelling primary brand color.
#5B4B8A91, 75, 138255, 30, 4234, 46, 0, 46RolesBtn Secondary Bg, Headline
Goldenrod Yellow adds energy and optimism, providing a bright contrast to the purple and reinforcing call-to-action elements.
#F7E23B247, 226, 5953, 92, 600, 9, 76, 3RolesLink, Btn Outlined Text
Burnt Coral offers warmth and vibrancy, complementing both the purple and yellow with a lively accent.
#CF5A3E207, 90, 6212, 60, 530, 57, 70, 19The support colors extend the palette with softer and deeper versions of teal and blue tones, which subdue the vivid main colors while enhancing the overall balance and usability.
RolesIcon, Border, Divider, Outline
Deep Teal grounds the palette with a calming presence that balances the warmth of the main colors.
#46818970, 129, 137187, 32, 4149, 6, 0, 46Slate Blue subtly reinforces the cool undertones, supporting the visual hierarchy without overpowering the main hues.
#425E6B66, 94, 107199, 24, 3438, 12, 0, 58Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F6F5F4246, 245, 24430, 10, 960, 0, 1, 4RolesText, Btn Secondary Text
#2C2A2E44, 42, 46270, 5, 174, 9, 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-slate-purple: #5B4B8A;
--color-goldenrod-yellow: #F7E23B;
--color-burnt-coral: #CF5A3E;
--color-deep-teal: #468189;
--color-slate-blue: #425E6B;
--color-pure-white: #FFFFFF;
--color-off-white: #F6F5F4;
--color-charcoal-black: #2C2A2E;
}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: #5B4B8A;
--role-btn-primary-bg: #5B4B8A;
--role-btn-outlined-border: #5B4B8A;
--role-btn-secondary-bg: #F7E23B;
--role-headline: #F7E23B;
--role-link: #CF5A3E;
--role-btn-outlined-text: #CF5A3E;
--role-icon: #468189;
--role-border: #468189;
--role-divider: #468189;
--role-outline: #468189;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #F6F5F4;
--role-text: #2C2A2E;
--role-btn-secondary-text: #2C2A2E;
}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.{
"slate-purple": "#5B4B8A",
"goldenrod-yellow": "#F7E23B",
"burnt-coral": "#CF5A3E",
"deep-teal": "#468189",
"slate-blue": "#425E6B",
"pure-white": "#FFFFFF",
"off-white": "#F6F5F4",
"charcoal-black": "#2C2A2E"
}