Electric Wisteria#7B61FF
Soft Iris#AFA0FF
Deep Amethyst#5B3FD6
Porcelain Lilac#E6E1FF
Palette direction

Palettebuilder Ai Techy 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. The removal of Lavender Mist simplifies the tone,

MonochromaticTechlight purplemonochromaticminimaltechy
palette-preview.example
Tech color direction

Palettebuilder Ai Techy 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. The removal of Lavender Mist simplifies the tone,

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 Ink Black #161320on Soft Iris #AFA0FF8.1:1 Excellent
Logo Pure White #FFFFFFon Deep Amethyst #5B3FD66.7:1 Strong
Logo Ink Black #161320on Pure White #FFFFFF18.3:1 Excellent
Logo Ink Black #161320on Porcelain Lilac #E6E1FF14.4:1 Excellent
Icon color
BackgroundElectric Wisteria#7B61FFTextInk Black#161320
Primary Button4.35:1
Large text

Best for the main action users should notice first.

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

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextSoft Iris#AFA0FF
Outlined Button2.26:1
Low

Good for lower-emphasis actions on light surfaces.

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

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

Palette composition7 colorsMonochromatic color relationship
9:41Palettebuilder Ai Techy 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.

CPalettebuilder Ai Techy 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 #7B61FF
HeadlineUsed for main titles and key messages.Deep Amethyst #5B3FD6
LinkUsed for links and interactive text.Soft Iris #AFA0FF

Buttons

Primary Button
BackgroundElectric Wisteria #7B61FF
TextInk Black #161320
Secondary Button
BackgroundSoft Iris #AFA0FF
TextInk Black #161320
Outlined Button
BackgroundSoft Iris #AFA0FF
TextSoft Iris #AFA0FF

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

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#7B61FF
RGB123, 97, 255
HSL250, 100, 69
CMYK52, 62, 0, 0
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#AFA0FF
RGB175, 160, 255
HSL249, 100, 81
CMYK31, 37, 0, 0
TertiaryDeep Amethyst

RolesHeadline

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

HEX#5B3FD6
RGB91, 63, 214
HSL251, 65, 54
CMYK57, 71, 0, 16

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

Porcelain Lilac

RolesDivider, Outline, Icon, Border

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

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

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

RolesBg Dark, Text, Btn Primary 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-electric-wisteria: #7B61FF;
  --color-soft-iris: #AFA0FF;
  --color-deep-amethyst: #5B3FD6;
  --color-porcelain-lilac: #E6E1FF;
  --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: #7B61FF;
  --role-btn-primary-bg: #7B61FF;
  --role-link: #AFA0FF;
  --role-btn-secondary-bg: #AFA0FF;
  --role-btn-outlined-border: #AFA0FF;
  --role-btn-outlined-text: #AFA0FF;
  --role-headline: #5B3FD6;
  --role-divider: #E6E1FF;
  --role-outline: #E6E1FF;
  --role-icon: #E6E1FF;
  --role-border: #E6E1FF;
  --role-bg-light: #FFFFFF;
  --role-bg-dark: #161320;
  --role-text: #161320;
  --role-btn-primary-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.
{
    "electric-wisteria": "#7B61FF",
    "soft-iris": "#AFA0FF",
    "deep-amethyst": "#5B3FD6",
    "porcelain-lilac": "#E6E1FF",
    "pure-white": "#FFFFFF",
    "frosted-white": "#F6F5FB",
    "ink-black": "#161320"
}
Press Space to load new palette