Purple#6A0DAD
Coral Orange#FF6F3C
Blue-violet#5B3A77
Gold#C49E45
Slate#6A7B8C
Palette direction

Purple Orange Team Color Palette

This vibrant palette combines energetic Purple and Orange as main colors to reflect creativity and enthusiasm, supported by balanced Gold and Slate accents with clear neutral tones for readability and a professional feel.

CustomEducationpurpleorangeteam buildingtraining
palette-preview.example
Education color direction

Purple Orange Team Color Palette

This vibrant palette combines energetic Purple and Orange as main colors to reflect creativity and enthusiasm, supported by balanced Gold and Slate accents with clear neutral tones for readability and a professional feel.

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 #6A0DAD9.2:1 Excellent
Logo Charcoal #2B2B2Bon Coral Orange #FF6F3C5.1:1 Strong
Logo Charcoal #2B2B2Bon White #FFFFFF14.2:1 Excellent
Logo Charcoal #2B2B2Bon Gold #C49E455.6:1 Strong
Icon color
BackgroundPurple#6A0DADTextWhite#FFFFFF
Primary Button9.24:1
AAA

Best for the main action users should notice first.

BackgroundCoral Orange#FF6F3CTextCharcoal#2B2B2B
Secondary Button5.12:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#FFFFFFTextPurple#6A0DAD
Outlined Button9.24:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#FFFFFFTextPurple#6A0DAD
Text Button9.24:1
AAA

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

Palette composition8 colorsCustom color relationship
9:41Purple Orange Team 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 Team Color PaletteEducation brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors include a vivid Purple and energetic Orange paired with a complementary deep Blue-violet, creating a dynamic and memorable brand presence suited 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 #6A0DAD
HeadlineUsed for main titles and key messages.Blue-violet #5B3A77
LinkUsed for links and interactive text.Purple #6A0DAD

Buttons

Primary Button
BackgroundPurple #6A0DAD
TextWhite #FFFFFF
Secondary Button
BackgroundCoral Orange #FF6F3C
TextCharcoal #2B2B2B
Outlined Button
BackgroundPurple #6A0DAD
TextPurple #6A0DAD

Interface

TextDefault readable body text.Charcoal #2B2B2B
Bg LightLight page or section background.White #FFFFFF
Bg DarkDark page or section background.Cultured #F7F7F7
IconSmall interface icons and marks.Gold #C49E45
BorderCards, inputs, and component borders.Gold #C49E45
DividerSubtle separators between content.Slate #6A7B8C
OutlineFocus rings and emphasis outlines.Slate #6A7B8C

Palette Colors

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

Main (Brand) Colors

The main colors include a vivid Purple and energetic Orange paired with a complementary deep Blue-violet, creating a dynamic and memorable brand presence suited for team building and consultancy.

PrimaryPurple

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

Purple conveys creativity, wisdom, and professionalism, making it a compelling choice for a consultancy and training company.

HEX#6A0DAD
RGB106, 13, 173
HSL275, 86, 36
CMYK39, 92, 0, 32
SecondaryCoral Orange

RolesBtn Secondary Bg

Coral Orange injects energy, enthusiasm, and approachability, resonating well with team building activities.

HEX#FF6F3C
RGB255, 111, 60
HSL16, 100, 62
CMYK0, 56, 76, 0
TertiaryBlue-violet

RolesHeadline

Blue-violet adds depth and a complementary tone that enhances the vibrancy of the main palette while supporting readability.

HEX#5B3A77
RGB91, 58, 119
HSL272, 34, 35
CMYK24, 51, 0, 53

Support Colors

Support colors extend the main palette with warm Gold and grounding Slate tones for subtle accents in iconography, borders, and outlines, reinforcing brand cohesion without competing visually.

Gold

RolesIcon, Border

Gold complements Purple by adding a warm, confident accent that symbolizes success and achievement.

HEX#C49E45
RGB196, 158, 69
HSL42, 52, 52
CMYK0, 19, 65, 23
Slate

RolesDivider, Outline

Slate balances the palette with a neutral cool tone that subtly supports the vibrancy of Purple and Coral Orange.

HEX#6A7B8C
RGB106, 123, 140
HSL210, 14, 48
CMYK24, 12, 0, 45

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
Cultured

RolesBg Dark

HEX#F7F7F7
RGB247, 247, 247
HSL0, 0, 97
CMYK0, 0, 0, 3
Charcoal

RolesText, Btn Secondary Text

HEX#2B2B2B
RGB43, 43, 43
HSL0, 0, 17
CMYK0, 0, 0, 83

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: #6A0DAD;
  --color-coral-orange: #FF6F3C;
  --color-blue-violet: #5B3A77;
  --color-gold: #C49E45;
  --color-slate: #6A7B8C;
  --color-white: #FFFFFF;
  --color-cultured: #F7F7F7;
  --color-charcoal: #2B2B2B;
}

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: #6A0DAD;
  --role-link: #6A0DAD;
  --role-btn-primary-bg: #6A0DAD;
  --role-btn-outlined-border: #6A0DAD;
  --role-btn-outlined-text: #6A0DAD;
  --role-btn-secondary-bg: #FF6F3C;
  --role-headline: #5B3A77;
  --role-icon: #C49E45;
  --role-border: #C49E45;
  --role-divider: #6A7B8C;
  --role-outline: #6A7B8C;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #F7F7F7;
  --role-text: #2B2B2B;
  --role-btn-secondary-text: #2B2B2B;
}

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": "#6A0DAD",
    "coral-orange": "#FF6F3C",
    "blue-violet": "#5B3A77",
    "gold": "#C49E45",
    "slate": "#6A7B8C",
    "white": "#FFFFFF",
    "cultured": "#F7F7F7",
    "charcoal": "#2B2B2B"
}
Press Space to load new palette