Purple#4a01ab
Orange#f48301
Bronze#a56940
Lavender#926faa
Palette direction

Purple Orange Complementary Color Palette

This palette uses vibrant Purple and energetic Orange as main colors creating a distinctive complementary harmony. The purple lends a sense of wisdom and creativity ideal for education and consultancy, while the vivid orange energizes and inspires team building activities. Soft warm bronze and muted lavender support colors subtly balance and extend the palette without overpowering it. Neutral shades of pure white, warm ivory, and deep charcoal complete the system for balanced text and backgrounds ensuring accessibility and clarity in digital and print usage.

CustomEducationpurpleorangeeducationteam-building
palette-preview.example
Education color direction

Purple Orange Complementary Color Palette

This palette uses vibrant Purple and energetic Orange as main colors creating a distinctive complementary harmony. The purple lends a sense of wisdom and creativity ideal for education and consultancy, while the vivid orange energizes and inspires team building activities. Soft warm bronze and muted lavender support colors subtly balance and extend the palette without overpowering it. Neutral shades of pure white, warm ivory, and deep charcoal complete the system for balanced text and backgrounds ensuring accessibility and clarity in digital and print usage.

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 White #FFFFFFon Purple #4A01AB11.1:1 Excellent
Logo Charcoal #231F20on Orange #F483016.3:1 Strong
Logo Charcoal #231F20on White #FFFFFF16.3:1 Excellent
Icon color
BackgroundPurple#4a01abTextWhite#ffffff
Primary Button11.15:1
AAA

Best for the main action users should notice first.

BackgroundOrange#f48301TextCharcoal#231f20
Secondary Button6.28:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#ffffffTextPurple#4a01ab
Outlined Button11.15:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#ffffffTextOrange#f48301
Text Button2.59:1
Low

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

Palette composition7 colorsCustom color relationship
9:41Purple Orange Complementary Color Palette Color role balance
Custom 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.

CPurple Orange Complementary Color PaletteEducation brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors of vibrant Purple and energetic Orange work together as a recognizable complementary scheme symbolizing creativity paired with motivation, ideal for team building and consultancy.

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.Purple #4a01ab
HeadlineUsed for main titles and key messages.Lavender #926faa
LinkUsed for links and interactive text.Orange #f48301

Buttons

Primary Button
BackgroundPurple #4a01ab
TextWhite #ffffff
Secondary Button
BackgroundOrange #f48301
TextCharcoal #231f20
Outlined Button
BackgroundPurple #4a01ab
TextPurple #4a01ab

Interface

TextDefault readable body text.Charcoal #231f20
Bg LightLight page or section background.White #ffffff
Bg DarkDark page or section background.Ivory #f7f4f2
IconSmall interface icons and marks.Bronze #a56940
BorderCards, inputs, and component borders.Bronze #a56940
DividerSubtle separators between content.Bronze #a56940
OutlineFocus rings and emphasis outlines.Bronze #a56940

Palette Colors

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

Main (Brand) Colors

The main colors of vibrant Purple and energetic Orange work together as a recognizable complementary scheme symbolizing creativity paired with motivation, ideal for team building and consultancy.

PrimaryPurple

RolesLogo, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text

Purple adds a sense of wisdom, creativity, and authority essential for education and consultancy branding.

HEX#4a01ab
RGB74, 1, 171
HSL266, 99, 34
CMYK57, 99, 0, 33
SecondaryOrange

RolesLink, Btn Secondary Bg

Orange injects energy, enthusiasm, and friendliness, energizing team building and collaboration aspects.

HEX#f48301
RGB244, 131, 1
HSL32, 99, 48
CMYK0, 46, 100, 4

Support Colors

Support colors of warm Bronze and muted Lavender quietly reinforce the palette by adding soft, harmonious accents that balance the strong complementary main colors without competing visually.

Bronze

RolesIcon, Border, Divider, Outline

Bronze adds a warm, grounded tone that complements purple's richness while balancing orange's brightness.

HEX#a56940
RGB165, 105, 64
HSL24, 44, 45
CMYK0, 36, 61, 35
Lavender

RolesHeadline

Lavender is a soft, muted companion to purple that provides gentle visual hierarchy for headlines without distraction.

HEX#926faa
RGB146, 111, 170
HSL276, 26, 55
CMYK14, 35, 0, 33

Neutral Colors

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

White

RolesBg Light, Btn Primary Text

HEX#ffffff
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Ivory

RolesBg Dark

HEX#f7f4f2
RGB247, 244, 242
HSL24, 24, 96
CMYK0, 1, 2, 3
Charcoal

RolesText, Btn Secondary Text

HEX#231f20
RGB35, 31, 32
HSL345, 6, 13
CMYK0, 11, 9, 86

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-purple: #4a01ab;
  --color-orange: #f48301;
  --color-bronze: #a56940;
  --color-lavender: #926faa;
  --color-white: #ffffff;
  --color-ivory: #f7f4f2;
  --color-charcoal: #231f20;
}

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: #4a01ab;
  --role-btn-primary-bg: #4a01ab;
  --role-btn-outlined-border: #4a01ab;
  --role-btn-outlined-text: #4a01ab;
  --role-link: #f48301;
  --role-btn-secondary-bg: #f48301;
  --role-icon: #a56940;
  --role-border: #a56940;
  --role-divider: #a56940;
  --role-outline: #a56940;
  --role-headline: #926faa;
  --role-bg-light: #ffffff;
  --role-btn-primary-text: #ffffff;
  --role-bg-dark: #f7f4f2;
  --role-text: #231f20;
  --role-btn-secondary-text: #231f20;
}

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.
{
    "purple": "#4a01ab",
    "orange": "#f48301",
    "bronze": "#a56940",
    "lavender": "#926faa",
    "white": "#ffffff",
    "ivory": "#f7f4f2",
    "charcoal": "#231f20"
}
Press Space to load new palette