Instacart color palette
EcommerceInstacart's color system is centered around its signature green, reflecting freshness and approachability, with supporting neutrals for clarity and usability. The palette is designed for high contrast and accessibility across digital and physical touchpoints.
instacart.comInstacart colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Instacart GreenPrimary67, 176, 42
- Instacart OrangeSecondary255, 128, 0
- Instacart Light GrayAccent246, 246, 246
Surfaces
Page, cards and dividers.- Instacart WhiteBackground255, 255, 255
- Instacart Surface GraySurface242, 243, 242
- Instacart Border GrayBorder226, 228, 227
Text
Three tiers of copy.- Instacart CharcoalText52, 53, 56
- Instacart Medium GraySecondary text110, 112, 118
- Instacart Muted GrayMuted text162, 164, 170
Semantic
Feedback and state colors.- Instacart GreenSuccess67, 176, 42
- Instacart YellowWarning255, 183, 0
- Instacart RedError226, 61, 40
- Instacart BlueInfo42, 125, 225
Use Instacart's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
instacart-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2A7DE1;
--error: #E23D28;
--accent: #F6F6F6;
--border: #E2E4E3;
--primary: #43B02A;
--success: #43B02A;
--surface: #F2F3F2;
--warning: #FFB700;
--secondary: #FF8000;
--text-muted: #A2A4AA;
--background: #FFFFFF;
--text-primary: #343538;
--text-secondary: #6E7076;
}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
11.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.0:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.4:1
Fail
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.2:1
Fail
Instacart gray and neutral colors
The quiet part of the Instacart palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Instacart WhiteBackground
- HEX
- RGB
- HSL
- Instacart Surface GraySurface
- HEX
- RGB
- HSL
- Instacart Border GrayBorder
- HEX
- RGB
- HSL
- Instacart CharcoalText
- HEX
- RGB
- HSL
- Instacart Medium GraySecondary text
- HEX
- RGB
- HSL
- Instacart Muted GrayMuted text
- HEX
- RGB
- HSL
About Instacart's colors
Instacart’s palette is built around a vibrant green, supported by orange and a range of soft grays for balance and clarity. This combination evokes freshness, trust, and ease of use.
Primary green is complemented by orange for calls to action.
Neutral grays provide structure and readability.
Accent colors highlight alerts and statuses.
Psychology
Green signifies health, growth, and approachability, aligning with Instacart’s grocery delivery service. Orange adds energy and draws attention to interactive elements.
Evolution
Instacart’s color palette has remained consistent since its rebrand, maintaining its recognizable green. Minor adjustments to gray tones have improved accessibility and digital clarity.
Where Instacart uses each color
- Primary
Used for main buttons, highlights, and the Instacart logo.
- Secondary
Appears in call-to-action buttons, icons, and promotional graphics.
- Accent
Used for backgrounds, cards, and subtle UI elements.
- Backgrounds
White and light gray backgrounds are standard for app screens and web pages.
- Text
Charcoal and medium gray are used for primary and secondary text throughout the UI.
- Semantic
Success, warning, error, and info colors are used for status indicators, alerts, and notifications.
Instacart color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Instacart primary color is #43B02A, known as Instacart Green. This color is used for branding and key actions.
Instacart Green (#43B02A) is RGB(67, 176, 42) and CMYK(62, 0, 76, 31). Use these values for accurate color reproduction in print and digital.
Instacart uses several grays: #F6F6F6 (Light Gray), #F2F3F2 (Surface Gray), #E2E4E3 (Border Gray), #343538 (Charcoal), #6E7076 (Medium Gray), and #A2A4AA (Muted Gray). These provide structure and readability across the interface.
Use Instacart Green (#43B02A) for primary actions and branding, with orange (#FF8000) for secondary actions. Grays and white are for backgrounds, surfaces, and text to ensure clarity and accessibility.
The secondary color is Instacart Orange, #FF8000, and the accent is Instacart Light Gray, #F6F6F6. Together with the primary they make up the three brand colors at the top of this page.
3 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 Instacart's colors consistently when it generates UI.
Make something in the spirit of Instacart
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.
