Electric Wisteria#090909
Soft Iris#F5F5F5
Deep Amethyst#EDB90A
Lavender Mist#290052
Porcelain Lilac#FA4A53
Palette direction

Ai Generator 6a2671f976c61 Color Palette

A light monochromatic purple system that feels precise, calm, and product-led for an AI palette builder. The range stays minimal and tech-forward while using subtle value shifts to separate brand, interface, and background roles without visual noise.

MonochromaticTechlight purplemonochromaticminimaltechy
palette-preview.example
Tech color direction

Ai Generator 6a2671f976c61 Color Palette

A light monochromatic purple system that feels precise, calm, and product-led for an AI palette builder. The range stays minimal and tech-forward while using subtle value shifts to separate brand, interface, and background roles without visual noise.

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 Electric Wisteria #09090919.9:1 Excellent
Logo Electric Wisteria #090909on Soft Iris #F5F5F518.3:1 Excellent
Logo Electric Wisteria #090909on Deep Amethyst #EDB90A10.9:1 Excellent
Logo Electric Wisteria #090909on Porcelain Lilac #FA4A535.8:1 Strong
Icon color
BackgroundElectric Wisteria#090909TextFrosted White#F6F5FB
Primary Button18.37:1
AAA

Best for the main action users should notice first.

BackgroundSoft Iris#F5F5F5TextFrosted White#F6F5FB
Secondary Button1.01:1
Low

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextSoft Iris#F5F5F5
Outlined Button1.09:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextSoft Iris#F5F5F5
Text Button1.09:1
Low

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

Palette composition8 colorsMonochromatic color relationship
9:41Ai Generator 6a2671f976c61 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 6a2671f976c61 Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

These purple shades create a tight, recognizable system that feels modern and intelligent without relying on heavy saturation. The lighter values keep the brand airy, while the deeper violet anchors actions and headings for clear hierarchy.

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.Electric Wisteria #090909
HeadlineUsed for main titles and key messages.Deep Amethyst #EDB90A
LinkUsed for links and interactive text.Soft Iris #F5F5F5

Buttons

Primary Button
BackgroundElectric Wisteria #090909
TextFrosted White #F6F5FB
Secondary Button
BackgroundSoft Iris #F5F5F5
TextFrosted White #F6F5FB
Outlined Button
BackgroundSoft Iris #F5F5F5
TextSoft Iris #F5F5F5

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.Lavender Mist #290052
BorderCards, inputs, and component borders.Lavender Mist #290052
DividerSubtle separators between content.Porcelain Lilac #FA4A53
OutlineFocus rings and emphasis outlines.Porcelain Lilac #FA4A53

Palette Colors

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

Main (Brand) Colors

These purple shades create a tight, recognizable system that feels modern and intelligent without relying on heavy saturation. The lighter values keep the brand airy, while the deeper violet anchors actions and headings for clear hierarchy.

PrimaryElectric Wisteria

RolesLogo, Btn Primary Bg

A vivid but controlled purple that gives ColorFly a crisp, AI-native signature.

HEX#090909
RGB9, 9, 9
HSL0, 0, 4
CMYK0, 0, 0, 96
SecondarySoft Iris

RolesLink, Btn Secondary Bg, Btn Outlined Border, Btn Outlined Text

A lighter companion tone that supports navigation and secondary actions without overpowering the system.

HEX#F5F5F5
RGB245, 245, 245
HSL0, 0, 96
CMYK0, 0, 0, 4
TertiaryDeep Amethyst

RolesHeadline

A deeper purple that adds structure and visual authority for headlines and key brand moments.

HEX#EDB90A
RGB237, 185, 10
HSL46, 92, 48
CMYK0, 22, 96, 7

Support Colors

Subtle accent purples extend the main range and help separate interface surfaces while staying within the same visual family. They add functional flexibility for UI chrome and edge

Lavender Mist

RolesIcon, Border

A soft support purple that works well for icons and boundaries without drawing too much attention.

HEX#290052
RGB41, 0, 82
HSL270, 100, 16
CMYK50, 100, 0, 68
Porcelain Lilac

RolesDivider, Outline

A near-transparent lilac tint that keeps dividers and outlines gentle and minimal.

HEX#FA4A53
RGB250, 74, 83
HSL357, 95, 64
CMYK0, 70, 67, 2

Neutral Colors

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

Pure White

RolesBg Light

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Frosted White

RolesBtn Primary Text, Btn Secondary Text

HEX#F6F5FB
RGB246, 245, 251
HSL250, 43, 97
CMYK2, 2, 0, 2
Ink Black

RolesBg Dark, 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-electric-wisteria: #090909;
  --color-soft-iris: #F5F5F5;
  --color-deep-amethyst: #EDB90A;
  --color-lavender-mist: #290052;
  --color-porcelain-lilac: #FA4A53;
  --color-pure-white: #FFFFFF;
  --color-frosted-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: #090909;
  --role-btn-primary-bg: #090909;
  --role-link: #F5F5F5;
  --role-btn-secondary-bg: #F5F5F5;
  --role-btn-outlined-border: #F5F5F5;
  --role-btn-outlined-text: #F5F5F5;
  --role-headline: #EDB90A;
  --role-icon: #290052;
  --role-border: #290052;
  --role-divider: #FA4A53;
  --role-outline: #FA4A53;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #F6F5FB;
  --role-btn-secondary-text: #F6F5FB;
  --role-bg-dark: #161320;
  --role-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.
{
    "electric-wisteria": "#090909",
    "soft-iris": "#F5F5F5",
    "deep-amethyst": "#EDB90A",
    "lavender-mist": "#290052",
    "porcelain-lilac": "#FA4A53",
    "pure-white": "#FFFFFF",
    "frosted-white": "#F6F5FB",
    "ink-black": "#161320"
}
Press Space to load new palette