NASCAR color palette
SportsNASCAR's color identity is defined by its iconic red, yellow, and blue stripes, paired with bold black and white for high-contrast visibility. The palette reflects speed, energy, and American motorsport heritage.
nascar.comNASCAR colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- NASCAR RedPrimary255, 0, 40
- NASCAR YellowSecondary255, 210, 0
- NASCAR BlueAccent0, 102, 179
Surfaces
Page, cards and dividers.- NASCAR WhiteBackground255, 255, 255
- NASCAR Light GraySurface245, 245, 245
- NASCAR Border GrayBorder217, 217, 217
Text
Three tiers of copy.- NASCAR BlackText34, 34, 34
- NASCAR Dark GraySecondary text102, 102, 102
- NASCAR Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- NASCAR GreenSuccess67, 176, 42
- NASCAR YellowWarning255, 210, 0
- NASCAR RedError255, 0, 40
- NASCAR BlueInfo0, 102, 179
Use NASCAR's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
nascar-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0066B3;
--error: #FF0028;
--accent: #0066B3;
--border: #D9D9D9;
--primary: #FF0028;
--success: #43B02A;
--surface: #F5F5F5;
--warning: #FFD200;
--secondary: #FFD200;
--text-muted: #999999;
--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.8:1
Fail
Muted text on surface
Needs 3:1 for large text
2.6:1
Fail
NASCAR gray and neutral colors
The quiet part of the NASCAR palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- NASCAR WhiteBackground
- HEX
- RGB
- HSL
- NASCAR Light GraySurface
- HEX
- RGB
- HSL
- NASCAR Border GrayBorder
- HEX
- RGB
- HSL
- NASCAR BlackText
- HEX
- RGB
- HSL
- NASCAR Dark GraySecondary text
- HEX
- RGB
- HSL
- NASCAR Muted GrayMuted text
- HEX
- RGB
- HSL
About NASCAR's colors
NASCAR's palette uses primary colors for instant recognition and high contrast, supporting energetic and dynamic visuals. The use of black and white grounds the palette and ensures legibility.
Red, yellow, and blue are used together in the logo stripes.
White and black provide contrast for text and backgrounds.
Accent colors reinforce hierarchy and call-to-action elements.
Psychology
Red conveys excitement and action, yellow signals energy and optimism, and blue adds trust and reliability. The combination is designed to evoke speed and competitive spirit.
Evolution
NASCAR's core palette has remained consistent for decades, with minor adjustments to tone and usage for digital clarity. The supporting grays and neutrals have become more prominent in recent digital applications.
Where NASCAR uses each color
- Primary
NASCAR Red appears in the logo, key buttons, and promotional banners.
- Secondary
NASCAR Yellow is used in logo stripes, highlights, and warning states.
- Accent
NASCAR Blue serves as a supporting color in the logo and for informational elements.
- Backgrounds
NASCAR White and Light Gray are used for page backgrounds and content areas.
- Text
NASCAR Black and Dark Gray are used for primary and secondary text throughout the website and apps.
- Semantic
Green, yellow, and red are used for status indicators such as success, warning, and error messages.
NASCAR color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary NASCAR brand color is NASCAR Red, with the hex code #FF0028.
NASCAR Red is #FF0028, which is RGB(255, 0, 40). In CMYK, it is approximately (0, 100, 84, 0).
NASCAR uses Light Gray (#F5F5F5), Border Gray (#D9D9D9), Dark Gray (#666666), and Muted Gray (#999999) for backgrounds, borders, and muted text.
Use NASCAR Red (#FF0028) for primary actions and branding, with Yellow (#FFD200) and Blue (#0066B3) as accents. Neutrals and grays provide structure and legibility in UI backgrounds and text.
The secondary color is NASCAR Yellow, #FFD200, and the accent is NASCAR Blue, #0066B3. 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 NASCAR's colors consistently when it generates UI.
Make something in the spirit of NASCAR
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.