Skip to content
Home » NFL Team Color Codes (HEX/RGB): AFC and NFC Palette Guide

NFL Team Color Codes (HEX/RGB): AFC and NFC Palette Guide

Nfl Team Color Codes Hex Rgb Afc And Nfc Palette Guide

NFL team color codes are more than a design detail. They shape merchandise, social graphics, scoreboards, fan art, print layouts, and digital branding. For anyone building a football-themed page, the first task is simple: use the right HEX and RGB values, and keep the palette consistent across the AFC and NFC.

This guide organizes all 32 NFL teams by conference and lists two widely recognized color anchors for each team. In practice, some teams use extra shades such as metallic silver, white, charcoal, or alternate blues. Still, the pairs below cover the tones most readers, designers, and fans expect to see at a glance on screen and in print.

How NFL team color codes are usually read

HEX values are used in web design and CSS. RGB values are useful for digital graphics, editing software, and screen-based brand work. When a site, poster, or chart looks slightly off, the problem is often not the logo shape but the color match.

Over time, teams have refreshed uniforms, adjusted secondary tones, or cleaned up old shades for modern screens. That is why a clean palette guide matters. A navy that drifts too light or a red that leans too dark can make a team page feel wrong in seconds.

AFC team color codes

The American Football Conference contains 16 teams across four divisions: East, North, South, and West. The table below keeps the structure simple and readable, while still giving enough detail for web use.

DivisionTeamPrimary ColorHEXRGBSecondary ColorHEXRGB
AFC EastBuffalo BillsRoyal Blue#00338DRGB(0, 51, 141)Red#C60C30RGB(198, 12, 48)
AFC EastMiami DolphinsAqua#008E97RGB(0, 142, 151)Orange#FC4C02RGB(252, 76, 2)
AFC EastNew England PatriotsNautical Blue#002244RGB(0, 34, 68)Red#C60C30RGB(198, 12, 48)
AFC EastNew York JetsGreen#125740RGB(18, 87, 64)White#FFFFFFRGB(255, 255, 255)
AFC NorthBaltimore RavensPurple#241773RGB(36, 23, 115)Black#000000RGB(0, 0, 0)
AFC NorthCincinnati BengalsOrange#FB4F14RGB(251, 79, 20)Black#000000RGB(0, 0, 0)
AFC NorthCleveland BrownsBrown#311D00RGB(49, 29, 0)Orange#FF3C00RGB(255, 60, 0)
AFC NorthPittsburgh SteelersGold#FFB612RGB(255, 182, 18)Black#101820RGB(16, 24, 32)
AFC SouthHouston TexansDeep Steel Blue#03202FRGB(3, 32, 47)Battle Red#A71930RGB(167, 25, 48)
AFC SouthIndianapolis ColtsBlue#002C5FRGB(0, 44, 95)Gray#A2AAADRGB(162, 170, 173)
AFC SouthJacksonville JaguarsTeal#006778RGB(0, 103, 120)Gold#9F792CRGB(159, 121, 44)
AFC SouthTennessee TitansNavy#0C2340RGB(12, 35, 64)Titans Blue#4B92DBRGB(75, 146, 219)
AFC WestDenver BroncosOrange#FB4F14RGB(251, 79, 20)Navy#002244RGB(0, 34, 68)
AFC WestKansas City ChiefsRed#E31837RGB(227, 24, 55)Gold#FFB81CRGB(255, 184, 28)
AFC WestLas Vegas RaidersBlack#000000RGB(0, 0, 0)Silver#A5ACAFRGB(165, 172, 175)
AFC WestLos Angeles ChargersPowder Blue#0080C6RGB(0, 128, 198)Gold#FFC20ERGB(255, 194, 14)

NFC team color codes

The National Football Conference has its own visual habits. Blues and reds stay common, but the NFC palette also leans into darker greens, burgundy, purple, and a few instantly recognizable metallic accents.

