WriteIDEA studio for LitRPG authors
All tools

[ Tool ] · Free and offline

LitRPG Item Rarity Colors

Build a Diablo or World of Warcraft style rarity scheme. Edit each tier's colour, preview it on sample loot, check it reads for colourblind readers, and copy the hex, CSS variables, JSON, or Tailwind. It starts on the palette WriteIDE itself uses.

Rarity colours have to read on a dark reading app and on a light printed page. Switch the ground to see which tiers hold up on each.

Sample loot
  • Rusted DaggerCommon
  • Hunter's LongbowUncommon
  • Frostbite GauntletsRare
  • Stormcaller StaffEpic
  • Ember WarbladeLegendary
  • Worldrender GreataxeMythic

The item name carries the tier colour, the way Diablo and World of Warcraft mark loot. The tier word sits beside it so the rarity is still clear without the colour.

Contrast on the dark ui
  • Common7.29:1Reads clearly
  • Uncommon8.12:1Reads clearly
  • Rare5.03:1Reads clearly
  • Epic4.68:1Reads clearly
  • Legendary6.60:1Reads clearly
  • Mythic5.25:1Reads clearly

A ratio below 3:1 means the colour is hard to read against this ground. That is fine for a swatch, but do not rely on it as the only mark of rarity.

How it reads with colour blindness
Deuteranopia (green-blind)
Common
Uncommon
Rare
Epic
Legendary
Mythic
Protanopia (red-blind)
Common
Uncommon
Rare
Epic
Legendary
Mythic
Tritanopia (blue-blind)
Common
Uncommon
Rare
Epic
Legendary
Mythic

Under deuteranopia, Common and Mythic may be hard to tell apart.

Under deuteranopia, Rare and Epic may be hard to tell apart.

Under protanopia, Rare and Epic may be hard to tell apart.

Under tritanopia, Legendary and Mythic may be hard to tell apart.

Export
/* Rarity palette from writeide.com */
:root {
  --rarity-common: #9ca3af;
  --rarity-uncommon: #22c55e;
  --rarity-rare: #3b82f6;
  --rarity-epic: #a855f7;
  --rarity-legendary: #f97316;
  --rarity-mythic: #ec4899;
}
Image (PNG)

Downloads a labelled rarity card you can post to Reddit, Discord, or X. The tier names are baked in as real text, so it stays readable and colourblind-safe.

The canonical LitRPG rarity colours

Most Western RPGs, from Diablo to World of Warcraft, mark loot with the same six-step colour ladder. These are the exact hex values, and the ones WriteIDE ships with. Load them above to edit or export them.

TierHexColour
Common#9CA3AF
Uncommon#22C55E
Rare#3B82F6
Epic#A855F7
Legendary#F97316
Mythic#EC4899

Rarity should never be colour alone

Roughly one in twelve men and one in two hundred women see colour differently, so a tier told only by its colour is invisible to a real slice of your readers. Green and orange, or blue and purple, can collapse into one shade under red-green colour blindness. The checks above show exactly where that happens in your scheme.

The fix is to always pair the colour with a word. Print the tier name next to the item, or add a short marker like a rank letter, so the rarity survives when the colour does not. That is why the preview here always shows the tier name in text, and it is how WriteIDE renders rarity in stat blocks and the World Bible export.

How to use it

  • Pick a system to start from the Standard palette, metal tiers, F-to-SS ranks, or cultivation grades, then edit any tier.
  • Edit a colour with the swatch picker or by typing a hex value. The name and hex field stay in sync, and an unreadable hex leaves the last good colour in place.
  • Reorder or add tiers with the arrows and the add button, so the ladder runs from lowest rarity at the top to highest at the bottom.
  • Check contrast and colour blindness against a dark app and a light page, then copy the CSS, JSON, Tailwind, or hex, or download the card as a PNG.

WriteIDE does this for your whole book, automatically

This tool handles one at a time. WriteIDE is the desktop studio that tracks LitRPG stats, items, skills, and quests across a whole novel, and keeps them correct at every scene.

Runs in your browser. Nothing you type is sent anywhere, and it keeps working with your network off.
Made with writeide.com
More free tools