Stripe Color Psychology & Meaning
Stripe's gradient-purple identity is the most imitated in fintech. It signals developer-first sophistication and the creative potential of payments infrastructure.
#635BFF
#0A2540
#00D4FF
#FFFFFF
Background
Primary Accent
Secondary
Body Text
Stripe
coolnightvibrant springsummer brandingweb
AA
WCAG Grade
4.7:1
Contrast Ratio
4,800
Saves
13,200
AI Copies
Use #635BFF as the background. Use #0A2540 as the primary accent. Use #00D4FF as secondary. Use #FFFFFF as body text/supporting color. Palette mood: Stripe — cool, night, vibrant.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Stripe color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 17.4% | 99, 91, 255 | 61%, 64%, 0%, 0% | 243°, 100%, 68% | ||
| Primary Accent Luminance: 1.8% | 10, 37, 64 | 84%, 42%, 0%, 75% | 210°, 73%, 15% | ||
| Secondary Luminance: 54.3% | 0, 212, 255 | 100%, 17%, 0%, 0% | 190°, 100%, 50% | ||
| Body Text Luminance: 100.0% | 255, 255, 255 | 0%, 0%, 0%, 0% | 0°, 0%, 100% |
Color Harmony: Triadic Scheme
The Stripe palette is built using a triadic relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A triadic palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Stripe rebranded in 2020 with designer Michael Bierut. The gradient became so associated with developer tools that competitors consciously avoided it.
Best Design Use Cases
Gradient purple for hero sections and brand moments. Dark navy for documentation and content. Cyan for code highlights and accent interactions.
Industries This Palette Suits
Fintech, developer tools, API platforms, SaaS.
How to Implement the Stripe Color Scheme
To use this Stripe color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #635BFF for the main background and #0A2540 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #FFFFFF and #635BFF is 4.70:1 (AA). Ensure your body text remains legible.