Cobalt Pulse#1D4ED8
Azure Link#2563EB
Electric Violet#6D28D9
Sky Mist#7DD3FC
Orchid Veil#A78BFA
Palette direction

Stripe Inspired Tech Color Palette

A Stripe-inspired system built around a confident cobalt core, a vivid cyan bridge, and a restrained violet accent. It feels modern and high-trust while staying energetic enough for SaaS interfaces and product-led branding.

AnalogousTechstripe inspiredsaaspaymentsfintech
palette-preview.example
Tech color direction

Stripe Inspired Tech Color Palette

A Stripe-inspired system built around a confident cobalt core, a vivid cyan bridge, and a restrained violet accent. It feels modern and high-trust while staying energetic enough for SaaS interfaces and product-led branding.

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 Violet #6D28D97.1:1 Excellent
Logo Pure White #FFFFFFon Azure Link #2563EB5.2:1 Strong
Logo Midnight Slate #0F172Aon Pure White #FFFFFF17.9:1 Excellent
Logo Midnight Slate #0F172Aon Sky Mist #7DD3FC10.7:1 Excellent
Icon color
BackgroundCobalt Pulse#1D4ED8TextPure White#FFFFFF
Primary Button6.70:1
AA

Best for the main action users should notice first.

BackgroundElectric Violet#6D28D9TextPure White#FFFFFF
Secondary Button7.10:1
AAA

Useful for softer choices and secondary paths.

BackgroundCloud White#F8FAFCTextElectric Violet#6D28D9
Outlined Button6.79:1
AA

Good for lower-emphasis actions on light surfaces.

BackgroundCloud White#F8FAFCTextAzure Link#2563EB
Text Button4.94:1
AA

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

Palette composition8 colorsAnalogous color relationship
9:41Stripe Inspired Tech 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.

CStripe Inspired Tech Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors stay within a tight blue-to-violet range, which creates a recognizably Stripe-like system without copying it. The blend feels crisp and product-forward, with enough variation to support hierarchy across branding and UI.

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.Cobalt Pulse #1D4ED8
HeadlineUsed for main titles and key messages.Azure Link #2563EB
LinkUsed for links and interactive text.Azure Link #2563EB

Buttons

Primary Button
BackgroundCobalt Pulse #1D4ED8
TextPure White #FFFFFF
Secondary Button
BackgroundElectric Violet #6D28D9
TextPure White #FFFFFF
Outlined Button
BackgroundElectric Violet #6D28D9
TextElectric Violet #6D28D9

Interface

TextDefault readable body text.Midnight Slate #0F172A
Bg LightLight page or section background.Cloud White #F8FAFC
Bg DarkDark page or section background.Midnight Slate #0F172A
IconSmall interface icons and marks.Sky Mist #7DD3FC
BorderCards, inputs, and component borders.Sky Mist #7DD3FC
DividerSubtle separators between content.Orchid Veil #A78BFA
OutlineFocus rings and emphasis outlines.Orchid Veil #A78BFA

Palette Colors

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

Main (Brand) Colors

The main colors stay within a tight blue-to-violet range, which creates a recognizably Stripe-like system without copying it. The blend feels crisp and product-forward, with enough variation to support hierarchy across branding and UI.

PrimaryCobalt Pulse

RolesLogo, Btn Primary Bg

A strong cobalt that gives the brand its core identity and makes primary actions feel reliable and decisive.

HEX#1D4ED8
RGB29, 78, 216
HSL224, 76, 48
CMYK87, 64, 0, 15
SecondaryAzure Link

RolesLink, Headline

A brighter blue that supports navigation and key messaging while keeping the palette cohesive and digital.

HEX#2563EB
RGB37, 99, 235
HSL221, 83, 53
CMYK84, 58, 0, 8
TertiaryElectric Violet

RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text

A violet accent that adds distinction for secondary UI treatments and gives the system a more distinctive Stripe-like edge.

HEX#6D28D9
RGB109, 40, 217
HSL263, 70, 50
CMYK50, 82, 0, 15

Support Colors

The support colors add restrained cool contrast and interface softness without competing with the main blues and violet. They help the palette feel polished in product surfaces, UI

Sky Mist

RolesIcon, Border

A soft sky blue that lightens component chrome and keeps icons and borders aligned with the main blue energy.

HEX#7DD3FC
RGB125, 211, 252
HSL199, 95, 74
CMYK50, 16, 0, 1
Orchid Veil

RolesDivider, Outline

A muted lavender that extends the violet tone into subtle UI structure while staying clearly subordinate.

HEX#A78BFA
RGB167, 139, 250
HSL255, 92, 76
CMYK33, 44, 0, 2

Neutral Colors

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

Pure White

RolesBtn Primary Text, Btn Secondary Text

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

RolesBg Light

HEX#F8FAFC
RGB248, 250, 252
HSL210, 40, 98
CMYK2, 1, 0, 1
Midnight Slate

RolesBg Dark, Text

HEX#0F172A
RGB15, 23, 42
HSL222, 47, 11
CMYK64, 45, 0, 84

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-cobalt-pulse: #1D4ED8;
  --color-azure-link: #2563EB;
  --color-electric-violet: #6D28D9;
  --color-sky-mist: #7DD3FC;
  --color-orchid-veil: #A78BFA;
  --color-pure-white: #FFFFFF;
  --color-cloud-white: #F8FAFC;
  --color-midnight-slate: #0F172A;
}

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: #1D4ED8;
  --role-btn-primary-bg: #1D4ED8;
  --role-link: #2563EB;
  --role-headline: #2563EB;
  --role-btn-secondary-bg: #6D28D9;
  --role-btn-outlined-border: #6D28D9;
  --role-btn-outlined-text: #6D28D9;
  --role-icon: #7DD3FC;
  --role-border: #7DD3FC;
  --role-divider: #A78BFA;
  --role-outline: #A78BFA;
  --role-btn-primary-text: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-light: #F8FAFC;
  --role-bg-dark: #0F172A;
  --role-text: #0F172A;
}

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.
{
    "cobalt-pulse": "#1D4ED8",
    "azure-link": "#2563EB",
    "electric-violet": "#6D28D9",
    "sky-mist": "#7DD3FC",
    "orchid-veil": "#A78BFA",
    "pure-white": "#FFFFFF",
    "cloud-white": "#F8FAFC",
    "midnight-slate": "#0F172A"
}
Press Space to load new palette