Design Atlas
한국어
◆ Game UI & game feel

Loot Rarity Tiers

아이템 등급 색 (루트 레어리티)

A color ladder — common through legendary — applied to item borders and glow so value reads instantly, without reading a word of text.

Also known as: 레어도 색상Rarity colors아이템 등급
···
html
<div class="lrgrid" id="grid"></div>
css
.lrgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(6px,2.4vmin,12px);width:min(92%,460px)}
.lritem{position:relative;aspect-ratio:1;border-radius:9px;background:var(--surface);border:2px solid var(--tier,var(--line));display:grid;place-items:center;overflow:hidden}
.lritem::before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,color-mix(in srgb,var(--tier,var(--line)) 30%,transparent),transparent 60%)}
.lricon{width:38%;height:38%;border-radius:5px;background:var(--tier,var(--muted));position:relative;z-index:1}
.lrlabel{position:absolute;bottom:3%;left:0;right:0;text-align:center;font:700 clamp(6px,1.8vmin,8px) monospace;color:var(--muted);z-index:1}
.t-common{--tier:var(--muted)}
.t-uncommon{--tier:var(--accent-3)}
.t-rare{--tier:var(--accent)}
.t-epic{--tier:#a259ff}
.t-legendary{--tier:#f5a623;animation:lrpulse 1.6s ease-in-out infinite}
@keyframes lrpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,#f5a623 55%,transparent)}50%{box-shadow:0 0 14px 4px color-mix(in srgb,#f5a623 55%,transparent)}}
js
const tiers=[
  ['common','일반'],['uncommon','고급'],['rare','희귀'],['epic','영웅'],['legendary','전설'],
  ['common','일반'],['uncommon','고급'],['rare','희귀'],['epic','영웅'],['legendary','전설'],
];
const grid=document.getElementById('grid');
tiers.forEach(function(pair){
  const div=document.createElement('div');
  div.className='lritem t-'+pair[0];
  div.innerHTML='<div class="lricon"></div><div class="lrlabel">'+pair[1]+'</div>';
  grid.appendChild(div);
});
const legendaries=[...grid.querySelectorAll('.t-legendary')];
let i=0;
setInterval(function(){
  legendaries.forEach(function(el){ el.style.animationPlayState='running'; });
  const el=legendaries[i%legendaries.length];
  el.style.transform='scale(1.08)';
  setTimeout(function(){ el.style.transform='scale(1)'; }, 260);
  i++;
}, 1000);

Rarity colors are one of the strongest cross-genre conventions in games. Roughly gray (common) → green (uncommon) → blue (rare) → purple (epic) → orange/gold (legendary), climbing in saturation and brightness together. Players judge whether an item is worth picking up from the border color alone, before reading a word of its description.

Higher tiers usually need more than a static color difference, so animation gets layered on — a soft pulsing glow, light travelling around the border, a shimmer sweep, all common on legendaries. It's the same logic as the Von Restorff effect — standing out is what makes something memorable — so the rarer the item, the more it should sensorially insist on that rarity.

Relying on color alone locks out colorblind players, so a second, non-color signal — icon shape, star count, border thickness — should carry the same information. And rarity colors are a promise that can't change mid-game: rewrite what a color means partway through and every bit of intuition players built up breaks.

When to use

Loot, gear, cards, currency — any collectible with multiple tiers of value.