Smart color palette
AutomotiveSmart's color identity is defined by its distinctive yellow-green and monochrome palette, reflecting innovation and urban mobility. The brand uses bright accents paired with deep grays and crisp whites for a modern, high-contrast look.
smart.comSmart colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Smart Yellow-GreenPrimary215, 230, 0
- Smart BlackSecondary35, 31, 32
- Smart Accent YellowAccent255, 237, 0
Surfaces
Page, cards and dividers.- Smart WhiteBackground255, 255, 255
- Smart Light GraySurface245, 245, 245
- Smart Border GrayBorder209, 209, 209
Text
Three tiers of copy.- Smart Black TextText35, 31, 32
- Smart Medium GraySecondary text109, 110, 113
- Smart Muted GrayMuted text167, 168, 170
Semantic
Feedback and state colors.- Smart Success GreenSuccess122, 193, 67
- Smart Warning OrangeWarning255, 182, 0
- Smart Error RedError227, 6, 19
- Smart Info BlueInfo0, 159, 227
Use Smart's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
smart-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #009FE3;
--error: #E30613;
--accent: #FFED00;
--border: #D1D1D1;
--primary: #D7E600;
--success: #7AC143;
--surface: #F5F5F5;
--warning: #FFB600;
--secondary: #231F20;
--text-muted: #A7A8AA;
--background: #FFFFFF;
--text-primary: #231F20;
--text-secondary: #6D6E71;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.3:1
Pass
Text on surface
Needs 4.5:1 for body text
15.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.7: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
Smart gray and neutral colors
The quiet part of the Smart palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Smart WhiteBackground
- HEX
- RGB
- HSL
- Smart Light GraySurface
- HEX
- RGB
- HSL
- Smart Border GrayBorder
- HEX
- RGB
- HSL
- Smart Black TextText
- HEX
- RGB
- HSL
- Smart Medium GraySecondary text
- HEX
- RGB
- HSL
- Smart Muted GrayMuted text
- HEX
- RGB
- HSL
About Smart's colors
Smart's palette is built around a high-visibility yellow-green paired with black, white, and neutral grays for clarity and contrast. The accent yellow provides additional vibrancy for highlights and calls to action.
Primary yellow-green contrasts with deep black for strong visual hierarchy.
Neutral grays support legibility and UI clarity.
Accent yellow is used sparingly for emphasis.
Psychology
The yellow-green primary conveys energy, innovation, and urban freshness, while the black and gray tones ground the brand in sophistication and clarity. The palette is intended to feel modern, approachable, and distinctly recognizable.
Evolution
Smart's color palette has remained consistent since its inception, with the yellow-green and black combination being a core brand identifier. Minor adjustments have been made to gray tones for digital accessibility, but the primary colors have been stable.
Where Smart uses each color
- Primary
Used for logo, key buttons, and highlight elements across digital and print.
- Secondary
Appears in navigation bars, footers, and as a background for the logo.
- Accent
Used for call-to-action buttons, icons, and important highlights.
- Backgrounds
White and light gray backgrounds dominate web and app screens for clarity.
- Text
Black and medium gray are used for primary and secondary text to ensure readability.
- Semantic
Success, warning, error, and info colors are used for system messages and status indicators.
Smart color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Smart primary color hex code is #D7E600. This yellow-green is used prominently in branding and UI highlights.
The RGB value for #D7E600 is (215, 230, 0). For print, the approximate CMYK is (6, 0, 100, 10).
Smart uses #231F20 (Smart Black), #6D6E71 (Smart Medium Gray), and #A7A8AA (Smart Muted Gray) for backgrounds, text, and UI elements. These ensure high contrast and clear readability.
Use #D7E600 for primary actions and highlights, with #231F20 and #FFFFFF for backgrounds and text. Accent and semantic colors should be applied sparingly for emphasis and alerts.
The secondary color is Smart Black, #231F20, and the accent is Smart Accent 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 Smart's colors consistently when it generates UI.
Make something in the spirit of Smart
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.