Citymapper color palette
TravelCitymapper's color identity is defined by its distinctive green, paired with dark and neutral tones for clarity and accessibility. The palette is simple and functional, supporting wayfinding and digital navigation.
citymapper.comCitymapper colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Citymapper GreenPrimary42, 203, 75
- Citymapper BlackSecondary26, 26, 26
- Citymapper YellowAccent255, 214, 0
Surfaces
Page, cards and dividers.- Citymapper WhiteBackground255, 255, 255
- Citymapper Light GraySurface245, 245, 245
- Citymapper Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Citymapper Primary TextText34, 34, 34
- Citymapper Secondary TextSecondary text102, 102, 102
- Citymapper Muted TextMuted text160, 160, 160
Semantic
Feedback and state colors.- Citymapper Success GreenSuccess42, 203, 75
- Citymapper Warning YellowWarning255, 214, 0
- Citymapper Error RedError229, 57, 53
- Citymapper Info BlueInfo33, 150, 243
Use Citymapper's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
citymapper-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2196F3;
--error: #E53935;
--accent: #FFD600;
--border: #E0E0E0;
--primary: #2ACB4B;
--success: #2ACB4B;
--surface: #F5F5F5;
--warning: #FFD600;
--secondary: #1A1A1A;
--text-muted: #A0A0A0;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #666666;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.3:1
Pass
Muted text on background
Needs 3:1 for large text
2.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Citymapper gray and neutral colors
The quiet part of the Citymapper palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Citymapper WhiteBackground
- HEX
- RGB
- HSL
- Citymapper Light GraySurface
- HEX
- RGB
- HSL
- Citymapper Border GrayBorder
- HEX
- RGB
- HSL
- Citymapper Primary TextText
- HEX
- RGB
- HSL
- Citymapper Secondary TextSecondary text
- HEX
- RGB
- HSL
- Citymapper Muted TextMuted text
- HEX
- RGB
- HSL
About Citymapper's colors
Citymapper's palette is built around a vibrant green for instant recognition and wayfinding clarity. The supporting neutrals ensure high contrast and accessibility across digital interfaces.
Primary green contrasts with black and white for strong legibility.
Accent yellow is used for highlights and alerts.
Neutral grays support backgrounds and UI elements.
Psychology
Green conveys movement, safety, and environmental friendliness, aligning with Citymapper's urban mobility mission. The palette feels modern and accessible, supporting trust and ease of use.
Evolution
Citymapper's green has remained consistent since launch, with minor adjustments for digital clarity. The supporting neutrals have become more refined to improve accessibility and contrast.
Where Citymapper uses each color
- Primary
Citymapper Green is used for the app logo, navigation bars, and primary action buttons.
- Secondary
Citymapper Black appears in headers, footers, and key navigation elements.
- Accent
Citymapper Yellow is used for notifications, highlights, and warning states.
- Backgrounds
White and light gray backgrounds are used throughout app screens and the website for clarity.
- Text
Primary and secondary text colors are used for all UI copy, ensuring readability.
- Semantic
Success, warning, error, and info colors are used for alerts, messages, and status indicators.
Citymapper color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Citymapper brand color is #2ACB4B, known as Citymapper Green.
Citymapper Green (#2ACB4B) in RGB is (42, 203, 75). For CMYK, it is approximately (79, 0, 63, 20).
Citymapper uses #1A1A1A (Citymapper Black) for dark UI elements and #F5F5F5 (Citymapper Light Gray) for backgrounds and surfaces.
Use Citymapper Green (#2ACB4B) for primary actions and branding, with neutrals for backgrounds and text. Accent and semantic colors should be reserved for notifications, alerts, and status indicators.
The secondary color is Citymapper Black, #1A1A1A, and the accent is Citymapper Yellow, #FFD600. 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 Citymapper's colors consistently when it generates UI.
Make something in the spirit of Citymapper
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.