Lloyds color palette
FinanceLloyds uses a distinctive green as its primary brand color, complemented by a palette of dark neutrals and subtle accent tones for clarity and trust. The color system is consistent across digital and print applications, reflecting the brand's heritage and reliability.
lloydsbank.comLloyds colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Lloyds GreenPrimary0, 90, 66
- Lloyds Secondary GreenSecondary0, 127, 86
- Lloyds Yellow AccentAccent255, 209, 0
Surfaces
Page, cards and dividers.- Lloyds WhiteBackground255, 255, 255
- Lloyds Light GreySurface245, 245, 245
- Lloyds Border GreyBorder208, 211, 212
Text
Three tiers of copy.- Lloyds BlackText34, 34, 34
- Lloyds Dark GreySecondary text77, 77, 79
- Lloyds Muted GreyMuted text118, 118, 118
Semantic
Feedback and state colors.- Lloyds Success GreenSuccess0, 130, 114
- Lloyds Warning AmberWarning255, 182, 0
- Lloyds Error RedError215, 38, 61
- Lloyds Info BlueInfo0, 114, 206
Use Lloyds's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
lloyds-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #D7263D;
--accent: #FFD100;
--border: #D0D3D4;
--primary: #005A42;
--success: #008272;
--surface: #F5F5F5;
--warning: #FFB600;
--secondary: #007F56;
--text-muted: #767676;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #4D4D4F;
}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.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.7:1
Pass
Muted text on background
Needs 3:1 for large text
4.5:1
Pass
Muted text on surface
Needs 3:1 for large text
4.2:1
Pass
Lloyds gray and neutral colors
The quiet part of the Lloyds palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Lloyds WhiteBackground
- HEX
- RGB
- HSL
- Lloyds Light GreySurface
- HEX
- RGB
- HSL
- Lloyds Border GreyBorder
- HEX
- RGB
- HSL
- Lloyds BlackText
- HEX
- RGB
- HSL
- Lloyds Dark GreySecondary text
- HEX
- RGB
- HSL
- Lloyds Muted GreyMuted text
- HEX
- RGB
- HSL
About Lloyds's colors
Lloyds' color palette is built around a deep green, symbolizing stability and heritage, with neutral greys and white for clarity and accessibility. Accent colors are used sparingly to highlight key actions and information.
Primary green is complemented by a lighter secondary green.
Accent yellow provides contrast for calls to action.
Neutral greys balance the strong green and support readability.
Psychology
Green evokes trust, growth, and security, aligning with Lloyds' financial services. The use of neutral tones ensures a professional and approachable appearance.
Evolution
Lloyds' palette has remained stable, with the primary green in use for decades. Minor adjustments have been made to accent and neutral tones for digital accessibility.
Where Lloyds uses each color
- Primary
Lloyds Green is used for the logo, navigation bars, and primary buttons.
- Secondary
Lloyds Secondary Green appears in backgrounds, cards, and secondary buttons.
- Accent
Lloyds Yellow Accent highlights important notifications and call-to-action buttons.
- Backgrounds
Lloyds White and Light Grey are used for main page backgrounds and content areas.
- Text
Lloyds Black and Dark Grey are used for primary and secondary text, ensuring legibility.
- Semantic
Success, warning, error, and info colors are used for alerts, messages, and status indicators.
Lloyds color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Lloyds brand green is #005A42, known as Lloyds Green.
Lloyds Green (#005A42) is RGB(0, 90, 66) and CMYK(100, 0, 27, 65).
Lloyds uses #F5F5F5 (Lloyds Light Grey), #D0D3D4 (Lloyds Border Grey), and #222222 (Lloyds Black) for backgrounds, borders, and text.
Use Lloyds Green (#005A42) for primary branding elements, with secondary green and accent yellow for emphasis. Neutrals and semantic colors support UI clarity and accessibility.
The secondary color is Lloyds Secondary Green, #007F56, and the accent is Lloyds Yellow Accent, #FFD100. 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 Lloyds's colors consistently when it generates UI.
Make something in the spirit of Lloyds
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.