Panera Bread color palette
Food & DrinkPanera Bread's color identity centers around a distinctive olive green, complemented by warm neutrals and dark brown accents, reflecting its bakery-café roots. The palette evokes freshness, comfort, and an artisan feel.
panerabread.comPanera Bread colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Panera Olive GreenPrimary75, 96, 67
- Panera SageSecondary163, 163, 128
- Panera WheatAccent226, 185, 127
Surfaces
Page, cards and dividers.- Panera CreamBackground247, 246, 241
- Panera WhiteSurface255, 255, 255
- Panera Light TaupeBorder217, 213, 198
Text
Three tiers of copy.- Panera Coffee BrownText60, 44, 32
- Panera MochaSecondary text110, 102, 88
- Panera SageMuted text163, 163, 128
Semantic
Feedback and state colors.- Panera Fresh GreenSuccess126, 155, 90
- Panera WheatWarning226, 185, 127
- Panera Rustic RedError176, 74, 63
- Panera Olive GreenInfo75, 96, 67
Use Panera Bread's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
panera-bread-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4B6043;
--error: #B04A3F;
--accent: #E2B97F;
--border: #D9D5C6;
--primary: #4B6043;
--success: #7E9B5A;
--surface: #FFFFFF;
--warning: #E2B97F;
--secondary: #A3A380;
--text-muted: #A3A380;
--background: #F7F6F1;
--text-primary: #3C2C20;
--text-secondary: #6E6658;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
12.3:1
Pass
Text on surface
Needs 4.5:1 for body text
13.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.2:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.7: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.6:1
Fail
Panera Bread background, border and text colors
The quiet part of the Panera Bread palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Panera CreamBackground
- HEX
- RGB
- HSL
- Panera WhiteSurface
- HEX
- RGB
- HSL
- Panera Light TaupeBorder
- HEX
- RGB
- HSL
- Panera Coffee BrownText
- HEX
- RGB
- HSL
- Panera MochaSecondary text
- HEX
- RGB
- HSL
- Panera SageMuted text
- HEX
- RGB
- HSL
About Panera Bread's colors
Panera Bread's palette uses earth tones to convey warmth, comfort, and natural ingredients. The olive green primary color is balanced by creamy backgrounds and wheat accents for a wholesome, inviting feel.
Primary olive green pairs with warm neutrals for contrast.
Accent wheat highlights calls to action and key UI elements.
Dark brown text ensures readability on light backgrounds.
Psychology
The green hues evoke freshness, health, and a connection to nature, aligning with Panera's bakery-café positioning. Warm neutrals and browns reinforce comfort and approachability.
Evolution
Panera's palette has remained stable, with olive green as a consistent anchor since its rebrand in the early 2010s. Minor adjustments have refined the supporting neutrals and accent tones for digital clarity.
Where Panera Bread uses each color
- Primary
Used in the logo, navigation bar, and key buttons throughout the website and app.
- Secondary
Appears in backgrounds, secondary buttons, and subtle UI elements.
- Accent
Highlights call-to-action buttons, promotional banners, and packaging details.
- Backgrounds
Cream and white backgrounds are used for main content areas and menu screens.
- Text
Coffee brown is used for primary headlines and body text, with mocha and sage for secondary and muted text.
- Semantic
Fresh green signals success states, wheat for warnings, and rustic red for error messages in digital interfaces.
Panera Bread color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Panera Bread primary brand color is #4B6043, known as Panera Olive Green.
Panera Olive Green (#4B6043) has an RGB value of (75, 96, 67). For CMYK, it is approximately (22, 0, 30, 62).
Panera uses Panera Cream (#F7F6F1) for backgrounds and Panera Light Taupe (#D9D5C6) for borders and subtle UI elements.
Use Panera Olive Green (#4B6043) for primary branding, navigation, and key actions, with supporting neutrals for background and text. Accent and semantic colors should highlight important UI elements and states.
The secondary color is Panera Sage, #A3A380, and the accent is Panera Wheat, #E2B97F. 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 Panera Bread's colors consistently when it generates UI.
Make something in the spirit of Panera Bread
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.