Free · local in your browser
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.
- 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.
- 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.
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.
/* Rarity palette from writeide.com */
:root {
--rarity-common: #9ca3af;
--rarity-uncommon: #22c55e;
--rarity-rare: #3b82f6;
--rarity-epic: #a855f7;
--rarity-legendary: #f97316;
--rarity-mythic: #ec4899;
}Use this palette in WriteIDE
Download a rarity-set file for the app. The JSON tab above is a generic palette format; use this dedicated file for WriteIDE Import.
In WriteIDE 0.7.2, open a project, then go to World → Rarity Sets → Manage Rarity Tiers → Share set → Import and choose the saved .writeide-rarities.json file. Import updates matching tier names and adds new names without deleting existing tiers.
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.
| Tier | Hex | Colour |
|---|---|---|
| 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.
Good to know
Questions about this tool
What colours does it start with?
The six-step ladder WriteIDE itself uses: Common grey, Uncommon green, Rare blue, Epic purple, Legendary orange, and Mythic pink, with their exact hex values. Edit any tier's name or colour.
What does the contrast and colour-blindness check show?
It measures each tier against a dark or light ground and flags any below a readable ratio. The colour-blindness view shows where tiers collapse together. The tier word is printed beside every item either way.
What formats can I copy?
CSS variables, JSON, Tailwind config, or a plain hex list. The palette export is generic, so it works in any project.
How do I bring a palette into WriteIDE?
Download the WriteIDE rarity set, then in WriteIDE open a project and go to World, Rarity Sets, Manage Rarity Tiers, Share set, Import. Import updates tiers with matching names and adds new ones without deleting any you already have.