Citi color palette
FinanceCiti's brand color system is defined by its signature Citi Blue, complemented by a palette of supporting blues, reds, and neutral grays for clarity and trust. The colors are used consistently across digital and print assets to reinforce the brand's identity in finance.
citi.comCiti colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Citi BluePrimary26, 76, 162
- Citi RedSecondary228, 31, 38
- Citi Sky BlueAccent0, 151, 214
Surfaces
Page, cards and dividers.- Citi WhiteBackground255, 255, 255
- Citi Light GraySurface245, 246, 250
- Citi Border GrayBorder209, 213, 219
Text
Three tiers of copy.- Citi BlackText26, 26, 26
- Citi Dark GraySecondary text75, 75, 75
- Citi Muted GrayMuted text125, 125, 125
Semantic
Feedback and state colors.- Citi Success GreenSuccess60, 184, 120
- Citi Warning YellowWarning249, 168, 37
- Citi Error RedError228, 31, 38
- Citi Info BlueInfo0, 151, 214
Use Citi's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
citi-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0097D6;
--error: #E41F26;
--accent: #0097D6;
--border: #D1D5DB;
--primary: #1A4CA2;
--success: #3CB878;
--surface: #F5F6FA;
--warning: #F9A825;
--secondary: #E41F26;
--text-muted: #7D7D7D;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #4B4B4B;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.4: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
8.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
8.1:1
Pass
Muted text on background
Needs 3:1 for large text
4.1:1
Pass
Muted text on surface
Needs 3:1 for large text
3.8:1
Pass
Citi background, border and text colors
The quiet part of the Citi palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Citi WhiteBackground
- HEX
- RGB
- HSL
- Citi Light GraySurface
- HEX
- RGB
- HSL
- Citi Border GrayBorder
- HEX
- RGB
- HSL
- Citi BlackText
- HEX
- RGB
- HSL
- Citi Dark GraySecondary text
- HEX
- RGB
- HSL
- Citi Muted GrayMuted text
- HEX
- RGB
- HSL
About Citi's colors
Citi's color palette is built around blue to evoke trust, reliability, and professionalism, with red as a bold accent. The supporting grays provide clarity and neutrality for UI and text.
Primary blue and red are complementary and create a strong visual identity.
Accent blue is used for highlights and interactive elements.
Neutral grays balance the palette and support accessibility.
Psychology
Blue is associated with security and stability, which aligns with Citi's financial services. Red adds energy and draws attention to key actions or branding elements.
Evolution
Citi's palette has remained stable for decades, with minor adjustments to blue and red for digital clarity. The addition of more nuanced grays supports modern UI needs.
Where Citi uses each color
- Primary
Citi Blue is used in the logo, primary navigation, and key call-to-action buttons.
- Secondary
Citi Red appears in the arc of the logo and as an accent in promotional materials.
- Accent
Citi Sky Blue is used for links, highlights, and secondary buttons.
- Backgrounds
Citi White and Light Gray are used for backgrounds in web and app interfaces.
- Text
Citi Black and Dark Gray are used for primary and secondary text, ensuring readability.
- Semantic
Success, warning, and error colors are used for alerts, notifications, and form feedback.
Citi color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Citi brand color is Citi Blue, with the hex code #1A4CA2. This is used in the logo and primary branding elements.
Citi Blue (#1A4CA2) is RGB(26, 76, 162) and CMYK(98, 76, 0, 0). Use these values for accurate color reproduction in digital and print.
Citi uses several grays such as Citi Light Gray (#F5F6FA), Border Gray (#D1D5DB), and Muted Gray (#7D7D7D) for backgrounds, borders, and secondary text.
Use Citi Blue (#1A4CA2) for primary actions and branding, Citi Red (#E41F26) for accents, and grays for backgrounds and text. Maintain sufficient contrast for accessibility.
The secondary color is Citi Red, #E41F26, and the accent is Citi Sky Blue, #0097D6. 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 Citi's colors consistently when it generates UI.
Make something in the spirit of Citi
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.