Tier List Maker

About Tier List Maker

Drag images or text items into rows such as S, A, B, C, D and F to build a ranking, then export it as a PNG or share it as a link. Images can come from a file picker, drag and drop, or a straight paste with Ctrl+V, and you can add text-only items for things that have no picture.

A tier list is not a numbered ranking. Order inside a row barely matters; you decide which band each thing belongs to, and that stays manageable even with thirty or fifty items where a strict 1-to-50 ranking would stall. The price is the eternal argument about the thing sitting on the line between A and B.

Where tier lists came from

Grouping characters into tiers grew out of competitive fighting games. Inverse traces the competitive scene to Street Fighter II (1991) and credits the Tekken 4 community with introducing the internet to the format we know today, pointing to a 2005 forum post that set up labels like "God Tier" and "Mid Tier". The Super Smash Bros. community took the idea further, it spread to other genres such as League of Legends, and eventually it became the YouTube format used to rank fast food, films and everything else.

In fighting games a tier had a fairly objective meaning: how likely a character is to win at high-level play. Most tier lists today are taste, which is fine, but it helps to name the criterion in the title — "best to rewatch" and "best made" produce very different lists. That is why the presets here go beyond S–F to include Masterpiece–Bad, Favorite–Never, Must have–Skip and Very hard–Very easy.

Row colours and readable labels

The classic palette runs through nine colours from red to violet. If you add more rows than the palette has colours, the last colour is repeated in steps 12% darker so extra rows never fall back to plain grey. Pastel, neon, ocean, sunset and monochrome palettes are also available.

For each row label, the tool computes the background's relative luminance — the brightness formula defined in WCAG — and from it works out the contrast ratio of dark text and of white text against it, and uses whichever is higher. That keeps a white label from vanishing on a yellow row, and gives a mid-grey row such as #808080 dark text, which contrasts more than white does.

Where your images live, and how much they shrink

Every image you add is scaled so its longer side is 440 pixels and re-encoded as WebP at quality 0.88 (PNG in browsers that cannot write WebP). The whole list is saved to this browser's storage half a second after you stop editing, and once more when you close the tab.

Browser storage has a per-site quota, so a list with a very large number of images can fail to save. You will see a "storage full" notice; the list on screen is intact, but a reload would return to the last successful save. For big projects, save a JSON file — it also moves the list to another device intact.

Undo remembers the last 60 steps.

How share links work

Copy share link serialises the list to JSON, compresses it with the browser's built-in deflate stream and puts the result after the # in the URL. The part after # is never sent to a web server, so a link of up to 7,000 characters involves no server at all.

Images make links long quickly. Past 7,000 characters the tool first re-encodes images at 96 pixels on the long side and quality 0.6; past 30,000 it drops the images and keeps only text and placement; if even that is too long, no link is made.

When a list will not fit in a link, you can choose server storage instead. It is the only path by which anything you make on this site reaches a server, and it happens only if you answer yes when asked. You pick a retention period of one hour, one day or one year of inactivity, and the clock resets every time someone opens the code.

Exporting a PNG

The PNG is not a screenshot. The tool redraws the list on a canvas: it works out how many cells fit on one line at the board width, wraps rows that overflow, and gives empty rows the height of one cell. Export scale is 1×, 2× or 3× (2× by default), so an 84-pixel cell is drawn at 168 pixels at 2×. Where the browser allows it, you can copy the image straight to the clipboard instead of downloading a file.

Worked examples

How to use it

1. Choose a preset (S–F, stars, taste and so on) and give the list a title.
2. Drop, paste or pick images, and add text items where you need them.
3. Drag items from the pool into the rows.
4. Export a PNG or copy a share link.

Frequently asked questions