SEAT color palette
AutomotiveSEAT's color identity is defined by a bold, dark primary shade paired with neutral grays and vibrant accent red, reflecting the brand's modern and dynamic automotive image. The palette is used consistently across digital and physical touchpoints to convey sophistication and energy.
seat.comSEAT colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- SEAT GraphitePrimary51, 48, 46
- SEAT RedSecondary227, 6, 19
- SEAT WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- SEAT Light GrayBackground245, 245, 245
- SEAT Surface GraySurface237, 237, 237
- SEAT Border GrayBorder189, 189, 189
Text
Three tiers of copy.- SEAT Graphite TextText51, 48, 46
- SEAT Medium Gray TextSecondary text102, 102, 102
- SEAT Muted Gray TextMuted text163, 163, 163
Semantic
Feedback and state colors.- SEAT Success GreenSuccess75, 181, 67
- SEAT Warning YellowWarning255, 180, 0
- SEAT Error RedError227, 6, 19
- SEAT Info BlueInfo0, 114, 206
Use SEAT's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
seat-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #E30613;
--accent: #FFFFFF;
--border: #BDBDBD;
--primary: #33302E;
--success: #4BB543;
--surface: #EDEDED;
--warning: #FFB400;
--secondary: #E30613;
--text-muted: #A3A3A3;
--background: #F5F5F5;
--text-primary: #33302E;
--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
12.0:1
Pass
Text on surface
Needs 4.5:1 for body text
11.2:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.9:1
Pass
Muted text on background
Needs 3:1 for large text
2.3:1
Fail
Muted text on surface
Needs 3:1 for large text
2.2:1
Fail
SEAT gray and neutral colors
The quiet part of the SEAT palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- SEAT Light GrayBackground
- HEX
- RGB
- HSL
- SEAT Surface GraySurface
- HEX
- RGB
- HSL
- SEAT Border GrayBorder
- HEX
- RGB
- HSL
- SEAT Graphite TextText
- HEX
- RGB
- HSL
- SEAT Medium Gray TextSecondary text
- HEX
- RGB
- HSL
- SEAT Muted Gray TextMuted text
- HEX
- RGB
- HSL
About SEAT's colors
SEAT's palette is anchored by a deep graphite primary, contrasted with a vivid red and clean neutrals for clarity and energy. The color system is designed for high legibility and a modern, technical feel.
Primary graphite pairs with red for strong visual hierarchy.
Neutral grays support backgrounds and surfaces.
Accent white ensures clarity and contrast.
Psychology
The graphite primary conveys solidity and reliability, while the red accent adds dynamism and excitement. The use of clean neutrals supports a sense of modernity and approachability.
Evolution
SEAT's color palette has remained largely stable, with the graphite and red combination being a longstanding hallmark. Recent updates have refined the neutral tones for improved digital accessibility.
Where SEAT uses each color
- Primary
SEAT Graphite is used for the logo, main navigation backgrounds, and key brand elements.
- Secondary
SEAT Red appears in call-to-action buttons, highlights, and promotional graphics.
- Accent
SEAT White is used for text on dark backgrounds and as a contrasting element in UI components.
- Backgrounds
SEAT Light Gray and Surface Gray are used for website backgrounds and content areas.
- Text
Graphite and Medium Gray are used for primary and secondary text across digital and print materials.
- Semantic
Success, warning, error, and info colors are used in notifications, status indicators, and forms.
SEAT color questions
Hex codes, RGB values, neutrals and how to use the palette.
The SEAT primary color hex code is #33302E, known as SEAT Graphite. This color is used for the logo and main brand elements.
SEAT Graphite (#33302E) is RGB(51, 48, 46) and CMYK(0, 6, 10, 80). Always use the hex code for digital applications.
SEAT uses SEAT Light Gray (#F5F5F5), Surface Gray (#EDEDED), and Border Gray (#BDBDBD) for backgrounds, surfaces, and dividers. These ensure a clean and modern interface.
Use SEAT Graphite (#33302E) for primary navigation and branding, SEAT Red (#E30613) for calls to action, and neutrals for backgrounds. Accent white (#FFFFFF) is reserved for text and highlights on dark elements.
The secondary color is SEAT Red, #E30613, and the accent is SEAT White, #FFFFFF. 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 SEAT's colors consistently when it generates UI.
Make something in the spirit of SEAT
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.