Tier list colours and what they mean
Design · 4 min read
Tier list colours run from red at the top through orange, yellow and green to blue at the bottom. The order comes from heat map convention, where red reads as hot or extreme and blue reads as cool or low.
Nobody voted on the tier list palette. It settled by copying. Early charts used a red to blue gradient because that is what spreadsheet conditional formatting produced, and once thousands of images looked like that, anything else started to look wrong.
The standard palette
| Tier | Colour | Hex |
|---|---|---|
| S | Red | #FF6B6B |
| A | Orange | #FFA24C |
| B | Yellow | #FFD84D |
| C | Green | #9BDB5A |
| D | Blue | #57C7E8 |
| E | Purple | #9C8BEF |
| F | Pink | #E58BC8 |
Those are the values this site uses by default, and they are close to what most tier list images look like. The important part is not the exact hex but the direction of travel: warm at the top, cool at the bottom, and enough contrast between neighbours that nobody has to squint.
Why red means best here
In most contexts red means stop or danger, so putting it at the top looks backwards. Tier lists inherited the convention from heat maps, where red marks the extreme end of a scale rather than a bad outcome. Once you see the chart as a heat map rather than a traffic light, the order makes sense.
Keeping it readable
Around one in twelve men has some form of red green colour blindness, and the standard palette is exactly the kind that causes trouble: the red of S tier and the green of C tier can look almost identical. There is a simple fix that costs nothing.
- Always keep the row labels. Letters carry the ranking even when colours fail.
- Vary lightness as well as hue, so S tier is noticeably darker or lighter than C tier.
- If you want to be safe, use a blue to orange scale instead of red to green.
- Never use colour alone to mean something extra, such as a red border for a favourite.
Changing the colours
In the tier list maker, each row has a small colour dot on the right. Click it and pick from twelve swatches, including a light grey and a dark grey for charts that are mostly text. Colours are saved into the exported image, so what you see is what gets posted.
If you are renaming rows as well as recolouring them, what does S tier mean covers the labels people expect to see.