Pulse Magenta#E1306C
Creator Coral#FF7A59
Signal Violet#8A5CFF
Sunlit Peach#FFB36B
Electric Orchid#C86BFF
Palette direction

Instagram Inspired Vibrant Color Palette

An Instagram-inspired system built for creator-led content: vivid, social, and visually punchy without relying on a literal clone of the platform. The warm-to-cool gradient relationship gives the brand instant recognition while staying flexible for feeds, tools, and calls to action.

CustomTechinstagram-inspiredcreator-focusedvibrantexpressive
palette-preview.example
Tech color direction

Instagram Inspired Vibrant Color Palette

An Instagram-inspired system built for creator-led content: vivid, social, and visually punchy without relying on a literal clone of the platform. The warm-to-cool gradient relationship gives the brand instant recognition while staying flexible for feeds, tools, and calls to action.

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 Deep Ink #121212on Creator Coral #FF7A597.3:1 Excellent
Logo Deep Ink #121212on Signal Violet #8A5CFF4.5:1 Strong
Logo Deep Ink #121212on Pure White #FFFFFF18.7:1 Excellent
Logo Pure White #FFFFFFon Deep Ink #12121218.7:1 Excellent
Icon color
BackgroundPulse Magenta#E1306CTextPure White#FFFFFF
Primary Button4.34:1
Large text

Best for the main action users should notice first.

BackgroundCreator Coral#FF7A59TextDeep Ink#121212
Secondary Button7.30:1
AAA

Useful for softer choices and secondary paths.

BackgroundCloud Tint#F4F1EATextSignal Violet#8A5CFF
Outlined Button3.68:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundCloud Tint#F4F1EATextSignal Violet#8A5CFF
Text Button3.68:1
Large text

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

Palette composition8 colorsCustom color relationship
9:41Instagram Inspired Vibrant 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.

CInstagram Inspired Vibrant Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors pair a saturated magenta-red with a vivid coral and a cool violet, creating a recognizable social-media energy with enough range for campaigns, UI moments, and creator storytelling. Together they feel dynamic and expressive,

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.Pulse Magenta #E1306C
HeadlineUsed for main titles and key messages.Signal Violet #8A5CFF
LinkUsed for links and interactive text.Signal Violet #8A5CFF

Buttons

Primary Button
BackgroundPulse Magenta #E1306C
TextPure White #FFFFFF
Secondary Button
BackgroundCreator Coral #FF7A59
TextDeep Ink #121212
Outlined Button
BackgroundCreator Coral #FF7A59
TextSignal Violet #8A5CFF

Interface

TextDefault readable body text.Deep Ink #121212
Bg LightLight page or section background.Cloud Tint #F4F1EA
Bg DarkDark page or section background.Deep Ink #121212
IconSmall interface icons and marks.Sunlit Peach #FFB36B
BorderCards, inputs, and component borders.Sunlit Peach #FFB36B
DividerSubtle separators between content.Electric Orchid #C86BFF
OutlineFocus rings and emphasis outlines.Electric Orchid #C86BFF

Palette Colors

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

Main (Brand) Colors

The main colors pair a saturated magenta-red with a vivid coral and a cool violet, creating a recognizable social-media energy with enough range for campaigns, UI moments, and creator storytelling. Together they feel dynamic and expressive,

PrimaryPulse Magenta

RolesLogo, Btn Primary Bg

A high-recognition magenta that anchors the brand and gives the logo and primary actions immediate creator energy.

HEX#E1306C
RGB225, 48, 108
HSL340, 75, 54
CMYK0, 79, 52, 12
SecondaryCreator Coral

RolesBtn Secondary Bg, Btn Outlined Border

A warm, energetic accent that keeps the system lively and makes secondary actions feel active without competing with the core magenta.

HEX#FF7A59
RGB255, 122, 89
HSL12, 100, 67
CMYK0, 52, 65, 0
TertiarySignal Violet

RolesHeadline, Link, Btn Outlined Text

A cool counterpoint that adds editorial polish and helps headings, links, and outline treatment stand apart with a modern creator tone.

HEX#8A5CFF
RGB138, 92, 255
HSL257, 100, 68
CMYK46, 64, 0, 0

Support Colors

These accents extend the main palette by adding depth, interaction cues, and subtle supporting surfaces without stealing attention from the core magenta-coral-violet story.

Sunlit Peach

RolesIcon, Border

A soft warm accent that supports icons and borders with friendly visibility while staying subordinate to the stronger brand hues.

HEX#FFB36B
RGB255, 179, 107
HSL29, 100, 71
CMYK0, 30, 58, 0
Electric Orchid

RolesDivider, Outline

A restrained orchid accent that reinforces the platform's expressive feel and works well for fine UI separators and focus outlines.

HEX#C86BFF
RGB200, 107, 255
HSL278, 100, 71
CMYK22, 58, 0, 0

Neutral Colors

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

Pure White

RolesBtn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Cloud Tint

RolesBg Light

HEX#F4F1EA
RGB244, 241, 234
HSL42, 31, 94
CMYK0, 1, 4, 4
Deep Ink

RolesBg Dark, Text, Btn Secondary Text

HEX#121212
RGB18, 18, 18
HSL0, 0, 7
CMYK0, 0, 0, 93

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-pulse-magenta: #E1306C;
  --color-creator-coral: #FF7A59;
  --color-signal-violet: #8A5CFF;
  --color-sunlit-peach: #FFB36B;
  --color-electric-orchid: #C86BFF;
  --color-pure-white: #FFFFFF;
  --color-cloud-tint: #F4F1EA;
  --color-deep-ink: #121212;
}

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: #E1306C;
  --role-btn-primary-bg: #E1306C;
  --role-btn-secondary-bg: #FF7A59;
  --role-btn-outlined-border: #FF7A59;
  --role-headline: #8A5CFF;
  --role-link: #8A5CFF;
  --role-btn-outlined-text: #8A5CFF;
  --role-icon: #FFB36B;
  --role-border: #FFB36B;
  --role-divider: #C86BFF;
  --role-outline: #C86BFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-light: #F4F1EA;
  --role-bg-dark: #121212;
  --role-text: #121212;
  --role-btn-secondary-text: #121212;
}

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.
{
    "pulse-magenta": "#E1306C",
    "creator-coral": "#FF7A59",
    "signal-violet": "#8A5CFF",
    "sunlit-peach": "#FFB36B",
    "electric-orchid": "#C86BFF",
    "pure-white": "#FFFFFF",
    "cloud-tint": "#F4F1EA",
    "deep-ink": "#121212"
}
Press Space to load new palette