Stripe Color Palette
TechStripe's brand is defined by its signature gradient-ready violet-blue palette, projecting technical sophistication and trustworthiness in the payments space.
stripe.comStripe logo is a trademark of Stripe. Used for informational purposes.
Brand Colors
Stripe Purple
primary
Stripe Dark
secondary
Stripe Cyan
accent
Surfaces & Borders
Stripe White
background
Stripe Surface
surface
Stripe Border
border
Typography
Stripe Navy
textPrimary
Stripe Slate
textSecondary
Stripe Muted
textMuted
Semantic Colors
Stripe Green
success
Stripe Yellow
warning
Stripe Red
error
Stripe Info
info
Accessibility
textPrimary / background
textPrimary / surface
textSecondary / background
textSecondary / surface
textMuted / background
textMuted / surface
Color Theory
Stripe's color system pairs a vibrant purple-violet primary with a deep navy, creating a premium, developer-oriented feel. The gradient between purple and cyan has become one of the most recognizable brand elements in tech.
- The purple-to-cyan gradient creates a dynamic spectrum suggesting innovation and speed
- Navy (#0A2540) grounds the vivid purple with authority and readability
- Tinted grays (slate-blue undertones) maintain brand warmth even in neutral elements
Color Psychology
Purple communicates creativity and premium positioning. The deep navy adds financial trust and sophistication. Together they say 'we handle money seriously, but we're also innovative.' The cyan accent adds a futuristic, technical edge.
Evolution
Stripe shifted from a simpler blue palette to the distinctive purple-violet around 2018. The gradient treatment has become increasingly central, evolving from subtle background washes to prominent hero elements.
How Stripe Uses Color
Primary
Stripe Purple (#635BFF) defines buttons, active states, and the signature brand gradient across stripe.com.
Secondary
Dark navy (#0A2540) serves as the primary text color and dark section backgrounds, adding depth and contrast.
Accent
Cyan (#00D4FF) punctuates gradients and hover states, adding energy to the purple-dominant palette.
Backgrounds
White backgrounds with cool-toned surfaces (#F6F9FC) create the clean, technical documentation aesthetic Stripe is known for.
Typography
Navy text with slate-tinted secondary colors maintain a cohesive blue undertone throughout.
Semantic
Custom semantic colors (green, yellow, red) are desaturated compared to the brand palette, keeping functional UI distinct from brand elements.
Agent integration
Use Stripe's Colors in Your Agent
Terminal
Copies full install command. Saves skill to .claude/skills/stripe/ — auto-detected on next run.
Included in the skill file
- 113 color roles — hex, HSL, and CSS variable names
- 2WCAG contrast rules for accessible pairings
- 3Auto-applies Stripe's palette when generating UI
Frequently Asked Questions
Create Something Inspired by Stripe
Generate a unique color palette inspired by Stripe's aesthetic using AI.
