HSBC color palette
FinanceHSBC's brand identity is defined by its distinctive red, white, and grey palette, emphasizing clarity and trust. The color system is consistent across digital and print applications, reflecting the bank's global presence.
hsbc.comHSBC colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- HSBC RedPrimary219, 0, 17
- HSBC WhiteSecondary255, 255, 255
- HSBC BlackAccent0, 0, 0
Surfaces
Page, cards and dividers.- HSBC Light GreyBackground245, 245, 245
- HSBC Surface GreySurface230, 231, 232
- HSBC Border GreyBorder191, 193, 195
Text
Three tiers of copy.- HSBC CharcoalText26, 26, 26
- HSBC Medium GreySecondary text102, 102, 102
- HSBC Muted GreyMuted text167, 168, 170
Semantic
Feedback and state colors.- HSBC Success GreenSuccess0, 132, 61
- HSBC Warning YellowWarning255, 184, 28
- HSBC Error RedError219, 0, 17
- HSBC Info BlueInfo0, 114, 206
Use HSBC's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
hsbc-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #DB0011;
--accent: #000000;
--border: #BFC1C3;
--primary: #DB0011;
--success: #00843D;
--surface: #E6E7E8;
--warning: #FFB81C;
--secondary: #FFFFFF;
--text-muted: #A7A8AA;
--background: #F5F5F5;
--text-primary: #1A1A1A;
--text-secondary: #666666;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.0:1
Pass
Text on surface
Needs 4.5:1 for body text
14.1: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.6:1
Pass
Muted text on background
Needs 3:1 for large text
2.2:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
HSBC gray and neutral colors
The quiet part of the HSBC palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- HSBC Light GreyBackground
- HEX
- RGB
- HSL
- HSBC Surface GreySurface
- HEX
- RGB
- HSL
- HSBC Border GreyBorder
- HEX
- RGB
- HSL
- HSBC CharcoalText
- HEX
- RGB
- HSL
- HSBC Medium GreySecondary text
- HEX
- RGB
- HSL
- HSBC Muted GreyMuted text
- HEX
- RGB
- HSL
About HSBC's colors
HSBC's color palette is anchored by a bold red, complemented by clean whites and neutral greys for clarity and professionalism. The palette is designed for high contrast and accessibility across all media.
Red is used for emphasis and brand recognition.
Greys and whites provide neutral backgrounds and structure.
Accent black and blue are used for hierarchy and information.
Psychology
Red conveys energy, confidence, and leadership, aligning with HSBC's global stature. The neutral tones reinforce trust, stability, and approachability.
Evolution
HSBC's palette has remained largely unchanged for decades, maintaining strong brand recognition. Minor adjustments have refined the greys and accent colors for modern digital use.
Where HSBC uses each color
- Primary
HSBC Red is used for the logo, key buttons, and highlights across digital and print assets.
- Secondary
HSBC White serves as the main background for web pages, forms, and printed materials.
- Accent
HSBC Black is used for text, icons, and certain navigation elements.
- Backgrounds
HSBC Light Grey is applied to page backgrounds and UI panels for subtle contrast.
- Text
HSBC Charcoal and greys are used for primary, secondary, and muted text throughout interfaces.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for alerts, notifications, and status indicators.
HSBC color questions
Hex codes, RGB values, neutrals and how to use the palette.
The HSBC primary color hex code is #DB0011, known as HSBC Red. This color is central to the brand's identity.
HSBC Red (#DB0011) in RGB is (219, 0, 17) and in CMYK is (0, 100, 92, 14). Use these values for accurate reproduction in digital and print.
HSBC uses several greys: HSBC Light Grey (#F5F5F5), Surface Grey (#E6E7E8), Border Grey (#BFC1C3), Medium Grey (#666666), and Muted Grey (#A7A8AA). These are used for backgrounds, borders, and text hierarchy.
Use HSBC Red (#DB0011) for brand emphasis, with whites and greys for backgrounds and structure. Semantic colors like Success Green (#00843D) and Info Blue (#0072CE) are reserved for alerts and status messaging.
The secondary color is HSBC White, #FFFFFF, and the accent is HSBC Black, #000000. 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 HSBC's colors consistently when it generates UI.
Make something in the spirit of HSBC
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.