Shell color palette
AutomotiveShell's color identity is defined by its iconic yellow and red, reflecting energy and visibility. The palette is bold, instantly recognizable, and consistent across all brand touchpoints.
shell.comShell colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Shell YellowPrimary255, 213, 0
- Shell RedSecondary237, 28, 36
- Shell Light YellowAccent255, 237, 0
Surfaces
Page, cards and dividers.- Shell WhiteBackground255, 255, 255
- Shell Light GraySurface245, 245, 245
- Shell Gray BorderBorder209, 211, 212
Text
Three tiers of copy.- Shell BlackText34, 34, 34
- Shell Dark GraySecondary text102, 102, 102
- Shell Muted GrayMuted text167, 169, 172
Semantic
Feedback and state colors.- Shell GreenSuccess67, 176, 42
- Shell Warning YellowWarning255, 184, 28
- Shell Error RedError210, 38, 48
- Shell BlueInfo0, 114, 206
Use Shell's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
shell-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #D22630;
--accent: #FFED00;
--border: #D1D3D4;
--primary: #FFD500;
--success: #43B02A;
--surface: #F5F5F5;
--warning: #FFB81C;
--secondary: #ED1C24;
--text-muted: #A7A9AC;
--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.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.2:1
Fail
Shell gray and neutral colors
The quiet part of the Shell palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Shell WhiteBackground
- HEX
- RGB
- HSL
- Shell Light GraySurface
- HEX
- RGB
- HSL
- Shell Gray BorderBorder
- HEX
- RGB
- HSL
- Shell BlackText
- HEX
- RGB
- HSL
- Shell Dark GraySecondary text
- HEX
- RGB
- HSL
- Shell Muted GrayMuted text
- HEX
- RGB
- HSL
About Shell's colors
Shell's palette is based on high-contrast, warm hues to maximize visibility and brand recall. The combination of yellow and red is distinctive and energetic.
Primary yellow and secondary red are complementary and used together for brand recognition.
Neutral grays and white provide balance and legibility.
Accent colors are used sparingly to support key actions or information.
Psychology
Yellow conveys optimism, clarity, and warmth, while red signals energy and urgency. The palette is designed to be inviting yet commanding attention.
Evolution
Shell's core yellow and red have remained consistent for decades, reinforcing brand recognition. Minor adjustments have been made to supporting neutrals and accent colors for digital clarity.
Where Shell uses each color
- Primary
Shell Yellow is used for logos, signage, and key brand elements.
- Secondary
Shell Red appears in the logo, promotional materials, and as a highlight in digital interfaces.
- Accent
Shell Light Yellow is used for subtle highlights and call-to-action buttons.
- Backgrounds
Shell White and Light Gray are used for website backgrounds and printed collateral.
- Text
Shell Black and Dark Gray are used for primary and secondary text across digital and print.
- Semantic
Shell Green, Warning Yellow, Error Red, and Blue are used for status indicators and alerts in digital products.
Shell color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Shell primary color hex code is #FFD500. This yellow is central to Shell's brand identity.
Shell Yellow (#FFD500) is RGB(255, 213, 0) and CMYK(0, 16, 100, 0). These values ensure accurate reproduction in digital and print.
Shell uses Shell Light Gray (#F5F5F5), Shell Gray Border (#D1D3D4), and Shell Muted Gray (#A7A9AC) for backgrounds, borders, and muted text. These neutrals support legibility and contrast.
Primary and secondary colors should dominate branding and key UI elements, with accents and semantic colors used sparingly for emphasis. Always use the exact hex codes for consistency: #FFD500 for yellow, #ED1C24 for red.
The secondary color is Shell Red, #ED1C24, and the accent is Shell Light Yellow, #FFED00. 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 Shell's colors consistently when it generates UI.
Make something in the spirit of Shell
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.