BYD color palette
AutomotiveBYD's brand color system is centered on a bold, high-visibility red, reflecting its identity as a leading global automotive and technology company. The palette is minimal and modern, using strong reds and functional grays for clarity and impact.
byd.comBYD colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- BYD RedPrimary214, 0, 28
- BYD WhiteSecondary255, 255, 255
- BYD BlackAccent26, 26, 26
Surfaces
Page, cards and dividers.- BYD Light GrayBackground246, 246, 246
- BYD Panel GraySurface229, 229, 229
- BYD Border GrayBorder204, 204, 204
Text
Three tiers of copy.- BYD Text BlackText34, 34, 34
- BYD Text GraySecondary text102, 102, 102
- BYD Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- BYD Success GreenSuccess60, 179, 113
- BYD Warning YellowWarning255, 179, 0
- BYD Error RedError214, 0, 28
- BYD Info BlueInfo25, 118, 210
Use BYD's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
byd-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D6001C;
--accent: #1A1A1A;
--border: #CCCCCC;
--primary: #D6001C;
--success: #3CB371;
--surface: #E5E5E5;
--warning: #FFB300;
--secondary: #FFFFFF;
--text-muted: #999999;
--background: #F6F6F6;
--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
14.7:1
Pass
Text on surface
Needs 4.5:1 for body text
12.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.6:1
Pass
Muted text on background
Needs 3:1 for large text
2.6:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
BYD gray and neutral colors
The quiet part of the BYD palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- BYD Light GrayBackground
- HEX
- RGB
- HSL
- BYD Panel GraySurface
- HEX
- RGB
- HSL
- BYD Border GrayBorder
- HEX
- RGB
- HSL
- BYD Text BlackText
- HEX
- RGB
- HSL
- BYD Text GraySecondary text
- HEX
- RGB
- HSL
- BYD Muted GrayMuted text
- HEX
- RGB
- HSL
About BYD's colors
BYD's color palette is dominated by a vivid red, symbolizing energy, innovation, and confidence. Neutral grays and black are used for balance and legibility in digital and physical interfaces.
Red is paired with white for high contrast.
Grays are used for backgrounds and surfaces.
Accent black anchors navigation and typography.
Psychology
Red communicates passion, action, and technological leadership, aligning with BYD's brand values. The supporting neutrals ensure clarity and a modern, trustworthy appearance.
Evolution
The BYD palette has remained consistent, with red as the signature color since the brand's inception. Over time, the use of functional grays has increased for digital clarity.
Where BYD uses each color
- Primary
BYD Red is used for the logo, main buttons, and key highlights across digital and print assets.
- Secondary
BYD White is the default background for websites, brochures, and vehicle displays.
- Accent
BYD Black is used for navigation bars, footer backgrounds, and strong text.
- Backgrounds
BYD Light Gray and Panel Gray are used for UI backgrounds and cards.
- Text
Text Black and Text Gray are used for headings and body copy, with Muted Gray for secondary information.
- Semantic
Success Green, Warning Yellow, Error Red, and Info Blue are used for notifications, alerts, and status indicators in digital products.
BYD color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official BYD brand red is #D6001C, used for the logo and primary highlights.
BYD Red (#D6001C) is RGB(214, 0, 28) and CMYK(0, 100, 87, 16).
BYD uses a range of grays: BYD Light Gray (#F6F6F6), Panel Gray (#E5E5E5), Border Gray (#CCCCCC), Text Gray (#666666), and Muted Gray (#999999).
BYD Red (#D6001C) should be reserved for primary actions and branding, while grays and black are used for backgrounds, surfaces, and text for optimal readability.
The secondary color is BYD White, #FFFFFF, and the accent is BYD Black, #1A1A1A. 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 BYD's colors consistently when it generates UI.
Make something in the spirit of BYD
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.