Barclays color palette
FinanceBarclays uses a distinctive blue-centric palette with crisp neutrals to convey trust, clarity, and professionalism in its financial services. The brand's color identity is anchored by the iconic Barclays Blue, supported by a range of greys and accent tones for UI clarity.
barclays.comBarclays colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Barclays BluePrimary0, 174, 239
- Barclays Deep BlueSecondary0, 149, 200
- Barclays Accent BlueAccent0, 127, 163
Surfaces
Page, cards and dividers.- Barclays WhiteBackground255, 255, 255
- Barclays Light GreySurface245, 247, 248
- Barclays Soft GreyBorder208, 214, 217
Text
Three tiers of copy.- Barclays CharcoalText34, 34, 34
- Barclays Medium GreySecondary text102, 102, 102
- Barclays Muted GreyMuted text163, 170, 174
Semantic
Feedback and state colors.- Barclays GreenSuccess67, 176, 42
- Barclays YellowWarning255, 184, 28
- Barclays RedError224, 60, 49
- Barclays Info BlueInfo0, 149, 200
Use Barclays's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
barclays-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0095C8;
--error: #E03C31;
--accent: #007FA3;
--border: #D0D6D9;
--primary: #00AEEF;
--success: #43B02A;
--surface: #F5F7F8;
--warning: #FFB81C;
--secondary: #0095C8;
--text-muted: #A3AAAE;
--background: #FFFFFF;
--text-primary: #222222;
--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
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.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.3:1
Pass
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.2:1
Fail
Barclays background, border and text colors
The quiet part of the Barclays palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Barclays WhiteBackground
- HEX
- RGB
- HSL
- Barclays Light GreySurface
- HEX
- RGB
- HSL
- Barclays Soft GreyBorder
- HEX
- RGB
- HSL
- Barclays CharcoalText
- HEX
- RGB
- HSL
- Barclays Medium GreySecondary text
- HEX
- RGB
- HSL
- Barclays Muted GreyMuted text
- HEX
- RGB
- HSL
About Barclays's colors
Barclays' color system is built around a signature blue, complemented by neutral greys and functional accent colors for clarity and accessibility. The palette is designed to evoke trust and reliability, essential qualities in the finance sector.
Primary blue is paired with deeper and lighter blues for depth.
Neutrals provide contrast and support legibility.
Accent colors are reserved for alerts and key UI elements.
Psychology
Blue is associated with trust, security, and stability, which are critical in banking. The use of clear, neutral greys reinforces a sense of professionalism and clarity.
Evolution
Barclays' palette has remained consistent for over a decade, with minor adjustments to blue tones for digital accessibility. The brand has increasingly emphasized neutral backgrounds and high-contrast text for modern UI needs.
Where Barclays uses each color
- Primary
Barclays Blue is used for the logo, primary navigation, and main call-to-action buttons.
- Secondary
Barclays Deep Blue appears in secondary buttons, links, and hover states.
- Accent
Accent Blue highlights active UI elements and selected states.
- Backgrounds
Barclays 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 information.
- Semantic
Green, Yellow, and Red are used for success, warning, and error messages, while Info Blue denotes informational alerts.
Barclays color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Barclays primary color hex code is #00AEEF. This is known as Barclays Blue.
Barclays Blue (#00AEEF) is RGB(0, 174, 239) and CMYK(85, 0, 0, 0). Use these values for print and digital consistency.
Barclays uses several greys in its UI: Soft Grey (#D0D6D9), Medium Grey (#666666), and Muted Grey (#A3AAAE). These ensure clarity and accessibility across backgrounds and text.
Use Barclays Blue (#00AEEF) for primary actions and branding, with supporting blues and greys for UI structure and hierarchy. Reserve semantic colors for alerts and status messages to maintain clarity.
The secondary color is Barclays Deep Blue, #0095C8, and the accent is Barclays Accent Blue, #007FA3. 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 Barclays's colors consistently when it generates UI.
Make something in the spirit of Barclays
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.