7-Eleven color palette
Food & Drink7-Eleven's color identity is defined by its distinctive green, orange, and red palette, which is instantly recognizable and rooted in its convenience retail heritage. The brand uses these colors consistently across signage, packaging, and digital interfaces.
7-eleven.com7-Eleven colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- 7-Eleven GreenPrimary0, 150, 57
- 7-Eleven OrangeSecondary255, 127, 39
- 7-Eleven RedAccent237, 28, 36
Surfaces
Page, cards and dividers.- 7-Eleven WhiteBackground255, 255, 255
- 7-Eleven Light GraySurface245, 245, 245
- 7-Eleven Gray BorderBorder209, 211, 212
Text
Three tiers of copy.- 7-Eleven CharcoalText34, 34, 34
- 7-Eleven Medium GraySecondary text102, 102, 102
- 7-Eleven Muted GrayMuted text167, 169, 172
Semantic
Feedback and state colors.- 7-Eleven Success GreenSuccess67, 176, 42
- 7-Eleven Warning YellowWarning255, 194, 14
- 7-Eleven Error RedError237, 28, 36
- 7-Eleven Info BlueInfo0, 174, 239
Use 7-Eleven's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
7-eleven-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00AEEF;
--error: #ED1C24;
--accent: #ED1C24;
--border: #D1D3D4;
--primary: #009639;
--success: #43B02A;
--surface: #F5F5F5;
--warning: #FFC20E;
--secondary: #FF7F27;
--text-muted: #A7A9AC;
--background: #FFFFFF;
--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
15.9:1
Pass
Text on surface
Needs 4.5:1 for body text
14.6:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.3: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
7-Eleven gray and neutral colors
The quiet part of the 7-Eleven palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- 7-Eleven WhiteBackground
- HEX
- RGB
- HSL
- 7-Eleven Light GraySurface
- HEX
- RGB
- HSL
- 7-Eleven Gray BorderBorder
- HEX
- RGB
- HSL
- 7-Eleven CharcoalText
- HEX
- RGB
- HSL
- 7-Eleven Medium GraySecondary text
- HEX
- RGB
- HSL
- 7-Eleven Muted GrayMuted text
- HEX
- RGB
- HSL
About 7-Eleven's colors
7-Eleven's palette is built on a triadic scheme of green, orange, and red, creating a vibrant and energetic brand presence. The use of white and gray neutrals supports legibility and clarity in digital and physical applications.
Green, orange, and red are used in combination for maximum brand recognition.
Neutrals provide balance and ensure accessibility.
Accent colors highlight calls to action and important information.
Psychology
Green conveys freshness and approachability, while orange and red add energy and urgency. The palette is designed to be inviting and to stimulate appetite and attention.
Evolution
The core green, orange, and red colors have remained consistent since the 1960s, reinforcing brand recognition. Minor adjustments have been made to neutral tones for digital clarity.
Where 7-Eleven uses each color
- Primary
7-Eleven Green is used for the main logo background, navigation bars, and key brand elements.
- Secondary
7-Eleven Orange appears in logo details, buttons, and promotional banners.
- Accent
7-Eleven Red is used for emphasis in calls to action and signage highlights.
- Backgrounds
White and light gray backgrounds are used for digital interfaces and packaging.
- Text
Charcoal and medium gray are used for primary and secondary text across all platforms.
- Semantic
Success green, warning yellow, error red, and info blue are used for status indicators and alerts in digital products.
7-Eleven color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official 7-Eleven primary brand color is green, with the hex code #009639.
7-Eleven Green is RGB(0, 150, 57) and CMYK(100, 0, 90, 41). The hex code is #009639.
7-Eleven uses #F5F5F5 (Light Gray), #D1D3D4 (Gray Border), #222222 (Charcoal), #666666 (Medium Gray), and #A7A9AC (Muted Gray) in its UI and print materials.
Use green for primary branding, orange and red for accents and highlights, and neutrals for backgrounds and text. Always apply the exact hex codes for consistency: #009639, #FF7F27, #ED1C24, and the specified grays.
The secondary color is 7-Eleven Orange, #FF7F27, and the accent is 7-Eleven Red, #ED1C24. 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 7-Eleven's colors consistently when it generates UI.
Make something in the spirit of 7-Eleven
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.