Midnight Violet#040106
Lavender Blue#AFA0FF
Royal Indigo#5B3FD6
Lilac Mist#C9BEFF
Fair Lilac#E6E1FF
Palette direction

Ai Generator 6a26ce99cd96b Color Palette

A clean monochromatic purple palette designed for tech-forward AI applications, combining fresh light purples with darker violets for distinct brand identity and interface clarity. This system balances a modern, minimal aesthetic with clear visual hierarchy and accessible UI contrasts.

AnalogousTechlight purplemonochromaticminimaltechy
palette-preview.example
Tech color direction

Ai Generator 6a26ce99cd96b Color Palette

A clean monochromatic purple palette designed for tech-forward AI applications, combining fresh light purples with darker violets for distinct brand identity and interface clarity. This system balances a modern, minimal aesthetic with clear visual hierarchy and accessible UI contrasts.

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 Midnight Violet #04010620.7:1 Excellent
Logo Midnight Violet #040106on Lavender Blue #AFA0FF9.2:1 Excellent
Logo Midnight Violet #040106on Pure White #FFFFFF20.7:1 Excellent
Logo Midnight Violet #040106on Fair Lilac #E6E1FF16.4:1 Excellent
Icon color
BackgroundMidnight Violet#040106TextPure White#FFFFFF
Primary Button20.75:1
AAA

Best for the main action users should notice first.

BackgroundLavender Blue#AFA0FFTextInk Black#161320
Secondary Button8.10:1
AAA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextLavender Blue#AFA0FF
Outlined Button2.26:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextLavender Blue#AFA0FF
Text Button2.26:1
Low

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

Palette composition8 colorsAnalogous color relationship
9:41Ai Generator 6a26ce99cd96b 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.

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

A usable
color system.

This palette features a cohesive purple spectrum where lighter and medium tones provide freshness and approachability, while deeper violet grounds the brand with authority and clarity in UI elements. The limited hue variation ensures strong brand recognition and a focused visual experience.

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.Midnight Violet #040106
HeadlineUsed for main titles and key messages.Royal Indigo #5B3FD6
LinkUsed for links and interactive text.Lavender Blue #AFA0FF

Buttons

Primary Button
BackgroundMidnight Violet #040106
TextPure White #FFFFFF
Secondary Button
BackgroundLavender Blue #AFA0FF
TextInk Black #161320
Outlined Button
BackgroundLavender Blue #AFA0FF
TextLavender Blue #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.Lilac Mist #C9BEFF
BorderCards, inputs, and component borders.Lilac Mist #C9BEFF
DividerSubtle separators between content.Fair Lilac #E6E1FF
OutlineFocus rings and emphasis outlines.Fair Lilac #E6E1FF

Palette Colors

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

Main (Brand) Colors

This palette features a cohesive purple spectrum where lighter and medium tones provide freshness and approachability, while deeper violet grounds the brand with authority and clarity in UI elements. The limited hue variation ensures strong brand recognition and a focused visual experience.

PrimaryMidnight Violet

RolesLogo, Btn Primary Bg

An ultra-deep violet that establishes a powerful and distinct brand presence, confidently anchoring primary actions and the logo.

HEX#040106
RGB4, 1, 6
HSL276, 71, 1
CMYK33, 83, 0, 98
SecondaryLavender Blue

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

A gentle lavender with blue undertones that supports secondary navigation and button backgrounds with subtle elegance.

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

RolesHeadline

A vibrant indigo shade that delivers strong visual hierarchy for headlines and important brand highlights without overwhelming.

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

Support Colors

Light and airy purples extend the main palette to enhance UI details, providing soft contrasts for icons, borders, dividers, and outlines while maintaining the palette’s sophisticated subtlety.

Lilac Mist

RolesIcon, Border

A delicate lilac that offers gentle contrast for icons and borders, reinforcing UI structure without distracting attention.

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

RolesDivider, Outline

A translucent pale lilac perfect for unobtrusive dividers and outlines, keeping the interface feeling open and spacious.

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
Frosted 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-midnight-violet: #040106;
  --color-lavender-blue: #AFA0FF;
  --color-royal-indigo: #5B3FD6;
  --color-lilac-mist: #C9BEFF;
  --color-fair-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: #040106;
  --role-btn-primary-bg: #040106;
  --role-link: #AFA0FF;
  --role-btn-secondary-bg: #AFA0FF;
  --role-btn-outlined-border: #AFA0FF;
  --role-btn-outlined-text: #AFA0FF;
  --role-headline: #5B3FD6;
  --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.
{
    "midnight-violet": "#040106",
    "lavender-blue": "#AFA0FF",
    "royal-indigo": "#5B3FD6",
    "lilac-mist": "#C9BEFF",
    "fair-lilac": "#E6E1FF",
    "pure-white": "#FFFFFF",
    "frosted-white": "#F6F5FB",
    "ink-black": "#161320"
}
Press Space to load new palette