Sweetgreen color palette
Food & DrinkSweetgreen's color identity centers on a fresh, natural green paired with clean neutrals, reflecting its focus on healthy, plant-forward food. The palette is minimal, modern, and rooted in the brand's commitment to simplicity and sustainability.
sweetgreen.comSweetgreen colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Sweetgreen ForestPrimary26, 51, 23
- Sweetgreen MintSecondary182, 216, 185
- Sweetgreen Off-WhiteAccent247, 247, 242
Surfaces
Page, cards and dividers.- Sweetgreen WhiteBackground255, 255, 255
- Sweetgreen Light GraySurface243, 243, 239
- Sweetgreen Pale GreenBorder217, 227, 214
Text
Three tiers of copy.- Sweetgreen ForestText26, 51, 23
- Sweetgreen OliveSecondary text75, 96, 67
- Sweetgreen SageMuted text138, 154, 134
Semantic
Feedback and state colors.- Sweetgreen OliveSuccess75, 96, 67
- Sweetgreen GoldWarning246, 194, 68
- Sweetgreen TomatoError224, 90, 71
- Sweetgreen MintInfo182, 216, 185
Use Sweetgreen's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
sweetgreen-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #B6D8B9;
--error: #E05A47;
--accent: #F7F7F2;
--border: #D9E3D6;
--primary: #1A3317;
--success: #4B6043;
--surface: #F3F3EF;
--warning: #F6C244;
--secondary: #B6D8B9;
--text-muted: #8A9A86;
--background: #FFFFFF;
--text-primary: #1A3317;
--text-secondary: #4B6043;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
13.7:1
Pass
Text on surface
Needs 4.5:1 for body text
12.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.9:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.2:1
Pass
Muted text on background
Needs 3:1 for large text
3.0:1
Fail
Muted text on surface
Needs 3:1 for large text
2.7:1
Fail
Sweetgreen background, border and text colors
The quiet part of the Sweetgreen palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Sweetgreen WhiteBackground
- HEX
- RGB
- HSL
- Sweetgreen Light GraySurface
- HEX
- RGB
- HSL
- Sweetgreen Pale GreenBorder
- HEX
- RGB
- HSL
- Sweetgreen ForestText
- HEX
- RGB
- HSL
- Sweetgreen OliveSecondary text
- HEX
- RGB
- HSL
- Sweetgreen SageMuted text
- HEX
- RGB
- HSL
About Sweetgreen's colors
Sweetgreen's palette is inspired by nature, with green as the dominant hue to evoke freshness and health. Neutral tones support a clean, approachable visual experience.
Primary green is complemented by muted greens and soft neutrals.
Accent and surface colors provide contrast for legibility.
Semantic colors (success, warning, error) are distinct but harmonize with the natural palette.
Psychology
Green communicates health, growth, and sustainability, aligning with Sweetgreen's brand values. The use of soft neutrals creates a calming, trustworthy environment.
Evolution
Sweetgreen's palette has remained consistent, with minor refinements to green and neutral tones for digital clarity. The brand has always prioritized a minimal, nature-inspired color system.
Where Sweetgreen uses each color
- Primary
Used for logo, navigation bar, and key call-to-action buttons.
- Secondary
Appears in highlights, secondary buttons, and backgrounds.
- Accent
Used for backgrounds, overlays, and subtle UI elements.
- Backgrounds
White and light gray are used for main backgrounds and content areas.
- Text
Forest green and olive are used for headings and body text, with sage for muted or disabled text.
- Semantic
Gold, tomato, and mint indicate status messages such as warnings, errors, and informational alerts.
Sweetgreen color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Sweetgreen brand color is #1A3317, known as Sweetgreen Forest. This is used as the primary green across brand assets.
Sweetgreen Forest (#1A3317) is RGB(26, 51, 23). For print, its approximate CMYK is (49, 0, 55, 80).
Sweetgreen uses #F3F3EF (Sweetgreen Light Gray) and #F7F7F2 (Sweetgreen Off-White) as its main neutrals for backgrounds and surfaces.
Use Sweetgreen Forest (#1A3317) for primary actions and text, with supporting greens and neutrals for backgrounds and UI elements. Semantic colors like Sweetgreen Gold (#F6C244) and Tomato (#E05A47) are reserved for status and alerts.
The secondary color is Sweetgreen Mint, #B6D8B9, and the accent is Sweetgreen Off-White, #F7F7F2. 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 Sweetgreen's colors consistently when it generates UI.
Make something in the spirit of Sweetgreen
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.