Chewy color palette
EcommerceChewy's color identity centers on a distinctive, friendly blue paired with crisp white and approachable neutrals, reflecting its pet-focused ecommerce brand. The palette is consistent across digital and packaging touchpoints.
chewy.comChewy colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Chewy BluePrimary42, 123, 228
- Chewy YellowSecondary255, 210, 0
- Chewy OrangeAccent243, 111, 33
Surfaces
Page, cards and dividers.- Chewy WhiteBackground255, 255, 255
- Chewy Light GraySurface245, 247, 250
- Chewy Border GrayBorder214, 217, 222
Text
Three tiers of copy.- Chewy CharcoalText34, 34, 34
- Chewy SlateSecondary text92, 106, 122
- Chewy Muted GrayMuted text160, 169, 184
Semantic
Feedback and state colors.- Chewy GreenSuccess39, 174, 96
- Chewy Warning YellowWarning255, 179, 0
- Chewy RedError231, 76, 60
- Chewy Info BlueInfo79, 195, 247
Use Chewy's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
chewy-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #4FC3F7;
--error: #E74C3C;
--accent: #F36F21;
--border: #D6D9DE;
--primary: #2A7BE4;
--success: #27AE60;
--surface: #F5F7FA;
--warning: #FFB300;
--secondary: #FFD200;
--text-muted: #A0A9B8;
--background: #FFFFFF;
--text-primary: #222222;
--text-secondary: #5C6A7A;
}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.8:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.5:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.2: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.2:1
Fail
Chewy background, border and text colors
The quiet part of the Chewy palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Chewy WhiteBackground
- HEX
- RGB
- HSL
- Chewy Light GraySurface
- HEX
- RGB
- HSL
- Chewy Border GrayBorder
- HEX
- RGB
- HSL
- Chewy CharcoalText
- HEX
- RGB
- HSL
- Chewy SlateSecondary text
- HEX
- RGB
- HSL
- Chewy Muted GrayMuted text
- HEX
- RGB
- HSL
About Chewy's colors
Chewy's palette uses a vibrant blue as its anchor, complemented by cheerful yellow and orange accents for warmth and approachability. Neutrals and grays provide clarity and accessibility in UI contexts.
Primary blue contrasts with white and yellow for high visibility.
Accent orange is used sparingly to draw attention.
Grays balance the palette and support readability.
Psychology
The blue conveys trust, reliability, and friendliness, essential for a pet-focused brand. Yellow and orange add energy and optimism, appealing to pet owners.
Evolution
Chewy's blue-centric palette has remained stable since its early branding, with only minor adjustments to accent and neutral tones for digital accessibility. The core blue and yellow have been consistent across web and packaging.
Where Chewy uses each color
- Primary
Chewy Blue is used for the logo, primary navigation, and main call-to-action buttons.
- Secondary
Chewy Yellow appears in highlights, promotional banners, and some button states.
- Accent
Chewy Orange is used for sale tags, notifications, and select icons.
- Backgrounds
Chewy White and Light Gray serve as page backgrounds and card surfaces.
- Text
Chewy Charcoal is the main body text, with Slate and Muted Gray for secondary and disabled text.
- Semantic
Green, Yellow, Red, and Info Blue are used for success, warning, error, and informational messages respectively.
Chewy color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Chewy brand color is Chewy Blue, with the hex code #2A7BE4.
Chewy Blue (#2A7BE4) is RGB(42, 123, 228). For CMYK, it is approximately 82, 46, 0, 11.
Chewy uses Chewy Light Gray (#F5F7FA), Border Gray (#D6D9DE), and Muted Gray (#A0A9B8) for backgrounds, borders, and muted text.
Use Chewy Blue for primary actions and branding, with yellow and orange for highlights and accents. Grays and neutrals support readability and accessibility across digital and print.
The secondary color is Chewy Yellow, #FFD200, and the accent is Chewy Orange, #F36F21. 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 Chewy's colors consistently when it generates UI.
Make something in the spirit of Chewy
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.