Trader Joe's color palette
Food & DrinkTrader Joe's uses a distinctive, bold red as its primary brand color, paired with cream and deep brown tones for a vintage, welcoming feel. The color palette is consistent across signage, packaging, and digital presence.
traderjoes.comTrader Joe's colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Trader Joe's RedPrimary185, 18, 27
- Trader Joe's CreamSecondary246, 231, 193
- Trader Joe's BrownAccent124, 63, 28
Surfaces
Page, cards and dividers.- Trader Joe's Off WhiteBackground255, 249, 237
- Trader Joe's Cream SurfaceSurface246, 231, 193
- Trader Joe's Tan BorderBorder199, 178, 153
Text
Three tiers of copy.- Trader Joe's Deep BrownText45, 26, 16
- Trader Joe's BrownSecondary text124, 63, 28
- Trader Joe's Muted TanMuted text166, 138, 109
Semantic
Feedback and state colors.- Trader Joe's Olive GreenSuccess107, 142, 35
- Trader Joe's GoldWarning235, 169, 55
- Trader Joe's RedError185, 18, 27
- Trader Joe's Deep BrownInfo45, 26, 16
Use Trader Joe's's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
trader-joes-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2D1A10;
--error: #B9121B;
--accent: #7C3F1C;
--border: #C7B299;
--primary: #B9121B;
--success: #6B8E23;
--surface: #F6E7C1;
--warning: #EBA937;
--secondary: #F6E7C1;
--text-muted: #A68A6D;
--background: #FFF9ED;
--text-primary: #2D1A10;
--text-secondary: #7C3F1C;
}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.8:1
Pass
Text on surface
Needs 4.5:1 for body text
13.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
7.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.6:1
Pass
Muted text on background
Needs 3:1 for large text
3.1:1
Pass
Muted text on surface
Needs 3:1 for large text
2.6:1
Fail
Trader Joe's background, border and text colors
The quiet part of the Trader Joe's palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Trader Joe's Off WhiteBackground
- HEX
- RGB
- HSL
- Trader Joe's Cream SurfaceSurface
- HEX
- RGB
- HSL
- Trader Joe's Tan BorderBorder
- HEX
- RGB
- HSL
- Trader Joe's Deep BrownText
- HEX
- RGB
- HSL
- Trader Joe's BrownSecondary text
- HEX
- RGB
- HSL
- Trader Joe's Muted TanMuted text
- HEX
- RGB
- HSL
About Trader Joe's's colors
Trader Joe's color palette is rooted in a bold red, complemented by warm creams and browns to evoke a nostalgic, approachable atmosphere. The palette is designed to be inviting and easily recognizable.
Red and cream create strong contrast for legibility.
Brown tones provide grounding and warmth.
Accent green and gold are used sparingly for highlights.
Psychology
The red conveys energy, excitement, and appetite, while the cream and brown tones evoke warmth and trust. Together, they foster a sense of comfort and approachability.
Evolution
Trader Joe's core palette has remained stable over decades, with the red and cream combination being a constant. Minor adjustments have been made to accent tones for digital applications.
Where Trader Joe's uses each color
- Primary
Trader Joe's Red is used for the logo, store signage, and key call-to-action buttons.
- Secondary
Trader Joe's Cream appears as the background for packaging, website sections, and in-store displays.
- Accent
Trader Joe's Brown is used for borders, illustrations, and decorative elements.
- Backgrounds
Off White is the main website and print background color.
- Text
Deep Brown is used for primary headings and body text, with Brown and Muted Tan for secondary and muted text.
- Semantic
Olive Green, Gold, and Red are used for status messages like success, warning, and error respectively.
Trader Joe's color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Trader Joe's primary brand color is #B9121B, known as Trader Joe's Red.
Trader Joe's Red (#B9121B) in RGB is (185, 18, 27); in CMYK, it is approximately (0, 90, 85, 27).
Trader Joe's Deep Brown (#2D1A10) is used for primary text and dark UI elements, providing contrast and readability.
Use Trader Joe's Red (#B9121B) for primary branding and calls to action, with Cream (#F6E7C1) and Off White (#FFF9ED) as backgrounds, and Deep Brown (#2D1A10) for text and accents.
The secondary color is Trader Joe's Cream, #F6E7C1, and the accent is Trader Joe's Brown, #7C3F1C. Together with the primary they make up the three brand colors at the top of this page.
5 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 Trader Joe's's colors consistently when it generates UI.
Make something in the spirit of Trader Joe's
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.