Tesla color palette
AutomotiveTesla’s color identity is defined by a bold red primary, complemented by a monochromatic palette of blacks, whites, and grays for a modern, high-tech look. The palette is minimal and consistent across digital and physical touchpoints.
tesla.comTesla colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Tesla RedPrimary204, 0, 0
- Tesla CharcoalSecondary34, 34, 34
- Tesla Signal RedAccent232, 33, 39
Surfaces
Page, cards and dividers.- Tesla WhiteBackground255, 255, 255
- Tesla Light GraySurface244, 244, 244
- Tesla Silver GrayBorder208, 209, 210
Text
Three tiers of copy.- Tesla BlackText23, 26, 32
- Tesla Medium GraySecondary text92, 94, 98
- Tesla Muted GrayMuted text163, 166, 170
Semantic
Feedback and state colors.- Tesla GreenSuccess0, 128, 0
- Tesla YellowWarning255, 184, 0
- Tesla Error RedError232, 33, 39
- Tesla BlueInfo0, 113, 206
Use Tesla's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
tesla-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0071CE;
--error: #E82127;
--accent: #E82127;
--border: #D0D1D2;
--primary: #CC0000;
--success: #008000;
--surface: #F4F4F4;
--warning: #FFB800;
--secondary: #222222;
--text-muted: #A3A6AA;
--background: #FFFFFF;
--text-primary: #171A20;
--text-secondary: #5C5E62;
}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
6.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.9:1
Pass
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.2:1
Fail
Tesla background, border and text colors
The quiet part of the Tesla palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Tesla WhiteBackground
- HEX
- RGB
- HSL
- Tesla Light GraySurface
- HEX
- RGB
- HSL
- Tesla Silver GrayBorder
- HEX
- RGB
- HSL
- Tesla BlackText
- HEX
- RGB
- HSL
- Tesla Medium GraySecondary text
- HEX
- RGB
- HSL
- Tesla Muted GrayMuted text
- HEX
- RGB
- HSL
About Tesla's colors
Tesla’s palette uses a dominant red for brand recognition, balanced by a restrained grayscale system for clarity and sophistication. The use of minimal accent colors ensures focus on content and product imagery.
Primary red contrasts with neutral backgrounds.
Grayscale tones unify digital and physical environments.
Accent red is reserved for CTAs and highlights.
Psychology
Red conveys energy, innovation, and urgency, reflecting Tesla’s disruptive ethos. The monochrome neutrals evoke precision, reliability, and a futuristic aesthetic.
Evolution
Tesla’s core palette has remained stable since its early years, with minor adjustments to gray tones for improved UI accessibility. The signature red has consistently been central to its brand identity.
Where Tesla uses each color
- Primary
Tesla Red is used for the logo, key buttons, and primary CTAs.
- Secondary
Tesla Charcoal appears in navigation bars, footers, and overlays.
- Accent
Tesla Signal Red is used for hover states and important notifications.
- Backgrounds
Tesla White and Light Gray are used for page backgrounds and surfaces.
- Text
Tesla Black and Medium Gray are used for primary and secondary text respectively.
- Semantic
Tesla Green, Yellow, and Error Red are used for status indicators and alerts.
Tesla color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Tesla primary color hex code is #CC0000, known as Tesla Red. This is used for the logo and primary actions.
Tesla Red (#CC0000) in RGB is (204, 0, 0) and in CMYK is (0, 100, 100, 20). These values ensure color consistency across media.
Tesla uses Tesla Charcoal (#222222), Tesla Light Gray (#F4F4F4), Tesla Silver Gray (#D0D1D2), and Tesla Medium Gray (#5C5E62) for UI backgrounds and text. These neutrals create a clean, modern interface.
Use Tesla Red (#CC0000) for primary branding and actions, with grays and whites for backgrounds and text. Reserve accent and semantic colors for highlights, alerts, and status indicators.
The secondary color is Tesla Charcoal, #222222, and the accent is Tesla Signal Red, #E82127. 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 Tesla's colors consistently when it generates UI.
Make something in the spirit of Tesla
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.