Credit Suisse color palette
FinanceCredit Suisse's color identity is defined by a distinctive deep blue, representing trust, stability, and professionalism. The palette is complemented by neutral grays and white, supporting a clean and authoritative visual language.
credit-suisse.comCredit Suisse colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Credit Suisse BluePrimary0, 51, 102
- Credit Suisse Secondary BlueSecondary0, 83, 155
- Credit Suisse Accent BlueAccent0, 145, 208
Surfaces
Page, cards and dividers.- Credit Suisse WhiteBackground255, 255, 255
- Credit Suisse Light GraySurface245, 247, 250
- Credit Suisse Border GrayBorder209, 213, 219
Text
Three tiers of copy.- Credit Suisse BlackText26, 26, 26
- Credit Suisse Dark GraySecondary text75, 75, 75
- Credit Suisse Muted GrayMuted text125, 125, 125
Semantic
Feedback and state colors.- Credit Suisse GreenSuccess0, 128, 96
- Credit Suisse YellowWarning255, 182, 0
- Credit Suisse RedError215, 38, 61
- Credit Suisse Info BlueInfo0, 145, 208
Use Credit Suisse's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
credit-suisse-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0091D0;
--error: #D7263D;
--accent: #0091D0;
--border: #D1D5DB;
--primary: #003366;
--success: #008060;
--surface: #F5F7FA;
--warning: #FFB600;
--secondary: #00539B;
--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.2: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
Credit Suisse background, border and text colors
The quiet part of the Credit Suisse palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Credit Suisse WhiteBackground
- HEX
- RGB
- HSL
- Credit Suisse Light GraySurface
- HEX
- RGB
- HSL
- Credit Suisse Border GrayBorder
- HEX
- RGB
- HSL
- Credit Suisse BlackText
- HEX
- RGB
- HSL
- Credit Suisse Dark GraySecondary text
- HEX
- RGB
- HSL
- Credit Suisse Muted GrayMuted text
- HEX
- RGB
- HSL
About Credit Suisse's colors
Credit Suisse's palette is anchored by a deep blue, conveying reliability and expertise. Neutral grays and white provide clarity and balance, while accent blues and semantic colors support UI needs.
Primary blue is complemented by lighter accent blues for hierarchy.
Neutrals balance the strong blue tones for readability.
Semantic colors (green, yellow, red) are reserved for status and alerts.
Psychology
The deep blue evokes trust, authority, and tradition, aligning with financial sector expectations. Neutral grays and white reinforce a sense of clarity and professionalism.
Evolution
Credit Suisse's core blue has remained consistent for decades, maintaining strong brand recognition. Minor adjustments to supporting grays and accent blues have modernized the palette for digital use.
Where Credit Suisse uses each color
- Primary
Used in the logo, navigation bars, and key calls to action.
- Secondary
Appears in secondary buttons, highlights, and section dividers.
- Accent
Used for links, icons, and interactive elements.
- Backgrounds
White and light gray are used for page backgrounds and content areas.
- Text
Primary black and dark gray are used for headings and body text.
- Semantic
Green, yellow, and red are used for success, warning, and error states in dashboards and notifications.
Credit Suisse color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Credit Suisse brand color is #003366, known as Credit Suisse Blue.
Credit Suisse Blue (#003366) is RGB(0, 51, 102) and CMYK(100, 50, 0, 60).
Credit Suisse uses #F5F7FA (Light Gray), #D1D5DB (Border Gray), and #1A1A1A (Black) for backgrounds, borders, and text.
Primary blue (#003366) should dominate navigation, branding, and key actions, while neutrals and accent blues support readability and hierarchy.
The secondary color is Credit Suisse Secondary Blue, #00539B, and the accent is Credit Suisse Accent Blue, #0091D0. 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 Credit Suisse's colors consistently when it generates UI.
Make something in the spirit of Credit Suisse
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.