Hyundai color palette
AutomotiveHyundai's brand color system is anchored by a deep blue, reflecting reliability and innovation, complemented by a clean, modern palette of grays and white for clarity and sophistication. The palette is consistent across digital and print applications, reinforcing Hyundai's global identity.
hyundai.comHyundai colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Hyundai BluePrimary0, 44, 94
- Hyundai Deep BlueSecondary0, 51, 102
- Hyundai Accent BlueAccent96, 174, 227
Surfaces
Page, cards and dividers.- Hyundai WhiteBackground255, 255, 255
- Hyundai Light GraySurface244, 244, 244
- Hyundai Silver GrayBorder209, 213, 219
Text
Three tiers of copy.- Hyundai CharcoalText34, 34, 34
- Hyundai Medium GraySecondary text102, 102, 102
- Hyundai Muted GrayMuted text165, 165, 165
Semantic
Feedback and state colors.- Hyundai Success GreenSuccess60, 179, 113
- Hyundai Warning YellowWarning255, 177, 0
- Hyundai Error RedError215, 38, 61
- Hyundai Info BlueInfo0, 114, 206
Use Hyundai's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
hyundai-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0072CE;
--error: #D7263D;
--accent: #60AEE3;
--border: #D1D5DB;
--primary: #002C5E;
--success: #3CB371;
--surface: #F4F4F4;
--warning: #FFB100;
--secondary: #003366;
--text-muted: #A5A5A5;
--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.5: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.2:1
Pass
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.2:1
Fail
Hyundai gray and neutral colors
The quiet part of the Hyundai palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Hyundai WhiteBackground
- HEX
- RGB
- HSL
- Hyundai Light GraySurface
- HEX
- RGB
- HSL
- Hyundai Silver GrayBorder
- HEX
- RGB
- HSL
- Hyundai CharcoalText
- HEX
- RGB
- HSL
- Hyundai Medium GraySecondary text
- HEX
- RGB
- HSL
- Hyundai Muted GrayMuted text
- HEX
- RGB
- HSL
About Hyundai's colors
Hyundai's color palette is built around a signature blue, conveying trust and technological advancement, with neutral grays and white for a modern, accessible look. Accent blues and functional colors provide clarity and usability in digital interfaces.
Primary blue is complemented by lighter accent blues for hierarchy.
Neutral grays balance the strong blue and provide readability.
Functional colors (green, yellow, red) are used for status and alerts.
Psychology
The deep blue primary color evokes reliability, professionalism, and innovation, aligning with Hyundai's brand values. Neutral tones support a sense of clarity and approachability.
Evolution
Hyundai's core blue has remained consistent for decades, reinforcing brand recognition. The supporting palette has evolved to include more refined grays and accent blues for digital clarity.
Where Hyundai uses each color
- Primary
Used for the Hyundai logo, primary navigation backgrounds, and key call-to-action buttons.
- Secondary
Appears in headers, footers, and as a supporting color in digital and print materials.
- Accent
Utilized for highlights, links, and interactive elements to draw attention.
- Backgrounds
White and light gray are used for page backgrounds and content areas to ensure clarity.
- Text
Charcoal and medium gray are used for primary and secondary text for optimal readability.
- Semantic
Green, yellow, and red are reserved for status indicators, alerts, and notifications in digital interfaces.
Hyundai color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Hyundai primary color hex code is #002C5E. This deep blue is used in the logo and main brand elements.
Hyundai Blue (#002C5E) in RGB is (0, 44, 94) and in CMYK is (100, 53, 0, 63). Always use the hex #002C5E for digital applications.
Hyundai uses a range of grays including Hyundai Light Gray (#F4F4F4), Hyundai Silver Gray (#D1D5DB), and Hyundai Charcoal (#222222) for backgrounds, borders, and text. These neutrals support a clean, modern interface.
Use Hyundai Blue (#002C5E) for primary branding and navigation, with accent and neutral colors for UI elements and backgrounds. Functional colors are reserved for status and alerts to maintain brand consistency.
The secondary color is Hyundai Deep Blue, #003366, and the accent is Hyundai Accent Blue, #60AEE3. 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 Hyundai's colors consistently when it generates UI.
Make something in the spirit of Hyundai
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.