Trade Republic color palette
FinanceTrade Republic's color identity is defined by a minimalist black and white palette, emphasizing clarity and trust. The brand uses high-contrast neutrals with subtle gray tones for its digital finance platform.
traderepublic.comTrade Republic colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Trade Republic BlackPrimary0, 0, 0
- Trade Republic WhiteSecondary255, 255, 255
- Trade Republic GreenAccent0, 229, 153
Surfaces
Page, cards and dividers.- Trade Republic Light GrayBackground245, 245, 245
- Trade Republic Surface GraySurface229, 229, 229
- Trade Republic Border GrayBorder209, 213, 219
Text
Three tiers of copy.- Trade Republic BlackText0, 0, 0
- Trade Republic Medium GraySecondary text107, 114, 128
- Trade Republic Muted GrayMuted text156, 163, 175
Semantic
Feedback and state colors.- Trade Republic GreenSuccess0, 229, 153
- Trade Republic YellowWarning255, 214, 0
- Trade Republic RedError255, 59, 48
- Trade Republic BlueInfo37, 99, 235
Use Trade Republic's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
trade-republic-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2563EB;
--error: #FF3B30;
--accent: #00E599;
--border: #D1D5DB;
--primary: #000000;
--success: #00E599;
--surface: #E5E5E5;
--warning: #FFD600;
--secondary: #FFFFFF;
--text-muted: #9CA3AF;
--background: #F5F5F5;
--text-primary: #000000;
--text-secondary: #6B7280;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
19.3:1
Pass
Text on surface
Needs 4.5:1 for body text
16.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.4:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
3.8:1
Fail
Muted text on background
Needs 3:1 for large text
2.3:1
Fail
Muted text on surface
Needs 3:1 for large text
2.0:1
Fail
Trade Republic gray and neutral colors
The quiet part of the Trade Republic palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Trade Republic Light GrayBackground
- HEX
- RGB
- HSL
- Trade Republic Surface GraySurface
- HEX
- RGB
- HSL
- Trade Republic Border GrayBorder
- HEX
- RGB
- HSL
- Trade Republic BlackText
- HEX
- RGB
- HSL
- Trade Republic Medium GraySecondary text
- HEX
- RGB
- HSL
- Trade Republic Muted GrayMuted text
- HEX
- RGB
- HSL
About Trade Republic's colors
Trade Republic's palette relies on stark black and white, with green as an accent for positive actions. The color system is designed for maximum legibility and a modern, trustworthy appearance.
Primary black contrasts with white for clarity.
Green accent highlights actions and status.
Gray tones support structure and hierarchy.
Psychology
Black conveys authority and security, while white adds transparency and simplicity. Green is associated with growth and positive financial outcomes.
Evolution
The palette has remained consistent since launch, focusing on monochrome with a single accent color. Minor adjustments have been made to gray tones for improved accessibility.
Where Trade Republic uses each color
- Primary
Used for the logo, navigation bar, and primary text.
- Secondary
Backgrounds and negative space throughout the app and website.
- Accent
Call-to-action buttons, highlights, and success indicators.
- Backgrounds
Light gray backgrounds on dashboards and forms.
- Text
Black for primary text, gray for secondary and muted information.
- Semantic
Green for success, yellow for warnings, red for errors, blue for informational states.
Trade Republic color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Trade Republic brand color is black, hex code #000000.
Trade Republic Black is #000000, which is RGB(0, 0, 0) and CMYK(0, 0, 0, 100).
Trade Republic uses several gray tones including #F5F5F5 for backgrounds, #E5E5E5 for surfaces, #D1D5DB for borders, #6B7280 for secondary text, and #9CA3AF for muted text.
Use black and white for primary structure, green for accents and positive actions, and gray tones for backgrounds and secondary elements. Apply semantic colors for status indicators only.
The secondary color is Trade Republic White, #FFFFFF, and the accent is Trade Republic Green, #00E599. Together with the primary they make up the three brand colors at the top of this page.
2 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 Trade Republic's colors consistently when it generates UI.
Make something in the spirit of Trade Republic
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.