Formula 1 color palette
SportsFormula 1's color identity is defined by its bold use of F1 Red, paired with black, white, and neutral grays for a modern, high-contrast look. The palette reflects speed, excitement, and precision, consistent across digital and physical touchpoints.
formula1.comFormula 1 colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- F1 RedPrimary255, 24, 1
- F1 BlackSecondary0, 0, 0
- F1 WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- F1 Light GrayBackground247, 247, 247
- F1 Dark SurfaceSurface30, 30, 30
- F1 Border GrayBorder217, 217, 217
Text
Three tiers of copy.- F1 Text BlackText0, 0, 0
- F1 Text GraySecondary text102, 102, 102
- F1 Muted GrayMuted text163, 163, 163
Semantic
Feedback and state colors.- F1 Success GreenSuccess0, 176, 80
- F1 Warning YellowWarning255, 192, 0
- F1 Error RedError255, 24, 1
- F1 Info BlueInfo0, 113, 206
Use Formula 1's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
formula-1-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0071CE;
--error: #FF1801;
--accent: #FFFFFF;
--border: #D9D9D9;
--primary: #FF1801;
--success: #00B050;
--surface: #1E1E1E;
--warning: #FFC000;
--secondary: #000000;
--text-muted: #A3A3A3;
--background: #F7F7F7;
--text-primary: #000000;
--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
19.6:1
Pass
Text on surface
Needs 4.5:1 for body text
1.3:1
Fail
Secondary text on background
Needs 4.5:1 for body text
5.4:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
2.9:1
Fail
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
6.6:1
Pass
Formula 1 gray and neutral colors
The quiet part of the Formula 1 palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- F1 Light GrayBackground
- HEX
- RGB
- HSL
- F1 Dark SurfaceSurface
- HEX
- RGB
- HSL
- F1 Border GrayBorder
- HEX
- RGB
- HSL
- F1 Text BlackText
- HEX
- RGB
- HSL
- F1 Text GraySecondary text
- HEX
- RGB
- HSL
- F1 Muted GrayMuted text
- HEX
- RGB
- HSL
About Formula 1's colors
Formula 1's palette is built on high-contrast red, black, and white, evoking energy and clarity. Neutral grays provide balance and support for digital interfaces.
Red and black create a dynamic, aggressive contrast.
White and gray tones offer visual relief and hierarchy.
Accent colors are used sparingly for clarity and emphasis.
Psychology
F1 Red communicates excitement, urgency, and passion, aligning with the sport's high-speed nature. Black and white convey professionalism and modernity.
Evolution
The core F1 Red and Black have remained consistent since the 2018 rebrand, reinforcing brand recognition. Minor adjustments to gray tones have improved digital accessibility and UI clarity.
Where Formula 1 uses each color
- Primary
F1 Red is used for the logo, primary buttons, and key highlights across digital and print assets.
- Secondary
F1 Black appears in navigation bars, backgrounds, and as a dominant color in broadcast graphics.
- Accent
F1 White is used for text, backgrounds, and to provide contrast in layouts.
- Backgrounds
F1 Light Gray is the default background for web pages and app screens.
- Text
F1 Text Black and F1 Text Gray are used for body copy, headlines, and UI labels.
- Semantic
F1 Success Green, Warning Yellow, Error Red, and Info Blue are used for alerts, notifications, and status indicators.
Formula 1 color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Formula 1 brand color is F1 Red, with the hex code #FF1801.
F1 Red is RGB(255, 24, 1) and CMYK(0, 91, 99, 0). The hex code is #FF1801.
Formula 1 uses F1 Light Gray (#F7F7F7), F1 Border Gray (#D9D9D9), and F1 Muted Gray (#A3A3A3) for backgrounds, borders, and muted text.
Use F1 Red for primary actions and highlights, with black and white for structure and contrast. Grays support readability and hierarchy in digital interfaces.
The secondary color is F1 Black, #000000, and the accent is F1 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 Formula 1's colors consistently when it generates UI.
Make something in the spirit of Formula 1
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.