Traeger color palette
ConsumerTraeger’s color identity centers around a distinctive burnt orange, evoking warmth, fire, and outdoor grilling. The palette is complemented by deep charcoal, earthy neutrals, and clean white for a rugged yet modern feel.
traeger.comTraeger colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Traeger Burnt OrangePrimary240, 90, 40
- Traeger CharcoalSecondary34, 34, 34
- Traeger CopperAccent181, 84, 39
Surfaces
Page, cards and dividers.- Traeger WhiteBackground255, 255, 255
- Traeger Light GraySurface246, 246, 246
- Traeger Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Traeger CharcoalText34, 34, 34
- Traeger Medium GraySecondary text102, 102, 102
- Traeger Muted GrayMuted text160, 160, 160
Semantic
Feedback and state colors.- Traeger Forest GreenSuccess91, 137, 48
- Traeger Warning GoldWarning249, 168, 37
- Traeger Error RedError211, 47, 47
- Traeger Info BlueInfo25, 118, 210
Use Traeger's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
traeger-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1976D2;
--error: #D32F2F;
--accent: #B55427;
--border: #E0E0E0;
--primary: #F05A28;
--success: #5B8930;
--surface: #F6F6F6;
--warning: #F9A825;
--secondary: #222222;
--text-muted: #A0A0A0;
--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.7: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.3: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.4:1
Fail
Traeger gray and neutral colors
The quiet part of the Traeger palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Traeger WhiteBackground
- HEX
- RGB
- HSL
- Traeger Light GraySurface
- HEX
- RGB
- HSL
- Traeger Border GrayBorder
- HEX
- RGB
- HSL
- Traeger CharcoalText
- HEX
- RGB
- HSL
- Traeger Medium GraySecondary text
- HEX
- RGB
- HSL
- Traeger Muted GrayMuted text
- HEX
- RGB
- HSL
About Traeger's colors
Traeger’s palette is rooted in earthy, fire-inspired tones, reflecting the brand’s outdoor and grilling heritage. The use of orange and charcoal creates a strong, recognizable contrast.
Primary orange contrasts with deep charcoal for readability.
Earthy accent colors reinforce the natural, rugged brand feel.
Neutrals balance the palette for modern UI clarity.
Psychology
Burnt orange evokes warmth, energy, and appetite, aligning with grilling and outdoor cooking. Charcoal and neutrals convey reliability and durability.
Evolution
Traeger's palette has remained consistent, with burnt orange as the core since its early branding. Minor adjustments have modernized the supporting neutrals for digital use.
Where Traeger uses each color
- Primary
Used for main buttons, highlights, and key calls to action across the website and packaging.
- Secondary
Appears in navigation bars, footers, and as the main text color.
- Accent
Used for secondary buttons, icons, and subtle highlights.
- Backgrounds
White and light gray backgrounds are used for content areas and product showcases.
- Text
Charcoal is the primary text color, with medium and muted grays for secondary and disabled text.
- Semantic
Green, gold, red, and blue are used for success, warning, error, and informational states in UI and notifications.
Traeger color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Traeger brand color is burnt orange, hex code #F05A28.
Traeger Burnt Orange (#F05A28) is RGB(240, 90, 40) and CMYK(0, 63, 83, 6).
Traeger's main dark tone is Traeger Charcoal (#222222), with supporting grays like #666666 and #A0A0A0 for UI and text.
Use Traeger Burnt Orange (#F05A28) for primary actions and highlights, with Charcoal (#222222) for text and navigation. Neutrals and accents should support clarity and brand consistency.
The secondary color is Traeger Charcoal, #222222, and the accent is Traeger Copper, #B55427. 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 Traeger's colors consistently when it generates UI.
Make something in the spirit of Traeger
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.