Hot Wheels color palette
ConsumerHot Wheels uses a bold, energetic color palette centered on vibrant blue and orange, reflecting its dynamic and youthful brand identity. The colors are instantly recognizable and are used consistently across packaging, digital, and promotional materials.
hotwheels.mattel.comHot Wheels colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Hot Wheels BluePrimary0, 87, 184
- Hot Wheels YellowSecondary255, 183, 0
- Hot Wheels OrangeAccent255, 60, 0
Surfaces
Page, cards and dividers.- Hot Wheels WhiteBackground255, 255, 255
- Hot Wheels Light GraySurface244, 244, 244
- Hot Wheels Silver GrayBorder209, 211, 212
Text
Three tiers of copy.- Hot Wheels BlackText26, 26, 26
- Hot Wheels CharcoalSecondary text74, 74, 74
- Hot Wheels GrayMuted text117, 117, 117
Semantic
Feedback and state colors.- Hot Wheels GreenSuccess67, 176, 42
- Hot Wheels YellowWarning255, 183, 0
- Hot Wheels RedError215, 38, 61
- Hot Wheels Info BlueInfo0, 156, 222
Use Hot Wheels's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
hot-wheels-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009CDE;
--error: #D7263D;
--accent: #FF3C00;
--border: #D1D3D4;
--primary: #0057B8;
--success: #43B02A;
--surface: #F4F4F4;
--warning: #FFB700;
--secondary: #FFB700;
--text-muted: #757575;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #4A4A4A;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.4:1
Pass
Text on surface
Needs 4.5:1 for body text
15.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.9:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
8.1:1
Pass
Muted text on background
Needs 3:1 for large text
4.6:1
Pass
Muted text on surface
Needs 3:1 for large text
4.2:1
Pass
Hot Wheels gray and neutral colors
The quiet part of the Hot Wheels palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Hot Wheels WhiteBackground
- HEX
- RGB
- HSL
- Hot Wheels Light GraySurface
- HEX
- RGB
- HSL
- Hot Wheels Silver GrayBorder
- HEX
- RGB
- HSL
- Hot Wheels BlackText
- HEX
- RGB
- HSL
- Hot Wheels CharcoalSecondary text
- HEX
- RGB
- HSL
- Hot Wheels GrayMuted text
- HEX
- RGB
- HSL
About Hot Wheels's colors
Hot Wheels' color palette is built around high-contrast, energetic hues that evoke excitement and speed. The primary blue and accent orange create a dynamic visual identity that appeals to children and collectors alike.
Blue and orange are complementary, creating strong visual impact.
Yellow is used for highlights and energy.
Neutral grays and black provide balance and readability.
Psychology
Blue conveys trust, reliability, and excitement, while orange and yellow add energy and playfulness. The palette is designed to stimulate and engage, fitting the brand's adventurous spirit.
Evolution
The core palette has remained stable since the brand's inception, with blue and orange dominating. Minor adjustments have been made to the supporting grays and accent colors for digital clarity.
Where Hot Wheels uses each color
- Primary
Hot Wheels Blue is used for the logo background, web navigation bars, and key packaging elements.
- Secondary
Hot Wheels Yellow highlights call-to-action buttons and accent graphics.
- Accent
Hot Wheels Orange is featured in the logo flame, product details, and promotional banners.
- Backgrounds
White and light gray backgrounds are used throughout digital and print materials for clarity.
- Text
Black and charcoal are used for primary and secondary text, ensuring strong contrast and readability.
- Semantic
Green, yellow, and red are used for status indicators, notifications, and error messages in digital interfaces.
Hot Wheels color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Hot Wheels primary brand color is #0057B8, known as Hot Wheels Blue.
Hot Wheels Blue (#0057B8) in RGB is (0, 87, 184) and in CMYK is (100, 53, 0, 28).
Hot Wheels uses #F4F4F4 (Light Gray) for surfaces and #D1D3D4 (Silver Gray) for borders and dividers.
Use Hot Wheels Blue (#0057B8) for primary branding, with Orange (#FF3C00) and Yellow (#FFB700) as accents; neutrals support readability and layout structure.
The secondary color is Hot Wheels Yellow, #FFB700, and the accent is Hot Wheels Orange, #FF3C00. 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 Hot Wheels's colors consistently when it generates UI.
Make something in the spirit of Hot Wheels
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.