Design Atlas
한국어
✎ Graphic, brand & print

Color matching system

컬러 매칭 시스템

A numbering system for colour — name a colour by its number, and it reproduces the same regardless of paper, material, or printer.

Also known as: 팬톤컬러 넘버링Spot color library
···
html
<div class="row">
  <div class="swatch paper"><span class="cap">종이</span></div>
  <div class="swatch coat"><span class="sheen"></span><span class="cap">코팅지</span></div>
  <div class="swatch fabric"><span class="cap">패브릭</span></div>
</div>
<div class="code">No. 021 — 동일 색 목표</div>
css
.row{display:flex;gap:5%;align-items:center;justify-content:center;width:100%;padding-top:6%}
.swatch{position:relative;width:min(78px,22vw);aspect-ratio:1;border-radius:10px;overflow:hidden;background:#3f6b8f;box-shadow:0 0 0 1px var(--line)}
.fabric{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 2px,transparent 2px 4px),repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 2px,transparent 2px 4px)}
.coat .sheen{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.5) 48%,transparent 62%);transform:translateX(-130%);animation:sweep 3.4s ease-in-out infinite}
@keyframes sweep{0%,20%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}
.cap{position:absolute;bottom:6px;left:0;right:0;text-align:center;font:700 9px/1 system-ui,sans-serif;color:rgba(255,255,255,.85)}
.code{margin-top:6%;text-align:center;font:700 11px/1 ui-monospace,monospace;color:var(--muted);letter-spacing:.02em}

An RGB value on screen or a CMYK ratio in print is a weak promise — "enter this number, get this colour" doesn't hold up well, because every monitor displays differently, and the same CMYK ratio prints differently depending on paper stock, press, and ink brand.

So the industry leans on a shared reference: a pre-mixed, numbered colour library maintained by a manufacturer. A designer specifies "this is colour No. 21," and instead of eyeballing a screen value, the print shop pulls the ink (or reproduction standard) already mixed to match that number — on paper, fabric, or plastic alike, the same number targets the same colour.

That's why brand guidelines list a matching-system number alongside "Primary: RGB #E4572E, CMYK 0/70/85/0" — as the medium changes from screen to print to merch, the number is the one constant the colour gets measured against.

When to use

Include a matching-system number in brand guidelines whenever a colour needs to stay consistent across print, apparel, and signage. For screen-only design, RGB/HEX alone is enough.