Alipay color palette
FinanceAlipay's color system is centered on a signature blue, complemented by a clean, neutral palette for clarity and trust. The brand uses consistent blue and gray tones across its digital interfaces.
alipay.comAlipay colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Alipay BluePrimary22, 119, 255
- Alipay Deep BlueSecondary43, 92, 255
- Alipay CyanAccent0, 195, 255
Surfaces
Page, cards and dividers.- Alipay Light GrayBackground247, 248, 250
- Alipay WhiteSurface255, 255, 255
- Alipay Border GrayBorder229, 230, 235
Text
Three tiers of copy.- Alipay CharcoalText29, 33, 41
- Alipay SlateSecondary text78, 89, 105
- Alipay Muted GrayMuted text134, 144, 156
Semantic
Feedback and state colors.- Alipay GreenSuccess0, 181, 120
- Alipay OrangeWarning255, 143, 31
- Alipay RedError255, 49, 65
- Alipay BlueInfo22, 119, 255
Use Alipay's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
alipay-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1677FF;
--error: #FF3141;
--accent: #00C3FF;
--border: #E5E6EB;
--primary: #1677FF;
--success: #00B578;
--surface: #FFFFFF;
--warning: #FF8F1F;
--secondary: #2B5CFF;
--text-muted: #86909C;
--background: #F7F8FA;
--text-primary: #1D2129;
--text-secondary: #4E5969;
}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.2:1
Pass
Text on surface
Needs 4.5:1 for body text
16.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.1:1
Pass
Muted text on background
Needs 3:1 for large text
3.0:1
Pass
Muted text on surface
Needs 3:1 for large text
3.2:1
Pass
Alipay background, border and text colors
The quiet part of the Alipay palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Alipay Light GrayBackground
- HEX
- RGB
- HSL
- Alipay WhiteSurface
- HEX
- RGB
- HSL
- Alipay Border GrayBorder
- HEX
- RGB
- HSL
- Alipay CharcoalText
- HEX
- RGB
- HSL
- Alipay SlateSecondary text
- HEX
- RGB
- HSL
- Alipay Muted GrayMuted text
- HEX
- RGB
- HSL
About Alipay's colors
Alipay's palette is built on a foundation of blue, symbolizing trust and security, with neutral grays for clarity and accessibility. The accent colors provide clear visual cues for status and actions.
Primary blue is paired with neutral backgrounds for high contrast.
Accent cyan and status colors are used sparingly for emphasis.
Dark and light grays structure content and hierarchy.
Psychology
Blue conveys reliability and safety, which are essential for financial services. The neutral tones support a clean, modern, and approachable interface.
Evolution
Alipay's palette has remained stable, with the signature blue consistently prominent. Minor adjustments have been made to gray tones for improved accessibility and digital clarity.
Where Alipay uses each color
- Primary
Used for main navigation, primary buttons, and key highlights across the app and website.
- Secondary
Applied to secondary actions, hover states, and selected tabs.
- Accent
Used for notifications, highlights, and interactive elements requiring emphasis.
- Backgrounds
Light gray and white backgrounds provide a clean, minimal canvas for content.
- Text
Charcoal and slate grays are used for primary and secondary text, ensuring readability.
- Semantic
Green, orange, and red are used for success, warning, and error states in forms and notifications.
Alipay color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Alipay primary color is #1677FF, known as Alipay Blue. This color is used for main branding and interface highlights.
Alipay Blue (#1677FF) in RGB is (22, 119, 255). For CMYK, it is approximately (91%, 53%, 0%, 0%).
Alipay uses several grays such as Alipay Light Gray (#F7F8FA), Border Gray (#E5E6EB), and Muted Gray (#86909C) to structure backgrounds, borders, and muted text. These ensure a clean and accessible interface.
Use Alipay Blue (#1677FF) for primary actions and highlights, with neutral grays for backgrounds and text. Accent and semantic colors should be reserved for notifications, status, and important UI feedback.
The secondary color is Alipay Deep Blue, #2B5CFF, and the accent is Alipay Cyan, #00C3FF. 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 Alipay's colors consistently when it generates UI.
Make something in the spirit of Alipay
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.