This palette is inspired by the image's dynamic dark tones and vibrant accent, combining deep purple, rich orange, and charcoal with balanced supporting shades and neutrals to create a visually striking and modern brand identity.
This palette is inspired by the image's dynamic dark tones and vibrant accent, combining deep purple, rich orange, and charcoal with balanced supporting shades and neutrals to create a visually striking and modern brand identity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors balance a dominant deep indigo with a vibrant orange accent and complementary charcoal to create a harmonious but dynamic system.
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 balance a dominant deep indigo with a vibrant orange accent and complementary charcoal to create a harmonious but dynamic system.
RolesLogo, Btn Primary Bg, Btn Outlined Border
Deep Indigo conveys creativity and sophistication, providing a strong foundation for the brand identity.
#3B1F5859, 31, 88269, 48, 2333, 65, 0, 65RolesLink, Btn Secondary Bg, Btn Outlined Text
Burnt Orange introduces energetic warmth and vibrance, making key actions and accents stand out clearly.
#E67322230, 115, 3425, 80, 520, 50, 85, 10RolesHeadline
Charcoal offers depth and balance as a complementary main color, grounding the palette without overpowering the vibrant hues.
#29292941, 41, 410, 0, 160, 0, 0, 84Support colors extend the main colors with softer dark mauve and muted apricot to add visual interest without competing with the core identity.
RolesIcon, Border, Divider, Outline
Dark Mauve complements Deep Indigo by softening the purple depth and supporting interface elements delicately.
#5C3A7D92, 58, 125270, 37, 3626, 54, 0, 51Muted Apricot balances the Burnt Orange with a neutral warmth that enhances the palette’s vibrancy while maintaining subtlety.
#D99B6C217, 155, 10826, 59, 640, 29, 50, 15Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F5F5F5245, 245, 2450, 0, 960, 0, 0, 4RolesText, Btn Secondary Text
#1A1A1A26, 26, 260, 0, 100, 0, 0, 90Copy 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-deep-indigo: #3B1F58;
--color-burnt-orange: #E67322;
--color-charcoal: #292929;
--color-dark-mauve: #5C3A7D;
--color-muted-apricot: #D99B6C;
--color-pure-white: #FFFFFF;
--color-light-gray: #F5F5F5;
--color-dark-near-black: #1A1A1A;
}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: #3B1F58;
--role-btn-primary-bg: #3B1F58;
--role-btn-outlined-border: #3B1F58;
--role-link: #E67322;
--role-btn-secondary-bg: #E67322;
--role-btn-outlined-text: #E67322;
--role-headline: #292929;
--role-icon: #5C3A7D;
--role-border: #5C3A7D;
--role-divider: #5C3A7D;
--role-outline: #5C3A7D;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #F5F5F5;
--role-text: #1A1A1A;
--role-btn-secondary-text: #1A1A1A;
}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.{
"deep-indigo": "#3B1F58",
"burnt-orange": "#E67322",
"charcoal": "#292929",
"dark-mauve": "#5C3A7D",
"muted-apricot": "#D99B6C",
"pure-white": "#FFFFFF",
"light-gray": "#F5F5F5",
"dark-near-black": "#1A1A1A"
}