DivisionTeamPrimary ColorHEXRGBSecondary ColorHEXRGB
NFC EastDallas CowboysNavy#041E42RGB(4, 30, 66)Silver#869397RGB(134, 147, 151)
NFC EastNew York GiantsBlue#0B2265RGB(11, 34, 101)Red#A71930RGB(167, 25, 48)
NFC EastPhiladelphia EaglesMidnight Green#004C54RGB(0, 76, 84)Silver#A5ACAFRGB(165, 172, 175)
NFC EastWashington CommandersBurgundy#5A1414RGB(90, 20, 20)Gold#FFB612RGB(255, 182, 18)
NFC NorthChicago BearsNavy#0B162ARGB(11, 22, 42)Orange#C83803RGB(200, 56, 3)
NFC NorthDetroit LionsHonolulu Blue#0076B6RGB(0, 118, 182)Silver#B0B7BCRGB(176, 183, 188)
NFC NorthGreen Bay PackersGreen#203731RGB(32, 55, 49)Gold#FFB612RGB(255, 182, 18)
NFC NorthMinnesota VikingsPurple#4F2683RGB(79, 38, 131)Gold#FFC62FRGB(255, 198, 47)
NFC SouthAtlanta FalconsRed#A71930RGB(167, 25, 48)Black#000000RGB(0, 0, 0)
NFC SouthCarolina PanthersBlue#0085CARGB(0, 133, 202)Black#101820RGB(16, 24, 32)
NFC SouthNew Orleans SaintsOld Gold#D3BC8DRGB(211, 188, 141)Black#101820RGB(16, 24, 32)
NFC SouthTampa Bay BuccaneersRed#D50A0ARGB(213, 10, 10)Pewter#B1BABFRGB(177, 186, 191)
NFC WestArizona CardinalsCardinal Red#97233FRGB(151, 35, 63)Gold#FFB612RGB(255, 182, 18)
NFC WestLos Angeles RamsRoyal Blue#003594RGB(0, 53, 148)Sol#FFA300RGB(255, 163, 0)
NFC WestSan Francisco 49ersRed#AA0000RGB(170, 0, 0)Gold#B3995DRGB(179, 153, 93)
NFC WestSeattle SeahawksNavy#002244RGB(0, 34, 68)Action Green#69BE28RGB(105, 190, 40)

Palette patterns across the league

Some patterns become obvious once all 32 teams sit in one place. Blue is the league’s most common anchor. It appears in several forms: royal blue, navy, powder blue, nautical blue, and the lighter Honolulu Blue used by Detroit. Red is just as visible, though it changes mood from the Chiefs’ bright red to the darker burgundy used by Washington.

Black works differently. For some teams, it is the visual base, as with the Raiders. For others, it acts as a sharp support tone that tightens the palette without taking over, which is exactly what happens with the Steelers, Panthers, Saints, and Falcons.

Gold also splits into more than one family. The Packers, Chiefs, and Steelers lean toward a brighter athletic gold, while the Saints and 49ers use warmer metallic-looking tones. That difference matters when you are building comparison charts or trying to match fan-facing graphics across several clubs on one page.

Using NFL HEX and RGB codes on a website

For web pages, HEX is the most practical format. A simple CSS rule can control headings, badges, tables, borders, and hover states. RGB becomes handy when you need overlays, gradients, or transparency in design software.

It also helps to avoid color overload. A team page usually looks cleaner when one hue leads, one supports, and neutrals carry the body text. A small accent like a controlled blue highlight can improve reading flow, but too many branded colors on one page make the layout feel noisy.

Example CSS idea

A Bills-themed button, for example, might use #00338D for the background and #C60C30 for a thin border or hover accent. A Raiders-themed card can stay almost monochrome, with #000000 and #A5ACAF doing nearly all the visual work. That kind of restraint usually looks better than forcing every team shade into the same component.

Why a conference-based palette guide helps

Sorting teams by conference does more than tidy the page. It mirrors how many fans already think about the league. AFC and NFC groupings shape playoff talk, rivalries, broadcast graphics, and comparison content. When the palette guide follows that same structure, readers find teams faster and the page gains a more natural information flow.

That structure also supports semantic SEO. Search engines can read the hierarchy more clearly when team colors, conference names, divisions, and code formats appear in the same organized section rather than in one long unbroken list.

References

When the colors are right, the page feels right too, and in a league where fans notice every shade, that small layer of accuracy is often what makes a team guide feel finished.