Vivid Violet#7B61FF
Soft Violet#AFA0FF
Deep Indigo#150269
Pale Lilac#C9BEFF
Ghost Lilac#E6E1FF
Palette direction

Ai Generator 6a23ec04350fe Color Palette

A tight monochromatic violet system built for an AI color palette builder, with bright purple energy balanced by soft lilac surfaces and a deep indigo anchor. The palette stays minimal and product-led while preserving clear hierarchy across branding, actions, and interface elements.

MonochromaticTechlight purplemonochromaticminimaltechy
palette-preview.example
Tech color direction

Ai Generator 6a23ec04350fe Color Palette

A tight monochromatic violet system built for an AI color palette builder, with bright purple energy balanced by soft lilac surfaces and a deep indigo anchor. The palette stays minimal and product-led while preserving clear hierarchy across branding, actions, and interface elements.

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 Deep Indigo #15026916.9:1 Excellent
Logo Ink Black #161320on Soft Violet #AFA0FF8.1:1 Excellent
Logo Ink Black #161320on Pure White #FFFFFF18.3:1 Excellent
Logo Ink Black #161320on Ghost Lilac #E6E1FF14.4:1 Excellent
Icon color
BackgroundVivid Violet#7B61FFTextPure White#FFFFFF
Primary Button4.20:1
Large text

Best for the main action users should notice first.

BackgroundSoft Violet#AFA0FFTextInk Black#161320
Secondary Button8.10:1
AAA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextDeep Indigo#150269
Outlined Button16.87:1
AAA

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextSoft Violet#AFA0FF
Text Button2.26:1
Low

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

Palette composition8 colorsMonochromatic color relationship
9:41Ai Generator 6a23ec04350fe Color Palette Color role balance
Monochromatic 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.

CAi Generator 6a23ec04350fe Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

These violet and indigo tones form a compact monochromatic system that feels precise, modern, and distinctly AI-oriented. The brighter hues keep the brand approachable, while the deep violet provides contrast and hierarchy for key type and actions.

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.Vivid Violet #7B61FF
HeadlineUsed for main titles and key messages.Deep Indigo #150269
LinkUsed for links and interactive text.Soft Violet #AFA0FF

Buttons

Primary Button
BackgroundVivid Violet #7B61FF
TextPure White #FFFFFF
Secondary Button
BackgroundSoft Violet #AFA0FF
TextInk Black #161320
Outlined Button
BackgroundSoft Violet #AFA0FF
TextDeep Indigo #150269

Interface

TextDefault readable body text.Ink Black #161320
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Ink Black #161320
IconSmall interface icons and marks.Pale Lilac #C9BEFF
BorderCards, inputs, and component borders.Pale Lilac #C9BEFF
DividerSubtle separators between content.Ghost Lilac #E6E1FF
OutlineFocus rings and emphasis outlines.Ghost Lilac #E6E1FF

Palette Colors

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

Main (Brand) Colors

These violet and indigo tones form a compact monochromatic system that feels precise, modern, and distinctly AI-oriented. The brighter hues keep the brand approachable, while the deep violet provides contrast and hierarchy for key type and actions.

PrimaryVivid Violet

RolesLogo, Btn Primary Bg

A bright violet that gives the brand a confident, recognizable signature and strong primary-action presence.

HEX#7B61FF
RGB123, 97, 255
HSL250, 100, 69
CMYK52, 62, 0, 0
SecondarySoft Violet

RolesLink, Btn Secondary Bg, Btn Outlined Border

A lighter violet that supports links and secondary UI treatments with a calm, approachable tone.

HEX#AFA0FF
RGB175, 160, 255
HSL249, 100, 81
CMYK31, 37, 0, 0
TertiaryDeep Indigo

RolesHeadline, Btn Outlined Text

A near-black indigo that adds authority and crisp editorial contrast for headlines and core messaging.

HEX#150269
RGB21, 2, 105
HSL251, 96, 21
CMYK80, 98, 0, 59

Support Colors

The support tints extend the violet system into quieter surface and boundary roles, adding usability without introducing a competing hue direction. They keep the interface soft, organized, and visually consistent.

Pale Lilac

RolesIcon, Border

A pale lilac that quietly softens icons and borders while staying aligned with the main violet family.

HEX#C9BEFF
RGB201, 190, 255
HSL250, 100, 87
CMYK21, 25, 0, 0
Ghost Lilac

RolesDivider, Outline

An airy lilac tint that keeps dividers and outlines subtle, light, and unobtrusive.

HEX#E6E1FF
RGB230, 225, 255
HSL250, 100, 94
CMYK10, 12, 0, 0

Neutral Colors

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

Pure White

RolesBg Light, Btn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Cloud White
HEX#F6F5FB
RGB246, 245, 251
HSL250, 43, 97
CMYK2, 2, 0, 2
Ink Black

RolesBg Dark, Text, Btn Secondary Text

HEX#161320
RGB22, 19, 32
HSL254, 25, 10
CMYK31, 41, 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-vivid-violet: #7B61FF;
  --color-soft-violet: #AFA0FF;
  --color-deep-indigo: #150269;
  --color-pale-lilac: #C9BEFF;
  --color-ghost-lilac: #E6E1FF;
  --color-pure-white: #FFFFFF;
  --color-cloud-white: #F6F5FB;
  --color-ink-black: #161320;
}

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: #7B61FF;
  --role-btn-primary-bg: #7B61FF;
  --role-link: #AFA0FF;
  --role-btn-secondary-bg: #AFA0FF;
  --role-btn-outlined-border: #AFA0FF;
  --role-headline: #150269;
  --role-btn-outlined-text: #150269;
  --role-icon: #C9BEFF;
  --role-border: #C9BEFF;
  --role-divider: #E6E1FF;
  --role-outline: #E6E1FF;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #161320;
  --role-text: #161320;
  --role-btn-secondary-text: #161320;
}

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.
{
    "vivid-violet": "#7B61FF",
    "soft-violet": "#AFA0FF",
    "deep-indigo": "#150269",
    "pale-lilac": "#C9BEFF",
    "ghost-lilac": "#E6E1FF",
    "pure-white": "#FFFFFF",
    "cloud-white": "#F6F5FB",
    "ink-black": "#161320"
}
Press Space to load new palette