Stripe Atlas color palette
FinanceStripe Atlas uses a refined palette centered on deep blues and vibrant purples, reflecting trust, innovation, and professionalism in the fintech space. The color system is consistent with Stripe's broader brand identity, emphasizing clarity and modernity.
stripe.comStripe Atlas colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Atlas IndigoPrimary99, 91, 255
- Atlas CyanSecondary0, 212, 255
- Atlas PurpleAccent108, 71, 255
Surfaces
Page, cards and dividers.- Atlas Light GrayBackground246, 249, 252
- Atlas WhiteSurface255, 255, 255
- Atlas Border GrayBorder227, 232, 238
Text
Three tiers of copy.- Atlas NavyText10, 37, 64
- Atlas SlateSecondary text66, 84, 102
- Atlas Muted BlueMuted text107, 124, 147
Semantic
Feedback and state colors.- Atlas GreenSuccess0, 184, 107
- Atlas GoldWarning255, 176, 32
- Atlas CoralError255, 77, 109
- Atlas Info BlueInfo50, 151, 255
Use Stripe Atlas's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
stripe-atlas-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3297FF;
--error: #FF4D6D;
--accent: #6C47FF;
--border: #E3E8EE;
--primary: #635BFF;
--success: #00B86B;
--surface: #FFFFFF;
--warning: #FFB020;
--secondary: #00D4FF;
--text-muted: #6B7C93;
--background: #F6F9FC;
--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
14.7:1
Pass
Text on surface
Needs 4.5:1 for body text
15.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.8:1
Pass
Muted text on background
Needs 3:1 for large text
4.0:1
Pass
Muted text on surface
Needs 3:1 for large text
4.3:1
Pass
Stripe Atlas background, border and text colors
The quiet part of the Stripe Atlas palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Atlas Light GrayBackground
- HEX
- RGB
- HSL
- Atlas WhiteSurface
- HEX
- RGB
- HSL
- Atlas Border GrayBorder
- HEX
- RGB
- HSL
- Atlas NavyText
- HEX
- RGB
- HSL
- Atlas SlateSecondary text
- HEX
- RGB
- HSL
- Atlas Muted BlueMuted text
- HEX
- RGB
- HSL
About Stripe Atlas's colors
Stripe Atlas's palette is built on deep, trustworthy blues and vibrant accent hues, supporting clarity and professionalism. The colors are designed for high contrast and accessibility across digital interfaces.
Primary indigo pairs with cyan and purple accents for vibrancy.
Neutral backgrounds and borders ensure content clarity.
Semantic colors provide clear status feedback.
Psychology
The deep blues evoke trust, stability, and expertise, essential for a financial brand. Accent colors add energy and a sense of innovation.
Evolution
The Stripe Atlas palette has remained stable, closely following the evolution of Stripe's core brand colors. Minor adjustments have been made for improved accessibility and digital clarity.
Where Stripe Atlas uses each color
- Primary
Atlas Indigo is used for primary actions, navigation highlights, and key branding elements.
- Secondary
Atlas Cyan appears in illustrations, secondary buttons, and highlights.
- Accent
Atlas Purple is used for gradients, callouts, and visual emphasis in UI components.
- Backgrounds
Atlas Light Gray and Atlas White are used for app backgrounds and content surfaces.
- Text
Atlas Navy and Atlas Slate are used for primary and secondary text, ensuring readability.
- Semantic
Atlas Green, Gold, Coral, and Info Blue are used for success, warning, error, and informational states respectively.
Stripe Atlas color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Stripe Atlas primary brand color is Atlas Indigo, with the hex code #635BFF.
Atlas Indigo (#635BFF) in RGB is (99, 91, 255). For CMYK, it is approximately (61, 64, 0, 0).
Stripe Atlas uses Atlas Light Gray (#F6F9FC) and Atlas Border Gray (#E3E8EE) for backgrounds and borders, supporting a clean and modern UI.
Use Atlas Indigo (#635BFF) for primary actions and navigation, with accent and semantic colors for highlights and status. Neutrals provide background and text contrast for accessibility.
The secondary color is Atlas Cyan, #00D4FF, and the accent is Atlas Purple, #6C47FF. Together with the primary they make up the three brand colors at the top of this page.
6 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 Atlas's colors consistently when it generates UI.
Make something in the spirit of Stripe Atlas
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.