Genesis color palette
AutomotiveGenesis, Hyundai's luxury automotive brand, uses a refined and minimal color palette centered around a distinctive copper and deep black, reflecting sophistication and modernity. The brand's identity relies on strong contrasts and metallic accents to convey luxury and innovation.
genesis.comGenesis colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Genesis CopperPrimary173, 139, 115
- Genesis BlackSecondary26, 26, 26
- Genesis SilverAccent200, 187, 175
Surfaces
Page, cards and dividers.- Genesis Light GrayBackground245, 245, 245
- Genesis CharcoalSurface34, 34, 34
- Genesis Border GrayBorder214, 214, 214
Text
Three tiers of copy.- Genesis BlackText26, 26, 26
- Genesis Medium GraySecondary text110, 110, 110
- Genesis Muted GrayMuted text162, 162, 162
Semantic
Feedback and state colors.- Genesis Success GreenSuccess75, 139, 92
- Genesis Warning OrangeWarning201, 122, 58
- Genesis Error RedError176, 74, 74
- Genesis Info BlueInfo58, 110, 140
Use Genesis's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
genesis-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3A6E8C;
--error: #B04A4A;
--accent: #C8BBAF;
--border: #D6D6D6;
--primary: #AD8B73;
--success: #4B8B5C;
--surface: #222222;
--warning: #C97A3A;
--secondary: #1A1A1A;
--text-muted: #A2A2A2;
--background: #F5F5F5;
--text-primary: #1A1A1A;
--text-secondary: #6E6E6E;
}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.0:1
Pass
Text on surface
Needs 4.5:1 for body text
1.1:1
Fail
Secondary text on background
Needs 4.5:1 for body text
4.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
3.1:1
Fail
Muted text on background
Needs 3:1 for large text
2.3:1
Fail
Muted text on surface
Needs 3:1 for large text
6.2:1
Pass
Genesis gray and neutral colors
The quiet part of the Genesis palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Genesis Light GrayBackground
- HEX
- RGB
- HSL
- Genesis CharcoalSurface
- HEX
- RGB
- HSL
- Genesis Border GrayBorder
- HEX
- RGB
- HSL
- Genesis BlackText
- HEX
- RGB
- HSL
- Genesis Medium GraySecondary text
- HEX
- RGB
- HSL
- Genesis Muted GrayMuted text
- HEX
- RGB
- HSL
About Genesis's colors
Genesis' palette is anchored by a signature copper, complemented by deep blacks and subtle metallics for a luxurious, modern feel. The restrained use of color emphasizes elegance and clarity in all brand touchpoints.
Copper contrasts with black for high-end visual impact.
Metallic silver accents add depth and highlight details.
Grays provide a neutral foundation for UI and print.
Psychology
Copper evokes warmth, prestige, and exclusivity, while black signals sophistication and authority. The palette's minimalism reinforces a sense of calm and confidence.
Evolution
Genesis has maintained a consistent palette since its 2015 launch, with copper and black always at the core. Minor adjustments have refined metallic and gray tones for improved digital accessibility.
Where Genesis uses each color
- Primary
Genesis Copper is used for the logo, key accents, and call-to-action buttons.
- Secondary
Genesis Black appears in navigation bars, footers, and primary backgrounds.
- Accent
Genesis Silver highlights UI elements and decorative lines.
- Backgrounds
Genesis Light Gray is the main page background on digital platforms.
- Text
Genesis Black and Medium Gray are used for primary and secondary text, respectively.
- Semantic
Success, warning, error, and info colors are reserved for system messages and notifications in digital interfaces.
Genesis color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Genesis brand color is Genesis Copper, with hex code #AD8B73.
Genesis Copper (#AD8B73) in RGB is (173, 139, 115) and in CMYK is approximately (0, 20, 34, 32).
Genesis uses Genesis Black (#1A1A1A), Genesis Charcoal (#222222), and Genesis Light Gray (#F5F5F5) for backgrounds and UI surfaces.
Genesis Copper should be reserved for key brand elements and highlights, while black and gray tones structure backgrounds and text. Accent and semantic colors are used sparingly for emphasis and system feedback.
The secondary color is Genesis Black, #1A1A1A, and the accent is Genesis Silver, #C8BBAF. Together with the primary they make up the three brand colors at the top of this page.
3 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 Genesis's colors consistently when it generates UI.
Make something in the spirit of Genesis
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.