Subway color palette
Food & DrinkSubway's brand color system centers on a vibrant yellow and green, reflecting freshness and energy, with supporting neutrals for clarity and contrast. The palette is consistent across digital, print, and in-store environments.
subway.comSubway colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Subway GreenPrimary0, 153, 67
- Subway YellowSecondary255, 214, 0
- Subway WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Subway Light GrayBackground245, 245, 245
- Subway Surface GraySurface232, 232, 232
- Subway Border GrayBorder204, 204, 204
Text
Three tiers of copy.- Subway CharcoalText34, 34, 34
- Subway Medium GraySecondary text102, 102, 102
- Subway Muted GrayMuted text153, 153, 153
Semantic
Feedback and state colors.- Subway GreenSuccess0, 153, 67
- Subway YellowWarning255, 214, 0
- Subway RedError226, 35, 26
- Subway Dark GreenInfo0, 122, 51
Use Subway's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
subway-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #007A33;
--error: #E2231A;
--accent: #FFFFFF;
--border: #CCCCCC;
--primary: #009943;
--success: #009943;
--surface: #E8E8E8;
--warning: #FFD600;
--secondary: #FFD600;
--text-muted: #999999;
--background: #F5F5F5;
--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
14.6:1
Pass
Text on surface
Needs 4.5:1 for body text
13.0:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.7: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.3:1
Fail
Subway gray and neutral colors
The quiet part of the Subway palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Subway Light GrayBackground
- HEX
- RGB
- HSL
- Subway Surface GraySurface
- HEX
- RGB
- HSL
- Subway Border GrayBorder
- HEX
- RGB
- HSL
- Subway CharcoalText
- HEX
- RGB
- HSL
- Subway Medium GraySecondary text
- HEX
- RGB
- HSL
- Subway Muted GrayMuted text
- HEX
- RGB
- HSL
About Subway's colors
Subway's palette uses a complementary scheme of green and yellow, supported by neutral grays and white for balance. The colors evoke freshness, energy, and approachability.
Green and yellow are complementary and reinforce the fresh food message.
Neutrals provide clarity and support legibility.
Accent white is used for contrast and cleanliness.
Psychology
Green suggests health, freshness, and natural ingredients, while yellow conveys optimism and energy. The combination is inviting and reinforces the brand's focus on fresh food.
Evolution
Subway's core green and yellow palette has remained stable since the 2002 rebrand, with minor adjustments to tone and supporting neutrals for digital clarity. The current system emphasizes accessibility and consistency across all touchpoints.
Where Subway uses each color
- Primary
Subway Green is used in the logo, navigation bars, and call-to-action buttons.
- Secondary
Subway Yellow appears in backgrounds, highlights, and promotional banners.
- Accent
Subway White is used for text on colored backgrounds and as a background for key UI elements.
- Backgrounds
Subway Light Gray and Surface Gray are used for app and website backgrounds.
- Text
Subway Charcoal and Medium Gray are used for primary and secondary text throughout digital and print materials.
- Semantic
Subway Green and Yellow are used for success and warning states, while Subway Red indicates errors.
Subway color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Subway Green is #009943, and Subway Yellow is #FFD600.
Subway Green (#009943) is RGB(0, 153, 67) and CMYK(91, 0, 97, 0).
Subway uses Light Gray (#F5F5F5), Surface Gray (#E8E8E8), Border Gray (#CCCCCC), and Charcoal (#222222) for UI backgrounds and text.
Use Subway Green (#009943) for logos and primary actions, Yellow (#FFD600) for highlights, and neutrals for backgrounds and text to maintain brand consistency.
The secondary color is Subway Yellow, #FFD600, and the accent is Subway White, #FFFFFF. 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 Subway's colors consistently when it generates UI.
Make something in the spirit of Subway
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.