Chelsea color palette
SportsChelsea FC’s brand identity is defined by its iconic royal blue, complemented by white and gold accents. The color palette is consistent across digital, print, and kit applications, reflecting the club’s heritage and prestige.
chelseafc.comChelsea colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Chelsea Royal BluePrimary3, 70, 148
- Chelsea WhiteSecondary255, 255, 255
- Chelsea GoldAccent253, 185, 19
Surfaces
Page, cards and dividers.- Chelsea Light GrayBackground245, 245, 245
- Chelsea Surface GraySurface225, 225, 225
- Chelsea Border GrayBorder196, 196, 196
Text
Three tiers of copy.- Chelsea BlackText26, 26, 26
- Chelsea Dark GraySecondary text77, 77, 77
- Chelsea Muted GrayMuted text140, 140, 140
Semantic
Feedback and state colors.- Chelsea Success GreenSuccess0, 130, 59
- Chelsea Warning YellowWarning255, 184, 28
- Chelsea Error RedError208, 0, 39
- Chelsea Info BlueInfo0, 151, 216
Use Chelsea's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
chelsea-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0097D8;
--error: #D00027;
--accent: #FDB913;
--border: #C4C4C4;
--primary: #034694;
--success: #00823B;
--surface: #E1E1E1;
--warning: #FFB81C;
--secondary: #FFFFFF;
--text-muted: #8C8C8C;
--background: #F5F5F5;
--text-primary: #1A1A1A;
--text-secondary: #4D4D4D;
}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.0:1
Pass
Text on surface
Needs 4.5:1 for body text
13.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.5:1
Pass
Muted text on background
Needs 3:1 for large text
3.1:1
Pass
Muted text on surface
Needs 3:1 for large text
2.6:1
Fail
Chelsea gray and neutral colors
The quiet part of the Chelsea palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Chelsea Light GrayBackground
- HEX
- RGB
- HSL
- Chelsea Surface GraySurface
- HEX
- RGB
- HSL
- Chelsea Border GrayBorder
- HEX
- RGB
- HSL
- Chelsea BlackText
- HEX
- RGB
- HSL
- Chelsea Dark GraySecondary text
- HEX
- RGB
- HSL
- Chelsea Muted GrayMuted text
- HEX
- RGB
- HSL
About Chelsea's colors
Chelsea’s palette centers on a bold royal blue, symbolizing loyalty and tradition, balanced by white and gold for clarity and prestige. The supporting grays and accent colors ensure accessibility and visual hierarchy.
Royal blue and white create strong contrast for readability.
Gold accent highlights important elements and honors club heritage.
Neutral grays provide structure and balance.
Psychology
Blue conveys trust, confidence, and stability, aligning with Chelsea’s values. Gold adds a sense of achievement and excellence.
Evolution
Chelsea’s blue has remained consistent for decades, reinforcing brand recognition. Minor adjustments to accent and neutral tones have modernized the palette for digital use.
Where Chelsea uses each color
- Primary
Chelsea Royal Blue is used on home kits, website headers, and key branding elements.
- Secondary
Chelsea White appears on away kits, backgrounds, and text for contrast.
- Accent
Chelsea Gold is used in the club crest, trophy graphics, and select merchandise.
- Backgrounds
Chelsea Light Gray is used for website and app backgrounds to maintain a clean look.
- Text
Chelsea Black and Dark Gray are used for primary and secondary text across digital and print.
- Semantic
Success, warning, and error colors are used in digital interfaces for alerts and notifications.
Chelsea color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Chelsea brand color is Chelsea Royal Blue, hex code #034694.
Chelsea Royal Blue is RGB(3, 70, 148) and CMYK(98, 53, 0, 42).
Chelsea uses Light Gray (#F5F5F5), Surface Gray (#E1E1E1), and Border Gray (#C4C4C4) for backgrounds, surfaces, and UI borders.
Use Chelsea Royal Blue (#034694) for primary branding, white (#FFFFFF) for contrast, and gold (#FDB913) for accents. Grays and semantic colors support UI clarity and accessibility.
The secondary color is Chelsea White, #FFFFFF, and the accent is Chelsea Gold, #FDB913. Together with the primary they make up the three brand colors at the top of this page.
5 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 Chelsea's colors consistently when it generates UI.
Make something in the spirit of Chelsea
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.