Beyond Meat color palette
Food & DrinkBeyond Meat's color identity centers on a distinctive green, reflecting its plant-based mission, paired with black, white, and neutral grays for clarity and contrast. The palette is clean and modern, supporting a fresh, natural brand image.
beyondmeat.comBeyond Meat colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Beyond GreenPrimary99, 193, 68
- Beyond BlackSecondary0, 0, 0
- Beyond WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Beyond Light GrayBackground246, 246, 246
- Beyond Surface GraySurface229, 229, 229
- Beyond Border GrayBorder209, 209, 209
Text
Three tiers of copy.- Beyond Text BlackText34, 34, 34
- Beyond Text GraySecondary text102, 102, 102
- Beyond Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Beyond Success GreenSuccess99, 193, 68
- Beyond Warning YellowWarning255, 194, 14
- Beyond Error RedError233, 79, 55
- Beyond Info BlueInfo58, 167, 211
Use Beyond Meat's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
beyond-meat-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3AA7D3;
--error: #E94F37;
--accent: #FFFFFF;
--border: #D1D1D1;
--primary: #63C144;
--success: #63C144;
--surface: #E5E5E5;
--warning: #FFC20E;
--secondary: #000000;
--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
Beyond Meat gray and neutral colors
The quiet part of the Beyond Meat palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Beyond Light GrayBackground
- HEX
- RGB
- HSL
- Beyond Surface GraySurface
- HEX
- RGB
- HSL
- Beyond Border GrayBorder
- HEX
- RGB
- HSL
- Beyond Text BlackText
- HEX
- RGB
- HSL
- Beyond Text GraySecondary text
- HEX
- RGB
- HSL
- Beyond Muted GrayMuted text
- HEX
- RGB
- HSL
About Beyond Meat's colors
Beyond Meat's palette uses green as a symbol of plant-based freshness and sustainability, complemented by black and white for modernity and legibility. Neutral grays provide balance and support a clean, accessible UI.
Primary green contrasts with black and white for high visibility.
Grays unify backgrounds and surfaces for a cohesive look.
Accent colors are reserved for messaging and calls to action.
Psychology
Green evokes health, growth, and environmental consciousness, aligning with Beyond Meat's mission. The use of black and white adds authority and trust.
Evolution
The core green and black palette has remained stable since Beyond Meat's early branding. Minor adjustments to gray tones and supporting colors have been made for digital clarity.
Where Beyond Meat uses each color
- Primary
Beyond Green is used for logos, key buttons, and highlights on packaging and the website.
- Secondary
Beyond Black is used for navigation bars, headers, and bold text.
- Accent
Beyond White is used for backgrounds, negative space, and text contrast.
- Backgrounds
Beyond Light Gray is the main website and app background.
- Text
Beyond Text Black and Beyond Text Gray are used for primary and secondary body text, respectively.
- Semantic
Success, warning, error, and info colors are used for alerts, notifications, and status indicators in digital interfaces.
Beyond Meat color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Beyond Meat brand color is Beyond Green, with the hex code #63C144.
Beyond Green (#63C144) is RGB(99, 193, 68). For CMYK, it is approximately 49, 0, 65, 24.
Beyond Meat uses several grays: Beyond Light Gray (#F6F6F6), Beyond Surface Gray (#E5E5E5), Beyond Border Gray (#D1D1D1), and text grays like #222222 and #666666.
Use Beyond Green for branding and key actions, black and white for structure and contrast, and grays for backgrounds and supporting UI elements. Semantic colors are reserved for status and messaging.
The secondary color is Beyond Black, #000000, and the accent is Beyond White, #FFFFFF. 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 Beyond Meat's colors consistently when it generates UI.
Make something in the spirit of Beyond Meat
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.