Rivian color palette
AutomotiveRivian's brand color system centers around a distinctive yellow, complemented by deep greens, muted neutrals, and functional UI tones. The palette reflects the brand's adventurous, outdoors-focused identity and is consistently used across digital and physical touchpoints.
rivian.comRivian colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Rivian YellowPrimary255, 208, 47
- Rivian Deep BlueSecondary20, 32, 44
- Rivian Forest GreenAccent28, 58, 45
Surfaces
Page, cards and dividers.- Rivian Off WhiteBackground245, 245, 242
- Rivian Light GraySurface233, 233, 228
- Rivian Soft GrayBorder194, 194, 188
Text
Three tiers of copy.- Rivian Deep BlueText20, 32, 44
- Rivian SlateSecondary text77, 83, 88
- Rivian Muted GrayMuted text138, 143, 148
Semantic
Feedback and state colors.- Rivian Success GreenSuccess46, 125, 79
- Rivian Warning YellowWarning229, 185, 0
- Rivian Error RedError211, 47, 47
- Rivian Info BlueInfo25, 118, 210
Use Rivian's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
rivian-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #1C3A2D;
--border: #C2C2BC;
--primary: #FFD02F;
--success: #2E7D4F;
--surface: #E9E9E4;
--warning: #E5B900;
--secondary: #14202C;
--text-muted: #8A8F94;
--background: #F5F5F2;
--text-primary: #14202C;
--text-secondary: #4D5358;
}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.1:1
Pass
Text on surface
Needs 4.5:1 for body text
13.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.4:1
Pass
Muted text on background
Needs 3:1 for large text
3.0:1
Fail
Muted text on surface
Needs 3:1 for large text
2.7:1
Fail
Rivian background, border and text colors
The quiet part of the Rivian palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Rivian Off WhiteBackground
- HEX
- RGB
- HSL
- Rivian Light GraySurface
- HEX
- RGB
- HSL
- Rivian Soft GrayBorder
- HEX
- RGB
- HSL
- Rivian Deep BlueText
- HEX
- RGB
- HSL
- Rivian SlateSecondary text
- HEX
- RGB
- HSL
- Rivian Muted GrayMuted text
- HEX
- RGB
- HSL
About Rivian's colors
Rivian's palette is inspired by nature, combining a bold yellow with deep, earthy tones and functional neutrals. The system balances visibility, approachability, and ruggedness for both digital and physical applications.
Primary yellow contrasts with deep blue for navigation and branding.
Accent green is used for environmental and adventure cues.
Neutrals provide clarity and legibility for UI elements.
Psychology
The yellow evokes optimism and energy, while the deep blue and green tones ground the brand in trust and environmental consciousness. The palette signals both innovation and a connection to the outdoors.
Evolution
Rivian's color palette has remained stable since its public launch, with minor adjustments to neutral tones for improved accessibility. The signature yellow has consistently been the focal point of the brand's identity.
Where Rivian uses each color
- Primary
Rivian Yellow is used for the logo, key call-to-action buttons, and highlight elements across digital and print.
- Secondary
Rivian Deep Blue appears in navigation bars, footers, and as a background for key sections.
- Accent
Rivian Forest Green is used for environmental messaging, badges, and select UI highlights.
- Backgrounds
Rivian Off White and Light Gray are applied to page backgrounds and content surfaces for a clean, modern look.
- Text
Deep Blue and Slate are used for primary and secondary text, while Muted Gray is reserved for disabled or less prominent text.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for status indicators and alerts throughout the UI.
Rivian color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Rivian brand color is Rivian Yellow, with the hex code #FFD02F.
Rivian Yellow (#FFD02F) in RGB is 255, 208, 47; in CMYK it is 0, 18, 82, 0.
Rivian uses Off White (#F5F5F2), Light Gray (#E9E9E4), Soft Gray (#C2C2BC), and Muted Gray (#8A8F94) for backgrounds, surfaces, and muted text.
Use Rivian Yellow (#FFD02F) for primary branding and calls to action, with Deep Blue (#14202C) and Forest Green (#1C3A2D) as supporting and accent colors. Neutrals and semantic colors ensure clarity and accessibility in UI and print applications.
The secondary color is Rivian Deep Blue, #14202C, and the accent is Rivian Forest Green, #1C3A2D. 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 Rivian's colors consistently when it generates UI.
Make something in the spirit of Rivian
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.