Beverages
Gatorade Color Codes
Gatorade's mark is the lightning-bolt G, hex near #F2711C for the orange, on black. The Gatorade color codes in Hex, RGB and CMYK can be found below. Researchers at the University of Florida, led by Dr Robert Cade, developed the drink in 1965 for the Gators football team. Its direct rival is Powerade.
Primary colors
What are Gatorade Primary Colors?
Gatorade's primary colors are gatorade orange #F2711C, black #000000, white #FFFFFF.
Gatorade publishes no open hex sheet; these are measured from the current mark.
Gatorade Gatorade Orange
| Hex | #F2711C |
|---|---|
| RGB | 242, 113, 28 |
| HSL | hsl(24, 89%, 53%) |
| CMYK | 0%, 53%, 88%, 5%converted · approximate |
| Pantone | PMS 158 Cnearest match · not published by the brand |
Gatorade Black
| Hex | #000000 |
|---|---|
| RGB | 0, 0, 0 |
| HSL | hsl(0, 0%, 0%) |
| CMYK | 0%, 0%, 0%, 100%converted · approximate |
| Pantone | PMS 419 Cnearest match · not published by the brand |
Gatorade White
| Hex | #FFFFFF |
|---|---|
| RGB | 255, 255, 255 |
| HSL | hsl(0, 0%, 100%) |
| CMYK | 0%, 0%, 0%, 0%converted · approximate |
| Pantone | PMS 656 Cnearest match · not published by the brand |
Gatorade Hex Color Codes
Gatorade hex color codes are #F2711C for gatorade orange, #000000 for black and #FFFFFF for white.
| Color | Hex |
|---|---|
| Gatorade Orange | #F2711C |
| Black | #000000 |
| White | #FFFFFF |
Gatorade RGB Color Codes
Gatorade RGB color codes are 242, 113, 28 for gatorade orange, 0, 0, 0 for black and 255, 255, 255 for white. Reach for RGB when a tool wants channel numbers or a CSS alpha value.
| Color | RGB |
|---|---|
| Gatorade Orange | rgb(242, 113, 28) |
| Black | rgb(0, 0, 0) |
| White | rgb(255, 255, 255) |
Gatorade HSL Color Codes
Gatorade HSL color codes are 24, 89%, 53% for gatorade orange, 0, 0%, 0% for black and 0, 0%, 100% for white. Change the third value for a lighter or darker version without moving the hue.
| Color | HSL |
|---|---|
| Gatorade Orange | hsl(24, 89%, 53%) |
| Black | hsl(0, 0%, 0%) |
| White | hsl(0, 0%, 100%) |
Gatorade CMYK Color Code
Gatorade CMYK color codes are conversions from the hex, because the brand publishes none. Check a printed proof before a full run.
| Color | CMYK |
|---|---|
| Gatorade Orange | 0%, 53%, 88%, 5% |
| Black | 0%, 0%, 0%, 100% |
| White | 0%, 0%, 0%, 0% |
Gatorade Pantone Color Codes
Gatorade Pantone color codes are nearest matches by color distance, not brand specs. The table shows the closest swatch for every color.
| Color | Nearest Pantone |
|---|---|
| Gatorade Orange | PMS 158 C |
| Black | PMS 419 C |
| White | PMS 656 C |
Logo
Gatorade Logo Colors
Gatorade logo colors are orange and black, the bolt cut through the G.
Gatorade Logo Colors Palette
What the Gatorade Logo Colors Mean?
The Gatorade logo colors carry the University of Florida into the bottle. Orange is one of the Gators' team colors, the brand is named for them, and the lightning bolt through the G is meant to stand for a fast return of energy and electrolytes. Black gives the mark its weight on a sweaty gym cooler.
Gatorade Logo Color History
Gatorade logo color history keeps orange from the team-colored 1970 label. The bolt arrived in 1973, the wordmark was dropped in favor of the lone G mark in the 2000s, and the orange has held throughout.
Gatorade Logo Fonts
Gatorade logo fonts are a custom heavy italic sans, not for sale. A bold sloped grotesque is the closest match.
Gatorade Logo JPG
Gatorade logo in JPG. No transparency, so it is flattened onto white. Safe for documents and slide decks.
Gatorade Logo PNG
Gatorade logo in PNG, with a transparent background. Use it over a colored surface.
Gatorade Logo WebP
Gatorade logo in WebP. Same transparency as the PNG at about a third of the file size.
Gatorade Color Code Shades
Gatorade color code shades step evenly from the primary toward black, for hover states, borders and shadows.
These are interface steps, not Gatorade paint or trim names.
In code
Using the Gatorade palette
CSS custom properties
:root {
--gatorade-gatorade-orange: #F2711C;
--gatorade-black: #000000;
--gatorade-white: #FFFFFF;
}Contrast against white
| Gatorade Orange | 2.94:1AA × |
|---|---|
| Black | 21.00:1AA ✓ |
| White | 1.00:1AA × |
Brand colors are chosen for recognition, not for legibility. A failing value here is normal. It means use it as a fill, not as text.