Chevron color palette
AutomotiveChevron's brand color identity centers on a bold red and blue palette, reflecting its heritage and energy sector leadership. The colors are used consistently across digital and print applications for strong brand recognition.
chevron.comChevron colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Chevron BluePrimary0, 93, 170
- Chevron RedSecondary227, 24, 55
- Chevron WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Chevron Light GrayBackground244, 244, 244
- Chevron Surface GraySurface229, 229, 229
- Chevron Border GrayBorder176, 183, 188
Text
Three tiers of copy.- Chevron CharcoalText34, 34, 34
- Chevron Medium GraySecondary text85, 85, 85
- Chevron Muted GrayMuted text125, 125, 125
Semantic
Feedback and state colors.- Chevron GreenSuccess67, 176, 42
- Chevron YellowWarning255, 199, 44
- Chevron RedError227, 24, 55
- Chevron BlueInfo0, 93, 170
Use Chevron's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
chevron-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #005DAA;
--error: #E31837;
--accent: #FFFFFF;
--border: #B0B7BC;
--primary: #005DAA;
--success: #43B02A;
--surface: #E5E5E5;
--warning: #FFC72C;
--secondary: #E31837;
--text-muted: #7D7D7D;
--background: #F4F4F4;
--text-primary: #222222;
--text-secondary: #555555;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
14.5:1
Pass
Text on surface
Needs 4.5:1 for body text
12.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.8: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
3.7:1
Pass
Muted text on surface
Needs 3:1 for large text
3.3:1
Pass
Chevron gray and neutral colors
The quiet part of the Chevron palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Chevron Light GrayBackground
- HEX
- RGB
- HSL
- Chevron Surface GraySurface
- HEX
- RGB
- HSL
- Chevron Border GrayBorder
- HEX
- RGB
- HSL
- Chevron CharcoalText
- HEX
- RGB
- HSL
- Chevron Medium GraySecondary text
- HEX
- RGB
- HSL
- Chevron Muted GrayMuted text
- HEX
- RGB
- HSL
About Chevron's colors
Chevron's palette uses a strong blue and red as core identifiers, supported by clean neutrals for clarity and accessibility. The colors are chosen for visibility, trust, and energy.
Primary blue and red are complementary and create visual impact.
Neutral grays provide balance and support readability.
Accent white ensures contrast and modernity.
Psychology
Blue conveys trust, professionalism, and reliability, which are essential in the energy sector. Red adds energy, urgency, and draws attention to key elements.
Evolution
Chevron's palette has remained consistent for decades, reinforcing brand recognition. Minor adjustments to gray tones and accessibility improvements have been made in digital applications.
Where Chevron uses each color
- Primary
Chevron Blue is used for navigation bars, key buttons, and the logo background.
- Secondary
Chevron Red highlights calls to action, important icons, and parts of the logo.
- Accent
Chevron White is used for text on colored backgrounds and as a primary background in print and digital.
- Backgrounds
Chevron Light Gray is used for page backgrounds and large content areas.
- Text
Chevron Charcoal and Medium Gray are used for primary and secondary text throughout digital and print materials.
- Semantic
Chevron Green, Yellow, and Red are used for status indicators such as success, warning, and error messages in digital interfaces.
Chevron color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Chevron brand color is Chevron Blue, with the hex code #005DAA.
Chevron Blue (#005DAA) is RGB(0, 93, 170) and CMYK(100, 45, 0, 33).
Chevron uses Chevron Light Gray (#F4F4F4), Surface Gray (#E5E5E5), Border Gray (#B0B7BC), and Charcoal (#222222) for backgrounds, surfaces, borders, and text.
Chevron Blue and Red should dominate branding and UI elements, with neutrals supporting readability and hierarchy. Always maintain sufficient contrast for accessibility, using Chevron White and grays as backgrounds or text as appropriate.
The secondary color is Chevron Red, #E31837, and the accent is Chevron White, #FFFFFF. 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 Chevron's colors consistently when it generates UI.
Make something in the spirit of Chevron
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.