Manchester City color palette
SportsManchester City's color identity centers on its iconic sky blue, complemented by navy, white, and silver tones. The palette reflects the club's heritage and is consistently used across digital, merchandise, and kit designs.
mancity.comManchester City colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- City Sky BluePrimary108, 171, 221
- City NavySecondary28, 44, 91
- City WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- City Light GreyBackground246, 246, 246
- City SilverSurface229, 230, 231
- City Border GreyBorder176, 183, 188
Text
Three tiers of copy.- City Navy TextText28, 44, 91
- City Sky Blue TextSecondary text108, 171, 221
- City Muted GreyMuted text122, 134, 154
Semantic
Feedback and state colors.- City Success GreenSuccess123, 182, 97
- City Warning YellowWarning245, 196, 81
- City Error RedError214, 69, 80
- City Info BlueInfo75, 163, 199
Use Manchester City's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
manchester-city-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4BA3C7;
--error: #D64550;
--accent: #FFFFFF;
--border: #B0B7BC;
--primary: #6CABDD;
--success: #7BB661;
--surface: #E5E6E7;
--warning: #F5C451;
--secondary: #1C2C5B;
--text-muted: #7A869A;
--background: #F6F6F6;
--text-primary: #1C2C5B;
--text-secondary: #6CABDD;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
12.5:1
Pass
Text on surface
Needs 4.5:1 for body text
10.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
2.3:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
2.0:1
Fail
Muted text on background
Needs 3:1 for large text
3.4:1
Pass
Muted text on surface
Needs 3:1 for large text
2.9:1
Fail
Manchester City background, border and text colors
The quiet part of the Manchester City palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- City Light GreyBackground
- HEX
- RGB
- HSL
- City SilverSurface
- HEX
- RGB
- HSL
- City Border GreyBorder
- HEX
- RGB
- HSL
- City Navy TextText
- HEX
- RGB
- HSL
- City Sky Blue TextSecondary text
- HEX
- RGB
- HSL
- City Muted GreyMuted text
- HEX
- RGB
- HSL
About Manchester City's colors
Manchester City's palette is dominated by a distinctive sky blue, paired with navy and white for contrast and clarity. The colors are chosen for high visibility and strong brand recognition.
Sky blue and navy create a classic light/dark contrast.
White and silver provide neutral balance.
Accent colors are used for clarity and emphasis.
Psychology
Sky blue conveys calm, trust, and approachability, while navy adds authority and tradition. The palette is designed to evoke pride and unity among fans.
Evolution
The core sky blue has remained Manchester City's signature since the club's early years. Minor adjustments to supporting tones have modernized the palette, but the primary color has been stable.
Where Manchester City uses each color
- Primary
City Sky Blue is used on home kits, the website header, and key branding elements.
- Secondary
City Navy appears on away kits, navigation bars, and as a text color.
- Accent
City White is used for text, logos, and as a contrasting background.
- Backgrounds
City Light Grey is used for website backgrounds and digital surfaces.
- Text
City Navy Text is the main color for headlines and body copy, with City Sky Blue and Muted Grey for secondary and muted text.
- Semantic
Success, warning, and error colors are used in digital UI for notifications and status indicators.
Manchester City color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Manchester City brand color is City Sky Blue, hex code #6CABDD.
City Sky Blue (#6CABDD) is RGB(108, 171, 221) and CMYK(51, 23, 0, 13).
Manchester City uses City Light Grey (#F6F6F6), City Silver (#E5E6E7), and City Border Grey (#B0B7BC) as its primary neutrals.
Use City Sky Blue (#6CABDD) for primary branding, City Navy (#1C2C5B) for secondary and text, and City White (#FFFFFF) for backgrounds and accents. Supporting colors should be used for UI elements and notifications.
The secondary color is City Navy, #1C2C5B, and the accent is City White, #FFFFFF. Together with the primary they make up the three brand colors at the top of this page.
3 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 Manchester City's colors consistently when it generates UI.
Make something in the spirit of Manchester City
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.