Lucid color palette
AutomotiveLucid's color identity is defined by a sophisticated, dark palette anchored by deep charcoal and complemented by metallic and neutral tones. The brand's colors evoke luxury, innovation, and modernity in the automotive sector.
lucidmotors.comLucid colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Lucid CharcoalPrimary40, 44, 51
- Lucid SilverSecondary185, 182, 179
- Lucid GoldAccent203, 160, 82
Surfaces
Page, cards and dividers.- Lucid Light SandBackground245, 245, 243
- Lucid WhiteSurface255, 255, 255
- Lucid Pale GrayBorder227, 225, 223
Text
Three tiers of copy.- Lucid Deep BlackText26, 26, 26
- Lucid Medium GraySecondary text109, 107, 106
- Lucid Muted GrayMuted text163, 161, 160
Semantic
Feedback and state colors.- Lucid Success GreenSuccess75, 175, 125
- Lucid Warning AmberWarning233, 176, 75
- Lucid Error RedError211, 74, 74
- Lucid Info BlueInfo74, 144, 226
Use Lucid's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
lucid-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4A90E2;
--error: #D34A4A;
--accent: #CBA052;
--border: #E3E1DF;
--primary: #282C33;
--success: #4BAF7D;
--surface: #FFFFFF;
--warning: #E9B04B;
--secondary: #B9B6B3;
--text-muted: #A3A1A0;
--background: #F5F5F3;
--text-primary: #1A1A1A;
--text-secondary: #6D6B6A;
}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
17.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.9: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.6:1
Fail
Lucid gray and neutral colors
The quiet part of the Lucid palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Lucid Light SandBackground
- HEX
- RGB
- HSL
- Lucid WhiteSurface
- HEX
- RGB
- HSL
- Lucid Pale GrayBorder
- HEX
- RGB
- HSL
- Lucid Deep BlackText
- HEX
- RGB
- HSL
- Lucid Medium GraySecondary text
- HEX
- RGB
- HSL
- Lucid Muted GrayMuted text
- HEX
- RGB
- HSL
About Lucid's colors
Lucid's palette is grounded in deep neutrals and metallics, reflecting luxury and advanced technology. The use of gold and silver accents conveys a sense of refinement and exclusivity.
Primary charcoal pairs with metallic accents for contrast.
Light backgrounds highlight the dark UI elements.
Gold accent is reserved for highlights and premium cues.
Psychology
The deep charcoal and metallics evoke trust, stability, and sophistication. Gold accents add a premium, aspirational quality to the brand's visual language.
Evolution
Lucid's core palette has remained stable since its launch, emphasizing consistency and brand recognition. Minor adjustments have been made to accent colors to enhance digital accessibility.
Where Lucid uses each color
- Primary
Lucid Charcoal is used for navigation bars, footers, and key UI backgrounds.
- Secondary
Lucid Silver appears in secondary buttons, icons, and subtle UI elements.
- Accent
Lucid Gold is used for call-to-action highlights, trim details, and premium indicators.
- Backgrounds
Lucid Light Sand and Lucid White are used for page backgrounds and content areas.
- Text
Lucid Deep Black is the main text color, with Medium and Muted Grays for secondary and tertiary text.
- Semantic
Success, warning, error, and info colors are used for system feedback, notifications, and status indicators.
Lucid color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Lucid primary color hex code is #282C33. This deep charcoal shade defines the brand's core visual identity.
Lucid Charcoal (#282C33) is RGB(40, 44, 51) and approximately CMYK(22, 14, 0, 80). Always use the hex code for digital applications.
Lucid uses a range of grays including Lucid Silver (#B9B6B3), Pale Gray (#E3E1DF), and Muted Gray (#A3A1A0) for backgrounds, borders, and muted text. These tones support a clean, modern interface.
Use Lucid Charcoal (#282C33) for primary navigation and backgrounds, with Lucid Gold (#CBA052) reserved for accents and highlights. Maintain accessibility by ensuring sufficient contrast between text and background colors.
The secondary color is Lucid Silver, #B9B6B3, and the accent is Lucid Gold, #CBA052. 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 Lucid's colors consistently when it generates UI.
Make something in the spirit of Lucid
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.