Affirm color palette
FinanceAffirm's color identity is defined by a distinctive blue, paired with a clean, modern palette of neutrals and subtle accents. The brand uses its signature blue prominently across digital and print assets for instant recognition.
affirm.comAffirm colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Affirm BluePrimary26, 112, 255
- Affirm NavySecondary10, 37, 64
- Affirm PurpleAccent138, 63, 252
Surfaces
Page, cards and dividers.- Affirm WhiteBackground255, 255, 255
- Affirm Light GraySurface246, 247, 251
- Affirm Border GrayBorder229, 231, 235
Text
Three tiers of copy.- Affirm NavyText10, 37, 64
- Affirm SlateSecondary text66, 84, 102
- Affirm Muted GrayMuted text107, 124, 147
Semantic
Feedback and state colors.- Affirm Success GreenSuccess0, 182, 122
- Affirm Warning YellowWarning255, 184, 0
- Affirm Error RedError255, 59, 48
- Affirm BlueInfo26, 112, 255
Use Affirm's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
affirm-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1A70FF;
--error: #FF3B30;
--accent: #8A3FFC;
--border: #E5E7EB;
--primary: #1A70FF;
--success: #00B67A;
--surface: #F6F7FB;
--warning: #FFB800;
--secondary: #0A2540;
--text-muted: #6B7C93;
--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.5: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.3:1
Pass
Muted text on background
Needs 3:1 for large text
4.3:1
Pass
Muted text on surface
Needs 3:1 for large text
4.0:1
Pass
Affirm background, border and text colors
The quiet part of the Affirm palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Affirm WhiteBackground
- HEX
- RGB
- HSL
- Affirm Light GraySurface
- HEX
- RGB
- HSL
- Affirm Border GrayBorder
- HEX
- RGB
- HSL
- Affirm NavyText
- HEX
- RGB
- HSL
- Affirm SlateSecondary text
- HEX
- RGB
- HSL
- Affirm Muted GrayMuted text
- HEX
- RGB
- HSL
About Affirm's colors
Affirm's palette centers around a vibrant blue, supported by deep navy and clean neutrals for clarity and trust. Accent colors are used sparingly for emphasis and accessibility.
Primary blue contrasts with white backgrounds for high visibility.
Navy and slate provide depth and hierarchy in UI elements.
Accent purple is reserved for highlights and interactive states.
Psychology
Blue communicates trust, reliability, and security—key values in financial services. The neutral grays and white reinforce a sense of simplicity and transparency.
Evolution
Affirm's palette has remained consistent, with the blue and navy core colors unchanged since early brand iterations. Accent and supporting colors have been refined for improved accessibility and digital clarity.
Where Affirm uses each color
- Primary
Affirm Blue is used for primary buttons, links, and the logo.
- Secondary
Affirm Navy appears in navigation bars, footers, and headings.
- Accent
Affirm Purple is used for interactive elements and highlights.
- Backgrounds
Affirm White and Light Gray are used for page backgrounds and cards.
- Text
Affirm Navy and Slate are used for primary and secondary text across the site.
- Semantic
Success Green, Warning Yellow, and Error Red are used for status messages and alerts.
Affirm color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Affirm brand blue is #1A70FF. This color is used prominently in the logo and UI elements.
Affirm Blue (#1A70FF) in RGB is (26, 112, 255). For CMYK, it is approximately (90, 56, 0, 0).
Affirm uses a range of grays including Affirm Light Gray (#F6F7FB), Border Gray (#E5E7EB), Slate (#425466), and Muted Gray (#6B7C93) for backgrounds, borders, and secondary text.
Affirm Blue should be reserved for primary actions and branding, while navy and grays structure the UI. Accent and semantic colors are used sparingly for highlights and status indications.
The secondary color is Affirm Navy, #0A2540, and the accent is Affirm Purple, #8A3FFC. 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 Affirm's colors consistently when it generates UI.
Make something in the spirit of Affirm
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.