Magenta#fa00ff
Electric Purple#7b2ff7
Teal#00c3a3
Slate Blue#6a7fbb
Lavender Gray#c6cad8
Palette direction

Magenta Purple Teal Color Palette

This vibrant, youthful color palette centers around a bright Magenta base complemented by a dynamic Purple and a cool Teal, creating a distinctive and energetic visual identity suitable for a creative or tech-forward brand. The support colors—a muted Slate Blue and a soft Lavender Gray—extend the palette with subtle tonal variations that complement and balance the intensity of the main colors without competing visually. Neutrals are carefully chosen for maximum readability and versatility, featuring pure white, a light Linen shade, and a very dark Charcoal for text and deeper backgrounds, ensuring high contrast and accessibility throughout.

CustomCreativemagentapurpletealcreative
palette-preview.example
Creative color direction

Magenta Purple Teal Color Palette

This vibrant, youthful color palette centers around a bright Magenta base complemented by a dynamic Purple and a cool Teal, creating a distinctive and energetic visual identity suitable for a creative or tech-forward brand. The support colors—a muted Slate Blue and a soft Lavender Gray—extend the palette with subtle tonal variations that complement and balance the intensity of the main colors without competing visually. Neutrals are carefully chosen for maximum readability and versatility, featuring pure white, a light Linen shade, and a very dark Charcoal for text and deeper backgrounds, ensuring high contrast and accessibility throughout.

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 Charcoal #222222on Teal #00C3A37.1:1 Excellent
Logo White #FFFFFFon Electric Purple #7B2FF75.8:1 Strong
Logo Charcoal #222222on Magenta #FA00FF4.9:1 Strong
Logo Charcoal #222222on White #FFFFFF15.9:1 Excellent
Icon color
BackgroundMagenta#fa00ffTextCharcoal#222222
Primary Button4.93:1
AA

Best for the main action users should notice first.

BackgroundElectric Purple#7b2ff7TextWhite#ffffff
Secondary Button5.85:1
AA

Useful for softer choices and secondary paths.

BackgroundWhite#ffffffTextMagenta#fa00ff
Outlined Button3.23:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundWhite#ffffffTextMagenta#fa00ff
Text Button3.23:1
Large text

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

Palette composition8 colorsCustom color relationship
9:41Magenta Purple Teal 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.

CMagenta Purple Teal Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors form a triadic harmony with Magenta, Purple, and Teal evenly spaced around the color wheel, providing a balanced yet striking combination that ensures strong brand recognition and visual interest.

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.Magenta #fa00ff
HeadlineUsed for main titles and key messages.Electric Purple #7b2ff7
LinkUsed for links and interactive text.Magenta #fa00ff

Buttons

Primary Button
BackgroundMagenta #fa00ff
TextCharcoal #222222
Secondary Button
BackgroundElectric Purple #7b2ff7
TextWhite #ffffff
Outlined Button
BackgroundMagenta #fa00ff
TextMagenta #fa00ff

Interface

TextDefault readable body text.Charcoal #222222
Bg LightLight page or section background.White #ffffff
Bg DarkDark page or section background.Linen #f7f2ec
IconSmall interface icons and marks.Slate Blue #6a7fbb
BorderCards, inputs, and component borders.Slate Blue #6a7fbb
DividerSubtle separators between content.Slate Blue #6a7fbb
OutlineFocus rings and emphasis outlines.Slate Blue #6a7fbb

Palette Colors

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

Main (Brand) Colors

The main colors form a triadic harmony with Magenta, Purple, and Teal evenly spaced around the color wheel, providing a balanced yet striking combination that ensures strong brand recognition and visual interest.

PrimaryMagenta

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

Magenta injects energetic vibrancy and creative flair, establishing a strong visual presence and commanding attention as the core brand accent.

HEX#fa00ff
RGB250, 0, 255
HSL299, 100, 50
CMYK2, 100, 0, 0
SecondaryElectric Purple

RolesHeadline, Btn Secondary Bg

Electric Purple adds depth and sophistication, balancing the brightness of Magenta while supporting engaging and vibrant headlines.

HEX#7b2ff7
RGB123, 47, 247
HSL263, 93, 58
CMYK50, 81, 0, 3
TertiaryTeal

Teal brings a cool, refreshing contrast that enhances the dynamic triadic palette and introduces visual variety without overwhelming.

HEX#00c3a3
RGB0, 195, 163
HSL170, 100, 38
CMYK100, 0, 16, 24

Support Colors

Support colors provide muted tonal variations that complement and balance the intense main colors, adding usability and subtle accents suitable for icons and borders.

Slate Blue

RolesIcon, Border, Divider, Outline

Slate Blue offers a desaturated, calming cool tone that subtly reinforces the palette’s cool hues and supports different UI elements.

HEX#6a7fbb
RGB106, 127, 187
HSL224, 37, 57
CMYK43, 32, 0, 27
Lavender Gray

Lavender Gray adds a light, soft accent that ties the palette together with understated subtlety ideal for secondary headlines or muted text.

HEX#c6cad8
RGB198, 202, 216
HSL227, 19, 81
CMYK8, 6, 0, 15

Neutral Colors

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

White

RolesBg Light, Btn Secondary Text

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

RolesBg Dark

HEX#f7f2ec
RGB247, 242, 236
HSL33, 41, 95
CMYK0, 2, 4, 3
Charcoal

RolesText, Btn Primary Text

HEX#222222
RGB34, 34, 34
HSL0, 0, 13
CMYK0, 0, 0, 87

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-magenta: #fa00ff;
  --color-electric-purple: #7b2ff7;
  --color-teal: #00c3a3;
  --color-slate-blue: #6a7fbb;
  --color-lavender-gray: #c6cad8;
  --color-white: #ffffff;
  --color-linen: #f7f2ec;
  --color-charcoal: #222222;
}

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: #fa00ff;
  --role-link: #fa00ff;
  --role-btn-primary-bg: #fa00ff;
  --role-btn-outlined-border: #fa00ff;
  --role-btn-outlined-text: #fa00ff;
  --role-headline: #7b2ff7;
  --role-btn-secondary-bg: #7b2ff7;
  --role-icon: #6a7fbb;
  --role-border: #6a7fbb;
  --role-divider: #6a7fbb;
  --role-outline: #6a7fbb;
  --role-bg-light: #ffffff;
  --role-btn-secondary-text: #ffffff;
  --role-bg-dark: #f7f2ec;
  --role-text: #222222;
  --role-btn-primary-text: #222222;
}

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.
{
    "magenta": "#fa00ff",
    "electric-purple": "#7b2ff7",
    "teal": "#00c3a3",
    "slate-blue": "#6a7fbb",
    "lavender-gray": "#c6cad8",
    "white": "#ffffff",
    "linen": "#f7f2ec",
    "charcoal": "#222222"
}
Press Space to load new palette