Olympics color palette
SportsThe Olympics brand color system is built around the iconic Olympic Blue, complemented by the other four ring colors and a neutral palette for digital and print applications. The palette is globally recognized and symbolizes unity, diversity, and excellence.
olympics.comOlympics colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Olympic BluePrimary0, 129, 200
- Olympic YellowSecondary255, 209, 0
- Olympic GreenAccent0, 166, 81
Surfaces
Page, cards and dividers.- Olympic WhiteBackground255, 255, 255
- Olympic Light GraySurface246, 246, 246
- Olympic Silver GrayBorder209, 211, 212
Text
Three tiers of copy.- Olympic CharcoalText34, 34, 34
- Olympic Medium GraySecondary text85, 85, 85
- Olympic Muted GrayMuted text136, 136, 136
Semantic
Feedback and state colors.- Olympic GreenSuccess0, 166, 81
- Olympic YellowWarning255, 209, 0
- Olympic RedError238, 51, 78
- Olympic BlueInfo0, 129, 200
Use Olympics's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
olympics-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0081C8;
--error: #EE334E;
--accent: #00A651;
--border: #D1D3D4;
--primary: #0081C8;
--success: #00A651;
--surface: #F6F6F6;
--warning: #FFD100;
--secondary: #FFD100;
--text-muted: #888888;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #555555;
}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.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.9:1
Pass
Muted text on background
Needs 3:1 for large text
3.5:1
Pass
Muted text on surface
Needs 3:1 for large text
3.3:1
Pass
Olympics gray and neutral colors
The quiet part of the Olympics palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Olympic WhiteBackground
- HEX
- RGB
- HSL
- Olympic Light GraySurface
- HEX
- RGB
- HSL
- Olympic Silver GrayBorder
- HEX
- RGB
- HSL
- Olympic CharcoalText
- HEX
- RGB
- HSL
- Olympic Medium GraySecondary text
- HEX
- RGB
- HSL
- Olympic Muted GrayMuted text
- HEX
- RGB
- HSL
About Olympics's colors
The Olympics color palette is derived from the five interlocking rings, each representing a continent and symbolizing unity. The palette is vibrant, primary, and instantly recognizable worldwide.
Primary blue is balanced by yellow, black, green, and red.
Neutral grays and white provide clarity and contrast for digital use.
Colors are never used in gradients; each stands alone for clarity.
Psychology
The Olympic colors evoke feelings of unity, diversity, and global connection. Blue and green convey trust and growth, while red and yellow add energy and optimism.
Evolution
The palette has remained largely unchanged since its introduction in 1913, maintaining the original ring colors. Recent updates have added neutral grays for digital clarity and accessibility.
Where Olympics uses each color
- Primary
Olympic Blue is used in the logo, navigation bars, and key call-to-action buttons.
- Secondary
Olympic Yellow appears in highlights, banners, and event signage.
- Accent
Olympic Green is used for success messages and secondary highlights.
- Backgrounds
Olympic White and Light Gray are used for page backgrounds and content areas.
- Text
Olympic Charcoal and Medium Gray are used for primary and secondary text across digital and print materials.
- Semantic
Olympic Red is reserved for error states and urgent alerts, while Olympic Green and Yellow indicate success and warnings.
Olympics color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Olympics brand color is Olympic Blue, with the hex code #0081C8.
Olympic Blue is RGB(0, 129, 200) and CMYK(100, 35, 0, 22). The hex code is #0081C8.
Olympics uses Olympic Light Gray (#F6F6F6), Olympic Silver Gray (#D1D3D4), and Olympic Charcoal (#222222) for backgrounds, borders, and text.
Always use the official hex codes for each color role, and do not create gradients or tints. The five ring colors should never overlap or blend, and neutrals support digital clarity.
The secondary color is Olympic Yellow, #FFD100, and the accent is Olympic Green, #00A651. Together with the primary they make up the three brand colors at the top of this page.
6 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 Olympics's colors consistently when it generates UI.
Make something in the spirit of Olympics
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.