Revolut color palette
FinanceRevolut's color identity is built around a deep, modern blue-black primary, complemented by vibrant gradients and crisp neutrals for a clean, digital-first finance experience. The palette emphasizes clarity, trust, and a tech-forward aesthetic.
revolut.comRevolut colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Revolut Deep Blue-BlackPrimary25, 28, 31
- Revolut Electric BlueSecondary0, 116, 246
- Revolut Pink AccentAccent255, 42, 104
Surfaces
Page, cards and dividers.- Revolut WhiteBackground255, 255, 255
- Revolut Light SurfaceSurface245, 247, 250
- Revolut Light BorderBorder230, 232, 235
Text
Three tiers of copy.- Revolut Main TextText25, 28, 31
- Revolut Secondary TextSecondary text106, 109, 112
- Revolut Muted TextMuted text161, 164, 168
Semantic
Feedback and state colors.- Revolut Success GreenSuccess0, 200, 151
- Revolut Warning YellowWarning255, 184, 0
- Revolut Error PinkError255, 42, 104
- Revolut Info BlueInfo0, 116, 246
Use Revolut's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
revolut-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0074F6;
--error: #FF2A68;
--accent: #FF2A68;
--border: #E6E8EB;
--primary: #191C1F;
--success: #00C897;
--surface: #F5F7FA;
--warning: #FFB800;
--secondary: #0074F6;
--text-muted: #A1A4A8;
--background: #FFFFFF;
--text-primary: #191C1F;
--text-secondary: #6A6D70;
}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.1:1
Pass
Text on surface
Needs 4.5:1 for body text
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.9:1
Pass
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Revolut background, border and text colors
The quiet part of the Revolut palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Revolut WhiteBackground
- HEX
- RGB
- HSL
- Revolut Light SurfaceSurface
- HEX
- RGB
- HSL
- Revolut Light BorderBorder
- HEX
- RGB
- HSL
- Revolut Main TextText
- HEX
- RGB
- HSL
- Revolut Secondary TextSecondary text
- HEX
- RGB
- HSL
- Revolut Muted TextMuted text
- HEX
- RGB
- HSL
About Revolut's colors
Revolut's palette is anchored by a dark, almost-black blue, contrasted with energetic accent colors and clean neutrals. The system supports both clarity and a sense of innovation in digital finance.
Primary and secondary blues create a trustworthy, modern foundation.
Accent pink provides vibrancy and highlights key actions.
Neutrals and grays ensure readability and a clean UI.
Psychology
The deep blue-black conveys security, professionalism, and reliability, essential for a financial brand. Bright accents add a sense of energy and approachability, balancing the seriousness of the core palette.
Evolution
Revolut's palette has remained consistent since its rebrand, focusing on digital clarity and bold contrasts. The use of gradients and vibrant accents has increased to enhance user engagement and highlight interactive elements.
Where Revolut uses each color
- Primary
Used for navigation bars, logos, and primary call-to-action buttons.
- Secondary
Appears in links, secondary buttons, and highlights within the app UI.
- Accent
Used for notifications, important highlights, and interactive elements such as toggles.
- Backgrounds
White and light surfaces are used for main app backgrounds and card surfaces.
- Text
Primary and secondary text colors are used throughout the app for headings, body text, and muted informational content.
- Semantic
Success, warning, and error colors are used for status indicators, alerts, and feedback messages.
Revolut color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Revolut primary color hex code is #191C1F. This deep blue-black is used for navigation, logos, and key brand elements.
The RGB value for #191C1F is (25, 28, 31). For CMYK, it is approximately (19%, 10%, 0%, 88%).
Yes, Revolut uses a range of grays such as #6A6D70 for secondary text and #A1A4A8 for muted text, as well as #F5F7FA for surfaces and #E6E8EB for borders.
Use #191C1F for primary navigation and branding, #0074F6 for secondary actions, and #FF2A68 for accents and alerts. Neutrals and semantic colors should support readability and clear status communication.
The secondary color is Revolut Electric Blue, #0074F6, and the accent is Revolut Pink Accent, #FF2A68. 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 Revolut's colors consistently when it generates UI.
Make something in the spirit of Revolut
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.