Starling Bank color palette
FinanceStarling Bank's color identity centers on a distinctive purple, complemented by soft neutrals and subtle accent tones for a modern, digital-first banking experience. The palette is designed for clarity, accessibility, and a sense of trust.
starlingbank.comStarling Bank colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Starling PurplePrimary105, 53, 211
- Starling TealSecondary0, 199, 177
- Starling GoldAccent255, 184, 0
Surfaces
Page, cards and dividers.- Starling Light GreyBackground247, 248, 250
- Starling WhiteSurface255, 255, 255
- Starling Border GreyBorder229, 231, 235
Text
Three tiers of copy.- Starling BlackText26, 26, 26
- Starling SlateSecondary text107, 114, 128
- Starling Muted GreyMuted text160, 174, 192
Semantic
Feedback and state colors.- Starling Success TealSuccess0, 199, 177
- Starling Warning GoldWarning255, 184, 0
- Starling Error RedError229, 72, 77
- Starling Info PurpleInfo105, 53, 211
Use Starling Bank's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
starling-bank-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #6935D3;
--error: #E5484D;
--accent: #FFB800;
--border: #E5E7EB;
--primary: #6935D3;
--success: #00C7B1;
--surface: #FFFFFF;
--warning: #FFB800;
--secondary: #00C7B1;
--text-muted: #A0AEC0;
--background: #F7F8FA;
--text-primary: #1A1A1A;
--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
16.4:1
Pass
Text on surface
Needs 4.5:1 for body text
17.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.8:1
Pass
Muted text on background
Needs 3:1 for large text
2.1:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
Starling Bank background, border and text colors
The quiet part of the Starling Bank palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Starling Light GreyBackground
- HEX
- RGB
- HSL
- Starling WhiteSurface
- HEX
- RGB
- HSL
- Starling Border GreyBorder
- HEX
- RGB
- HSL
- Starling BlackText
- HEX
- RGB
- HSL
- Starling SlateSecondary text
- HEX
- RGB
- HSL
- Starling Muted GreyMuted text
- HEX
- RGB
- HSL
About Starling Bank's colors
Starling Bank's palette uses a bold purple as its anchor, paired with teal and gold for accent and semantic roles. The supporting greys and whites ensure clarity and accessibility across digital platforms.
Primary purple contrasts with teal for visual hierarchy.
Gold accent highlights important actions or notifications.
Neutral greys provide balance and readability.
Psychology
Purple conveys creativity, trust, and a modern approach to finance, while teal adds a sense of calm and innovation. The palette is designed to feel approachable yet professional.
Evolution
Starling's core purple and teal colors have remained stable since launch, reinforcing brand recognition. Minor adjustments to neutral tones have improved accessibility and digital clarity over time.
Where Starling Bank uses each color
- Primary
Used for app navigation bars, key buttons, and highlights in digital interfaces.
- Secondary
Appears in icons, secondary buttons, and illustrations throughout the app and website.
- Accent
Used for notifications, highlights, and promotional banners.
- Backgrounds
Light grey and white backgrounds are used for app screens and web pages to ensure readability.
- Text
Primary black and secondary slate are used for body text and headings, with muted grey for less prominent information.
- Semantic
Teal indicates success, gold for warnings, and red for errors in UI feedback and status indicators.
Starling Bank color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Starling Bank primary color is #6935D3, known as Starling Purple.
Starling Purple (#6935D3) is RGB(105, 53, 211) and CMYK(50, 75, 0, 17).
Starling Bank uses #F7F8FA (Starling Light Grey), #E5E7EB (Starling Border Grey), #6B7280 (Starling Slate), and #A0AEC0 (Starling Muted Grey) for backgrounds and UI elements.
Use Starling Purple (#6935D3) for primary actions and navigation, with teal and gold for accents and semantic feedback. Neutrals support readability and should be used for backgrounds and surfaces.
The secondary color is Starling Teal, #00C7B1, and the accent is Starling Gold, #FFB800. 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 Starling Bank's colors consistently when it generates UI.
Make something in the spirit of Starling Bank
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.