Santander color palette
FinanceSantander's color identity is defined by its iconic red, paired with clean whites and dark grays for a modern, trustworthy financial brand. The palette is simple, bold, and highly recognizable in the banking sector.
santander.comSantander colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Santander RedPrimary236, 0, 0
- Santander WhiteSecondary255, 255, 255
- Santander Deep RedAccent196, 0, 0
Surfaces
Page, cards and dividers.- Santander Light GrayBackground245, 245, 245
- Santander Pale GraySurface230, 230, 230
- Santander Border GrayBorder204, 204, 204
Text
Three tiers of copy.- Santander CharcoalText34, 34, 34
- Santander Medium GraySecondary text102, 102, 102
- Santander Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Santander Success GreenSuccess67, 176, 42
- Santander Warning YellowWarning255, 182, 0
- Santander Error RedError208, 2, 27
- Santander Info BlueInfo0, 113, 184
Use Santander's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
santander-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0071B8;
--error: #D0021B;
--accent: #C40000;
--border: #CCCCCC;
--primary: #EC0000;
--success: #43B02A;
--surface: #E6E6E6;
--warning: #FFB600;
--secondary: #FFFFFF;
--text-muted: #999999;
--background: #F5F5F5;
--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
14.6:1
Pass
Text on surface
Needs 4.5:1 for body text
12.7: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.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Santander gray and neutral colors
The quiet part of the Santander palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Santander Light GrayBackground
- HEX
- RGB
- HSL
- Santander Pale GraySurface
- HEX
- RGB
- HSL
- Santander Border GrayBorder
- HEX
- RGB
- HSL
- Santander CharcoalText
- HEX
- RGB
- HSL
- Santander Medium GraySecondary text
- HEX
- RGB
- HSL
- Santander Muted GrayMuted text
- HEX
- RGB
- HSL
About Santander's colors
Santander's palette is built around a strong, vivid red, symbolizing energy and confidence, balanced by neutral grays and whites for clarity and professionalism. The use of minimal accent colors ensures strong brand recognition and visual consistency.
Primary red dominates, supported by white and gray neutrals.
Accent deep red is used for emphasis and hierarchy.
Functional colors (green, yellow, blue) are reserved for status and alerts.
Psychology
Red conveys strength, leadership, and trust, which are essential qualities in finance. The neutral tones provide a sense of stability and approachability.
Evolution
Santander's red has been a core element since its rebrand in the late 1980s and has remained consistent. The supporting palette has evolved with digital trends, adding more refined grays for modern UI clarity.
Where Santander uses each color
- Primary
Santander Red is used for the logo, primary buttons, and key navigation highlights.
- Secondary
Santander White serves as the main background and for text on red elements.
- Accent
Santander Deep Red is used for hover states, active tabs, and secondary CTAs.
- Backgrounds
Santander Light Gray and Pale Gray are used for app backgrounds, cards, and section dividers.
- Text
Santander Charcoal is used for main body text, with Medium and Muted Gray for secondary and disabled text.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for status messages, alerts, and notifications.
Santander color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Santander brand color is Santander Red, with the hex code #EC0000.
Santander Red is RGB(236, 0, 0) and CMYK(0, 100, 100, 7). The hex code is #EC0000.
Santander uses Light Gray (#F5F5F5), Pale Gray (#E6E6E6), Border Gray (#CCCCCC), and Charcoal (#222222) for UI backgrounds and text. These ensure clarity and accessibility across digital platforms.
Use Santander Red (#EC0000) for primary branding, buttons, and highlights, with neutrals for backgrounds and text. Reserve semantic colors for status and alerts to maintain brand consistency.
The secondary color is Santander White, #FFFFFF, and the accent is Santander Deep Red, #C40000. 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 Santander's colors consistently when it generates UI.
Make something in the spirit of Santander
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.