This palette turns the image’s bold purple, hot orange, and pale buttery yellow into a crisp, poster-like identity system with strong contrast and a playful editorial edge. The colors feel energetic and graphic while still staying controlled enough for branding and UI use.
This palette turns the image’s bold purple, hot orange, and pale buttery yellow into a crisp, poster-like identity system with strong contrast and a playful editorial edge. The colors feel energetic and graphic while still staying controlled enough for branding and UI use.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors pair a saturated violet with a bright orange and a warm golden yellow, creating a vivid, recognizable system with strong visual tension. The relationship feels energetic and poster-driven without relying on a standard tech-蓝
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 pair a saturated violet with a bright orange and a warm golden yellow, creating a vivid, recognizable system with strong visual tension. The relationship feels energetic and poster-driven without relying on a standard tech-蓝
RolesLogo, Btn Primary Bg, Headline
A deep violet anchor that gives the brand a confident, memorable core and keeps the palette grounded.
#3B005E59, 0, 94278, 100, 1837, 100, 0, 63RolesBtn Secondary Bg, Link
A sharp citrus-orange accent that adds urgency, motion, and strong call-to-action energy.
#FF4B0A255, 75, 1016, 100, 520, 71, 96, 0RolesBtn Outlined Border, Btn Outlined Text
A warm yellow highlight that broadens the system with a lighter, more tactile note while preserving the palette’s boldness.
#F0E57A240, 229, 12254, 80, 710, 5, 49, 6The support accents extend the palette with restrained cooler and softer tones that help structure the interface without competing with the main trio. They keep the system usable,
RolesIcon, Outline
A muted orchid that bridges the violet and yellow areas with a softer, utility-friendly accent.
#8B6FAF139, 111, 175266, 29, 5621, 37, 0, 31RolesBorder, Divider
A mellow apricot tone that supports separation and framing without stealing attention from the brighter main colors.
#F4C87A244, 200, 12238, 85, 720, 18, 50, 4Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F6F1E8246, 241, 23239, 44, 940, 2, 6, 4RolesBg Dark, Text, Btn Secondary Text
#17111F23, 17, 31266, 29, 926, 45, 0, 88Copy 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-midnight-plum: #3B005E;
--color-solar-pulse: #FF4B0A;
--color-lemon-static: #F0E57A;
--color-dusty-orchid: #8B6FAF;
--color-apricot-veil: #F4C87A;
--color-pure-white: #FFFFFF;
--color-alabaster-cream: #F6F1E8;
--color-near-black-ink: #17111F;
}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: #3B005E;
--role-btn-primary-bg: #3B005E;
--role-headline: #3B005E;
--role-btn-secondary-bg: #FF4B0A;
--role-link: #FF4B0A;
--role-btn-outlined-border: #F0E57A;
--role-btn-outlined-text: #F0E57A;
--role-icon: #8B6FAF;
--role-outline: #8B6FAF;
--role-border: #F4C87A;
--role-divider: #F4C87A;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-bg-dark: #17111F;
--role-text: #17111F;
--role-btn-secondary-text: #17111F;
}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.{
"midnight-plum": "#3B005E",
"solar-pulse": "#FF4B0A",
"lemon-static": "#F0E57A",
"dusty-orchid": "#8B6FAF",
"apricot-veil": "#F4C87A",
"pure-white": "#FFFFFF",
"alabaster-cream": "#F6F1E8",
"near-black-ink": "#17111F"
}