BP color palette
AutomotiveBP's color identity is defined by its distinctive green and yellow palette, representing energy, growth, and environmental awareness. The brand uses a vibrant green as its primary color, complemented by yellow and a range of neutral greys for UI and communication materials.
bp.comBP colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- BP GreenPrimary0, 150, 57
- BP YellowSecondary255, 209, 0
- BP Accent GreenAccent0, 177, 64
Surfaces
Page, cards and dividers.- BP WhiteBackground255, 255, 255
- BP Light GreySurface242, 242, 242
- BP Mid GreyBorder179, 179, 179
Text
Three tiers of copy.- BP CharcoalText34, 34, 34
- BP Medium GreySecondary text102, 102, 102
- BP Muted GreyMuted text166, 166, 166
Semantic
Feedback and state colors.- BP Success GreenSuccess0, 150, 57
- BP Warning YellowWarning255, 209, 0
- BP Error RedError210, 38, 48
- BP Info GreenInfo0, 122, 51
Use BP's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
bp-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #007A33;
--error: #D22630;
--accent: #00B140;
--border: #B3B3B3;
--primary: #009639;
--success: #009639;
--surface: #F2F2F2;
--warning: #FFD100;
--secondary: #FFD100;
--text-muted: #A6A6A6;
--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.2: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.1: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
BP gray and neutral colors
The quiet part of the BP palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- BP WhiteBackground
- HEX
- RGB
- HSL
- BP Light GreySurface
- HEX
- RGB
- HSL
- BP Mid GreyBorder
- HEX
- RGB
- HSL
- BP CharcoalText
- HEX
- RGB
- HSL
- BP Medium GreySecondary text
- HEX
- RGB
- HSL
- BP Muted GreyMuted text
- HEX
- RGB
- HSL
About BP's colors
BP's palette is built around a vibrant green and yellow, symbolizing energy, innovation, and sustainability. The supporting greys and whites provide clarity and accessibility for digital and print applications.
Primary green is complemented by yellow for emphasis.
Neutral greys balance the vivid brand colors in UI.
Accent green and info green provide depth and hierarchy.
Psychology
Green conveys growth, safety, and environmental responsibility, aligning with BP's energy sector positioning. Yellow adds optimism and draws attention to key elements.
Evolution
BP's core green and yellow palette has remained consistent since its major rebrand in 2000. Minor adjustments to grey tones have been made for digital accessibility.
Where BP uses each color
- Primary
BP Green is used in the logo, main navigation, and key brand assets.
- Secondary
BP Yellow highlights calls to action, icons, and important information.
- Accent
BP Accent Green is used for buttons, links, and interactive elements.
- Backgrounds
BP White and Light Grey are used for backgrounds in digital and print layouts.
- Text
BP Charcoal and Medium Grey are used for primary and secondary text across all communications.
- Semantic
Success, warning, error, and info colors are used for status indicators and alerts in digital interfaces.
BP color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official BP Green is #009639. This color is used as the primary brand identifier.
BP Green (#009639) is RGB(0, 150, 57) and CMYK(91, 0, 100, 0). These values are specified in BP's brand guidelines.
BP uses Light Grey (#F2F2F2), Mid Grey (#B3B3B3), Medium Grey (#666666), and Muted Grey (#A6A6A6) for backgrounds, borders, and text. These ensure accessibility and clarity in UI and print.
BP Green should dominate, with yellow and accent green used for emphasis and interaction. Greys and whites provide balance and support for readability.
The secondary color is BP Yellow, #FFD100, and the accent is BP Accent Green, #00B140. 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 BP's colors consistently when it generates UI.
Make something in the spirit of BP
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.