Royal Purple#5B2C82
Persimmon Orange#F68B1E
Teal Blue#1CA3A3
Lime Green#D4E157
Sunburst Gold#FFBC4B
Palette direction

Vibrant Purple Creative Color Palette

This palette is inspired by the vibrant, contrasting colors of the image's multicolored leaf logo against a deep purple background, combining a bold purple as the anchor with bright complementary accents to convey creativity and energy while maintaining balance with refined neutrals.

TriadicCreativepurpleorangegreenblue
palette-preview.example
Creative color direction

Vibrant Purple Creative Color Palette

This palette is inspired by the vibrant, contrasting colors of the image's multicolored leaf logo against a deep purple background, combining a bold purple as the anchor with bright complementary accents to convey creativity and energy while maintaining balance with refined neutrals.

Explore the color system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo Pure White #FFFFFFon Royal Purple #5B2C829.9:1 Excellent
Logo Charcoal Black #1A1A1Aon Persimmon Orange #F68B1E7.2:1 Excellent
Logo Charcoal Black #1A1A1Aon Teal Blue #1CA3A35.6:1 Strong
Logo Charcoal Black #1A1A1Aon Pure White #FFFFFF17.4:1 Excellent
Icon color
BackgroundRoyal Purple#5B2C82TextPure White#FFFFFF
Primary Button9.87:1
AAA

Best for the main action users should notice first.

BackgroundPersimmon Orange#F68B1ETextCharcoal Black#1A1A1A
Secondary Button7.15:1
AAA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextTeal Blue#1CA3A3
Outlined Button3.08:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextRoyal Purple#5B2C82
Text Button9.87:1
AAA

A quiet action for links, navigation, and inline decisions.

Palette composition8 colorsTriadic color relationship
9:41Vibrant Purple Creative Color Palette Color role balance
Triadic system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CVibrant Purple Creative Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors—deep purple, bright orange, and rich teal—work synergistically to create a vibrant yet balanced palette with dynamic contrast and clear brand recognition.

Clear roles create a consistent brand experience.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Royal Purple #5B2C82
HeadlineUsed for main titles and key messages.Persimmon Orange #F68B1E
LinkUsed for links and interactive text.Royal Purple #5B2C82

Buttons

Primary Button
BackgroundRoyal Purple #5B2C82
TextPure White #FFFFFF
Secondary Button
BackgroundPersimmon Orange #F68B1E
TextCharcoal Black #1A1A1A
Outlined Button
BackgroundTeal Blue #1CA3A3
TextTeal Blue #1CA3A3

Interface

TextDefault readable body text.Charcoal Black #1A1A1A
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Alabaster #F3F3F3
IconSmall interface icons and marks.Lime Green #D4E157
BorderCards, inputs, and component borders.Lime Green #D4E157
DividerSubtle separators between content.Lime Green #D4E157
OutlineFocus rings and emphasis outlines.Lime Green #D4E157

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

Main (Brand) Colors

The main colors—deep purple, bright orange, and rich teal—work synergistically to create a vibrant yet balanced palette with dynamic contrast and clear brand recognition.

PrimaryRoyal Purple

RolesLogo, Btn Primary Bg, Link

Royal Purple provides a bold and luxurious foundation that communicates creativity and originality.

HEX#5B2C82
RGB91, 44, 130
HSL273, 49, 34
CMYK30, 66, 0, 49
SecondaryPersimmon Orange

RolesBtn Secondary Bg, Headline

Persimmon Orange adds energetic warmth and draws attention to key elements with enthusiasm.

HEX#F68B1E
RGB246, 139, 30
HSL30, 92, 54
CMYK0, 43, 88, 4
TertiaryTeal Blue

RolesBtn Outlined Border, Btn Outlined Text

Teal Blue offers a calming, modern contrast that supports and balances the warmth of the orange and depth of the purple.

HEX#1CA3A3
RGB28, 163, 163
HSL180, 71, 37
CMYK83, 0, 0, 36

Support Colors

The support colors extend the palette with fresh, bright accent shades that enhance vibrancy without overwhelming, maintaining harmony with subtle saturation and tonal alignment.

Lime Green

RolesIcon, Border, Divider, Outline

Lime Green provides a lively accent that complements the orange by introducing a fresh, organic energy.

HEX#D4E157
RGB212, 225, 87
HSL66, 70, 61
CMYK6, 0, 61, 12
Sunburst Gold

Sunburst Gold adds a softer highlight tone that elevates key content while blending smoothly with the primary palette.

HEX#FFBC4B
RGB255, 188, 75
HSL38, 100, 65
CMYK0, 26, 71, 0

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

Pure White

RolesBg Light, Btn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Alabaster

RolesBg Dark

HEX#F3F3F3
RGB243, 243, 243
HSL0, 0, 95
CMYK0, 0, 0, 5
Charcoal Black

RolesText, Btn Secondary Text

HEX#1A1A1A
RGB26, 26, 26
HSL0, 0, 10
CMYK0, 0, 0, 90

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

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-royal-purple: #5B2C82;
  --color-persimmon-orange: #F68B1E;
  --color-teal-blue: #1CA3A3;
  --color-lime-green: #D4E157;
  --color-sunburst-gold: #FFBC4B;
  --color-pure-white: #FFFFFF;
  --color-alabaster: #F3F3F3;
  --color-charcoal-black: #1A1A1A;
}

Role tokens

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: #5B2C82;
  --role-btn-primary-bg: #5B2C82;
  --role-link: #5B2C82;
  --role-btn-secondary-bg: #F68B1E;
  --role-headline: #F68B1E;
  --role-btn-outlined-border: #1CA3A3;
  --role-btn-outlined-text: #1CA3A3;
  --role-icon: #D4E157;
  --role-border: #D4E157;
  --role-divider: #D4E157;
  --role-outline: #D4E157;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #F3F3F3;
  --role-text: #1A1A1A;
  --role-btn-secondary-text: #1A1A1A;
}

JSON

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.
{
    "royal-purple": "#5B2C82",
    "persimmon-orange": "#F68B1E",
    "teal-blue": "#1CA3A3",
    "lime-green": "#D4E157",
    "sunburst-gold": "#FFBC4B",
    "pure-white": "#FFFFFF",
    "alabaster": "#F3F3F3",
    "charcoal-black": "#1A1A1A"
}
Press Space to load new palette