Velvet Plum#7B0067
Electric Fuchsia#E6006E
Apricot Coral#FF8A73
Dusty Rose#B97A8E
Mauve Mist#C9A7B6
Palette direction

Plum Mosaic Editorial Color Palette

This palette pairs a deep plum with a vivid magenta and a crisp coral-pink accent to create a bold, editorial system that feels expressive but controlled. The neutrals keep the look usable across interfaces by preserving clarity, warmth, and contrast.

AnalogousCreativeplummagentacoraleditorial
palette-preview.example
Creative color direction

Plum Mosaic Editorial Color Palette

This palette pairs a deep plum with a vivid magenta and a crisp coral-pink accent to create a bold, editorial system that feels expressive but controlled. The neutrals keep the look usable across interfaces by preserving clarity, warmth, and contrast.

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 Velvet Plum #7B006710.3:1 Excellent
Logo Ink Black #151015on Apricot Coral #FF8A738.2:1 Excellent
Logo Pure White #FFFFFFon Electric Fuchsia #E6006E4.6:1 Strong
Logo Ink Black #151015on Pure White #FFFFFF18.8:1 Excellent
Icon color
BackgroundElectric Fuchsia#E6006ETextPure White#FFFFFF
Primary Button4.58:1
AA

Best for the main action users should notice first.

BackgroundVelvet Plum#7B0067TextPure White#FFFFFF
Secondary Button10.30:1
AAA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextApricot Coral#FF8A73
Outlined Button2.30:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextElectric Fuchsia#E6006E
Text Button4.58:1
AA

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

Palette composition8 colorsAnalogous color relationship
9:41Plum Mosaic Editorial Color Palette Color role balance
Analogous 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.

CPlum Mosaic Editorial Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine a saturated plum and magenta family with a coral-pink accent, creating a recognizable high-contrast system that feels energetic without becoming chaotic. The relationship is visually sharp and expressive, with enough tonal tension to support strong 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.Velvet Plum #7B0067
HeadlineUsed for main titles and key messages.Apricot Coral #FF8A73
LinkUsed for links and interactive text.Electric Fuchsia #E6006E

Buttons

Primary Button
BackgroundElectric Fuchsia #E6006E
TextPure White #FFFFFF
Secondary Button
BackgroundVelvet Plum #7B0067
TextPure White #FFFFFF
Outlined Button
BackgroundApricot Coral #FF8A73
TextApricot Coral #FF8A73

Interface

TextDefault readable body text.Ink Black #151015
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Ink Black #151015
IconSmall interface icons and marks.Dusty Rose #B97A8E
BorderCards, inputs, and component borders.Dusty Rose #B97A8E
DividerSubtle separators between content.Mauve Mist #C9A7B6
OutlineFocus rings and emphasis outlines.Mauve Mist #C9A7B6

Palette Colors

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

Main (Brand) Colors

The main colors combine a saturated plum and magenta family with a coral-pink accent, creating a recognizable high-contrast system that feels energetic without becoming chaotic. The relationship is visually sharp and expressive, with enough tonal tension to support strong brand recognition.

PrimaryVelvet Plum

RolesLogo, Btn Secondary Bg

This deep plum anchors the identity with a confident, artistic tone that feels premium and distinctive.

HEX#7B0067
RGB123, 0, 103
HSL310, 100, 24
CMYK0, 100, 16, 52
PrimaryElectric Fuchsia

RolesLink, Btn Primary Bg

This vivid fuchsia drives action and recognition with a lively, contemporary signal that reads immediately on screen.

HEX#E6006E
RGB230, 0, 110
HSL331, 100, 45
CMYK0, 100, 52, 10
SecondaryApricot Coral

RolesBtn Outlined Border, Btn Outlined Text, Headline

This warm coral softens the palette’s intensity while adding a friendly, fashion-forward accent for emphasis.

HEX#FF8A73
RGB255, 138, 115
HSL10, 100, 73
CMYK0, 46, 55, 0

Support Colors

The support colors extend the palette with muted warmth and a restrained cool tint, keeping the system balanced without competing with the saturated mains. They add usability for UI states, surfaces, and subtle details while preserving the editorial mood.

Dusty Rose

RolesIcon, Border

This muted rose bridges the plum and fuchsia tones while staying quiet enough for interface support.

HEX#B97A8E
RGB185, 122, 142
HSL341, 31, 60
CMYK0, 34, 23, 27
Mauve Mist

RolesDivider, Outline

This softened mauve adds gentle separation and structure without drawing attention away from the primary colors.

HEX#C9A7B6
RGB201, 167, 182
HSL334, 24, 72
CMYK0, 17, 9, 21

Neutral Colors

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

Pure White

RolesBg Light, Btn Primary Text, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Soft Pearl
HEX#F4ECE7
RGB244, 236, 231
HSL23, 37, 93
CMYK0, 3, 5, 4
Ink Black

RolesBg Dark, Text

HEX#151015
RGB21, 16, 21
HSL300, 14, 7
CMYK0, 24, 0, 92

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-velvet-plum: #7B0067;
  --color-electric-fuchsia: #E6006E;
  --color-apricot-coral: #FF8A73;
  --color-dusty-rose: #B97A8E;
  --color-mauve-mist: #C9A7B6;
  --color-pure-white: #FFFFFF;
  --color-soft-pearl: #F4ECE7;
  --color-ink-black: #151015;
}

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: #7B0067;
  --role-btn-secondary-bg: #7B0067;
  --role-link: #E6006E;
  --role-btn-primary-bg: #E6006E;
  --role-btn-outlined-border: #FF8A73;
  --role-btn-outlined-text: #FF8A73;
  --role-headline: #FF8A73;
  --role-icon: #B97A8E;
  --role-border: #B97A8E;
  --role-divider: #C9A7B6;
  --role-outline: #C9A7B6;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #151015;
  --role-text: #151015;
}

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.
{
    "velvet-plum": "#7B0067",
    "electric-fuchsia": "#E6006E",
    "apricot-coral": "#FF8A73",
    "dusty-rose": "#B97A8E",
    "mauve-mist": "#C9A7B6",
    "pure-white": "#FFFFFF",
    "soft-pearl": "#F4ECE7",
    "ink-black": "#151015"
}
Press Space to load new palette