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 colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Stripe PurplePrimary99, 91, 255
- Stripe DarkSecondary10, 37, 64
- Stripe CyanAccent0, 212, 255
Surfaces
Page, cards and dividers.- Stripe WhiteBackground255, 255, 255
- Stripe SurfaceSurface246, 249, 252
- Stripe BorderBorder227, 232, 238
Text
Three tiers of copy.- Stripe NavyText10, 37, 64
- Stripe SlateSecondary text66, 84, 102
- Stripe MutedMuted text136, 152, 170
Semantic
Feedback and state colors.- Stripe GreenSuccess51, 203, 130
- Stripe YellowWarning255, 187, 0
- Stripe RedError223, 27, 65
- Stripe InfoInfo99, 91, 255
Use Stripe's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
stripe-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #635BFF;
--error: #DF1B41;
--accent: #00D4FF;
--border: #E3E8EE;
--primary: #635BFF;
--success: #33CB82;
--surface: #F6F9FC;
--warning: #FFBB00;
--secondary: #0A2540;
--text-muted: #8898AA;
--background: #FFFFFF;
--text-primary: #0A2540;
--text-secondary: #425466;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.5:1
Pass
Text on surface
Needs 4.5:1 for body text
14.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.4:1
Pass
Muted text on background
Needs 3:1 for large text
3.0:1
Fail
Muted text on surface
Needs 3:1 for large text
2.8:1
Fail
Stripe background, border and text colors
The quiet part of the Stripe palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Stripe WhiteBackground
- HEX
- RGB
- HSL
- Stripe SurfaceSurface
- HEX
- RGB
- HSL
- Stripe BorderBorder
- HEX
- RGB
- HSL
- Stripe NavyText
- HEX
- RGB
- HSL
- Stripe SlateSecondary text
- HEX
- RGB
- HSL
- Stripe MutedMuted text
- HEX
- RGB
- HSL
About Stripe's colors
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
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.
Where Stripe uses each 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.
- Text
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.
Stripe color questions
Hex codes, RGB values, neutrals and how to use the palette.
Stripe's primary brand color is a custom purple-violet (#635BFF), often called 'Stripe Purple.' It's frequently paired with a cyan (#00D4FF) gradient and deep navy (#0A2540) for contrast.
Stripe's signature gradient flows from purple (#635BFF) through blue to cyan (#00D4FF), used in hero sections, illustrations, and product imagery. This gradient has become synonymous with the Stripe brand.
The Stripe Dashboard uses a refined version of the brand palette with navy text (#0A2540), cool-toned surfaces (#F6F9FC), and the purple accent for interactive elements, creating a professional data-rich interface.
Stripe's primary color is Stripe Purple, hex #635BFF (RGB 99, 91, 255). It is the color used for the logo and the most prominent brand moments.
The secondary color is Stripe Dark, #0A2540, and the accent is Stripe Cyan, #00D4FF. Together with the primary they make up the three brand colors at the top of this page.
Stripe uses #FFFFFF for backgrounds, #F6F9FC for surfaces and #E3E8EE for borders. Text runs #0A2540, #425466 and #8898AA from strongest to most muted.
4 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies Stripe's colors consistently when it generates UI.
Make something in the spirit of Stripe
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.
