Gatorade color palette
Food & DrinkGatorade's color identity centers on its iconic orange, paired with bold black, white, and energetic accent colors that reflect athleticism and hydration. The palette is consistent across packaging, digital, and promotional materials.
gatorade.comGatorade colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Gatorade OrangePrimary255, 127, 39
- Gatorade BlackSecondary35, 31, 32
- Gatorade WhiteAccent255, 255, 255
Surfaces
Page, cards and dividers.- Gatorade Light GrayBackground245, 245, 245
- Gatorade Surface GraySurface229, 229, 229
- Gatorade Border GrayBorder204, 204, 204
Text
Three tiers of copy.- Gatorade BlackText35, 31, 32
- Gatorade Medium GraySecondary text109, 110, 113
- Gatorade Muted GrayMuted text167, 168, 170
Semantic
Feedback and state colors.- Gatorade Lime GreenSuccess122, 193, 67
- Gatorade YellowWarning255, 194, 14
- Gatorade RedError237, 28, 36
- Gatorade BlueInfo0, 174, 239
Use Gatorade's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
gatorade-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #00AEEF;
--error: #ED1C24;
--accent: #FFFFFF;
--border: #CCCCCC;
--primary: #FF7F27;
--success: #7AC143;
--surface: #E5E5E5;
--warning: #FFC20E;
--secondary: #231F20;
--text-muted: #A7A8AA;
--background: #F5F5F5;
--text-primary: #231F20;
--text-secondary: #6D6E71;
}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.0:1
Pass
Text on surface
Needs 4.5:1 for body text
12.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.0:1
Fail
Muted text on background
Needs 3:1 for large text
2.2:1
Fail
Muted text on surface
Needs 3:1 for large text
1.9:1
Fail
Gatorade gray and neutral colors
The quiet part of the Gatorade palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Gatorade Light GrayBackground
- HEX
- RGB
- HSL
- Gatorade Surface GraySurface
- HEX
- RGB
- HSL
- Gatorade Border GrayBorder
- HEX
- RGB
- HSL
- Gatorade BlackText
- HEX
- RGB
- HSL
- Gatorade Medium GraySecondary text
- HEX
- RGB
- HSL
- Gatorade Muted GrayMuted text
- HEX
- RGB
- HSL
About Gatorade's colors
Gatorade's palette is built around high-contrast, energetic colors that evoke action and refreshment. The orange primary is distinctive and instantly recognizable.
Orange and black create strong contrast for visibility.
White and gray tones balance and support the bold colors.
Accent colors like blue and green add vibrancy for product differentiation.
Psychology
Orange conveys energy, enthusiasm, and movement, aligning with athletic performance. Black and white provide clarity and authority, while accent colors suggest variety and refreshment.
Evolution
Gatorade's core orange and black palette has remained stable for decades, reinforcing brand recognition. Minor adjustments to accent and neutral tones have occurred to modernize digital and packaging applications.
Where Gatorade uses each color
- Primary
Gatorade Orange is used on the lightning bolt logo, key buttons, and packaging highlights.
- Secondary
Gatorade Black appears in the logo, navigation bars, and text.
- Accent
Gatorade White is used for backgrounds, logo contrast, and secondary text.
- Backgrounds
Gatorade Light Gray is used for website and app backgrounds.
- Text
Gatorade Black and Medium Gray are used for primary and secondary text respectively.
- Semantic
Lime Green, Yellow, Red, and Blue are used for status indicators, flavor cues, and promotional elements.
Gatorade color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Gatorade brand color is orange, with the hex code #FF7F27.
Gatorade Orange is #FF7F27, which is RGB(255, 127, 39). In CMYK, it is approximately 0, 50, 85, 0.
Gatorade uses a range of grays including #F5F5F5 (Light Gray), #E5E5E5 (Surface Gray), #CCCCCC (Border Gray), and #6D6E71 (Medium Gray) for backgrounds and text.
Use Gatorade Orange (#FF7F27) for primary actions and branding, with black and white for contrast and legibility. Accent and semantic colors are reserved for status, flavor, and promotional cues.
The secondary color is Gatorade Black, #231F20, and the accent is Gatorade White, #FFFFFF. 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 Gatorade's colors consistently when it generates UI.
Make something in the spirit of Gatorade
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.