Afterpay color palette
FinanceAfterpay's color identity centers on a distinctive mint green, complemented by dark and light neutrals for clarity and accessibility. The palette is minimal, modern, and designed for digital finance interfaces.
afterpay.comAfterpay colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Afterpay MintPrimary178, 252, 228
- Afterpay BlackSecondary0, 0, 0
- Afterpay TealAccent0, 196, 179
Surfaces
Page, cards and dividers.- Afterpay WhiteBackground255, 255, 255
- Afterpay Light GreySurface244, 247, 246
- Afterpay Border GreyBorder230, 233, 232
Text
Three tiers of copy.- Afterpay CharcoalText34, 34, 34
- Afterpay Medium GreySecondary text107, 107, 107
- Afterpay Muted GreyMuted text161, 161, 161
Semantic
Feedback and state colors.- Afterpay Success TealSuccess0, 196, 179
- Afterpay Warning YellowWarning255, 214, 0
- Afterpay Error RedError255, 59, 48
- Afterpay Info Blue-GreenInfo0, 122, 124
Use Afterpay's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
afterpay-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #007A7C;
--error: #FF3B30;
--accent: #00C4B3;
--border: #E6E9E8;
--primary: #B2FCE4;
--success: #00C4B3;
--surface: #F4F7F6;
--warning: #FFD600;
--secondary: #000000;
--text-muted: #A1A1A1;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #6B6B6B;
}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.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.9:1
Pass
Muted text on background
Needs 3:1 for large text
2.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Afterpay background, border and text colors
The quiet part of the Afterpay palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Afterpay WhiteBackground
- HEX
- RGB
- HSL
- Afterpay Light GreySurface
- HEX
- RGB
- HSL
- Afterpay Border GreyBorder
- HEX
- RGB
- HSL
- Afterpay CharcoalText
- HEX
- RGB
- HSL
- Afterpay Medium GreySecondary text
- HEX
- RGB
- HSL
- Afterpay Muted GreyMuted text
- HEX
- RGB
- HSL
About Afterpay's colors
Afterpay’s palette is built around a fresh mint green, supported by deep black and soft greys for contrast and readability. The color system is designed to evoke trust, simplicity, and approachability in digital finance.
Primary mint is paired with black for strong contrast.
Accent teal and success teal reinforce the brand’s fresh, positive tone.
Neutral greys provide balance and support for UI clarity.
Psychology
The mint green conveys freshness, innovation, and a sense of ease, while black and grey tones ground the experience in professionalism and trust. Accent colors are used sparingly to highlight actions and statuses without overwhelming the user.
Evolution
Afterpay’s palette has remained consistent since its rebrand, maintaining the signature mint as its core. Minor adjustments to neutral tones have improved accessibility and digital clarity over time.
Where Afterpay uses each color
- Primary
Afterpay Mint is used for main branding, primary buttons, and key highlights across the website and app.
- Secondary
Afterpay Black appears in navigation bars, text, and logo elements.
- Accent
Afterpay Teal is used for interactive elements, icons, and success states.
- Backgrounds
Afterpay White and Light Grey are used for page backgrounds and card surfaces.
- Text
Charcoal and Medium Grey are used for primary and secondary text, with Muted Grey for disabled or less prominent text.
- Semantic
Success, warning, error, and info colors are used for status indicators, alerts, and notifications.
Afterpay color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Afterpay primary color is #B2FCE4, known as Afterpay Mint. This color is central to the brand's identity.
Afterpay Mint (#B2FCE4) in RGB is (178, 252, 228). For CMYK, use approximately (29, 0, 10, 1).
Afterpay uses #000000 (Afterpay Black) for deep contrast, #222222 (Charcoal) for primary text, and #F4F7F6 (Light Grey) for surfaces. These neutrals ensure clarity and accessibility in UI design.
Use Afterpay Mint (#B2FCE4) for primary actions and highlights, with black and greys for backgrounds and text. Accent and semantic colors should be applied sparingly for emphasis and status indications.
The secondary color is Afterpay Black, #000000, and the accent is Afterpay Teal, #00C4B3. Together with the primary they make up the three brand colors at the top of this page.
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 Afterpay's colors consistently when it generates UI.
Make something in the spirit of Afterpay
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.