Weber color palette
ConsumerWeber's brand color identity is defined by a bold, distinctive red paired with deep black and neutral grays, reflecting its heritage in grilling and outdoor cooking. The palette is utilitarian and iconic, emphasizing clarity and brand recognition.
weber.comWeber colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Weber RedPrimary226, 35, 26
- Weber BlackSecondary35, 31, 32
- Weber SilverAccent182, 182, 182
Surfaces
Page, cards and dividers.- Weber WhiteBackground255, 255, 255
- Weber Light GraySurface245, 245, 245
- Weber Border GrayBorder209, 209, 209
Text
Three tiers of copy.- Weber BlackText35, 31, 32
- Weber Medium GraySecondary text117, 117, 117
- Weber SilverMuted text182, 182, 182
Semantic
Feedback and state colors.- Weber Success GreenSuccess92, 184, 92
- Weber Warning OrangeWarning240, 173, 78
- Weber Error RedError217, 83, 79
- Weber Info BlueInfo91, 192, 222
Use Weber's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
weber-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #5BC0DE;
--error: #D9534F;
--accent: #B6B6B6;
--border: #D1D1D1;
--primary: #E2231A;
--success: #5CB85C;
--surface: #F5F5F5;
--warning: #F0AD4E;
--secondary: #231F20;
--text-muted: #B6B6B6;
--background: #FFFFFF;
--text-primary: #231F20;
--text-secondary: #757575;
}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
4.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.2:1
Fail
Muted text on background
Needs 3:1 for large text
2.0:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
Weber gray and neutral colors
The quiet part of the Weber palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Weber WhiteBackground
- HEX
- RGB
- HSL
- Weber Light GraySurface
- HEX
- RGB
- HSL
- Weber Border GrayBorder
- HEX
- RGB
- HSL
- Weber BlackText
- HEX
- RGB
- HSL
- Weber Medium GraySecondary text
- HEX
- RGB
- HSL
- Weber SilverMuted text
- HEX
- RGB
- HSL
About Weber's colors
Weber's palette is rooted in bold, high-contrast colors that evoke strength and reliability. The use of red and black ensures instant brand recognition and a sense of tradition.
Primary red contrasts with deep black for strong visual hierarchy.
Neutral grays provide balance and support for UI elements.
Accent silver references the metallic finishes of Weber grills.
Psychology
Red conveys energy, passion, and appetite, aligning with grilling culture. Black and gray tones reinforce durability and trust.
Evolution
Weber's color palette has remained remarkably consistent, with red and black as core elements since its inception. Minor adjustments to gray tones have been made for digital clarity.
Where Weber uses each color
- Primary
Weber Red is used for logos, call-to-action buttons, and key highlights.
- Secondary
Weber Black appears in navigation bars, product names, and main text.
- Accent
Weber Silver is used for UI icons, borders, and grill product imagery.
- Backgrounds
Weber White and Light Gray are used for website backgrounds and content areas.
- Text
Black and Medium Gray are used for primary and secondary text, with Silver for muted or disabled text.
- Semantic
Success, warning, error, and info colors are used for alerts, notifications, and status indicators.
Weber color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Weber brand red is #E2231A. This color is used prominently in the logo and key brand elements.
Weber Red (#E2231A) in RGB is 226, 35, 26. In CMYK, it is approximately 0, 85, 88, 11.
Weber uses several grays: Weber Silver (#B6B6B6), Medium Gray (#757575), and Border Gray (#D1D1D1). These are used for UI elements, backgrounds, and secondary text.
Use Weber Red (#E2231A) for primary actions and branding, with Black (#231F20) for text and navigation. Grays and Silver support UI clarity and accessibility.
The secondary color is Weber Black, #231F20, and the accent is Weber Silver, #B6B6B6. 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 Weber's colors consistently when it generates UI.
Make something in the spirit of Weber
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.