컬러 매칭 시스템

Color matching system

"이 번호의 색"이라고 정해두면 종이·재질·프린터가 달라도 항상 같은 색이 나오도록 만든 색상 번호 체계.

다른 이름: 팬톤컬러 넘버링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}

화면의 RGB 값이나 인쇄의 CMYK 비율은 "이 값을 넣으면 이런 색이 나온다"는 보장이 약합니다. 모니터마다 표시가 다르고, 같은 CMYK 비율도 종이 재질·인쇄기·잉크 제조사에 따라 결과가 달라지기 때문입니다.

그래서 업계는 제조사가 미리 조색해 번호를 붙인 "기준 색상집"을 공용 사전처럼 씁니다. 디자이너가 "이 색은 번호 21"이라고 지정하면, 인쇄소는 화면 값을 눈대중으로 맞추는 대신 그 번호에 해당하는 이미 조색된 잉크(또는 재현 기준)를 그대로 씁니다. 종이든 원단이든 플라스틱이든, 같은 번호는 같은 색을 목표로 재현됩니다.

브랜드 가이드라인에 "주 색상: RGB #E4572E, CMYK 0/70/85/0"뿐 아니라 매칭 시스템 번호까지 함께 적어두는 이유가 이것입니다 — 화면·인쇄·굿즈 제작 등 매체가 바뀌어도 색이 같은 번호를 기준 삼아 일관되게 유지됩니다.

언제 쓰나

브랜드 색을 여러 매체(인쇄물, 웨어러블, 사인물)에 걸쳐 정확히 맞춰야 할 때 브랜드 가이드에 매칭 번호를 함께 명시하세요. 화면용 디자인만 한다면 RGB/HEX만으로 충분합니다.