색감 매칭 오차 계산 공식과 RGB 유클리드 거리 정답률 판정 가이드

감으로 색을 맞추면 생기는 문제

디자이너나 개발자가 목표 색상에 맞춰 UI 컬러를 조정할 때, 육안으로는 두 색이 비슷해 보여도 실제 RGB 수치는 꽤 차이가 나는 경우가 흔합니다. 특히 톤온톤(Tone-on-Tone) 배색처럼 명도·채도 차이가 미세한 조합을 다룰 때는 감각만으로 오차를 판단하기 어렵습니다. 색 차이를 숫자로 확인할 수 있는 기준이 있으면 이런 판단을 좀 더 객관적으로 할 수 있습니다.

RGB 거리 공식으로 색상 오차를 계산하는 방법

컴퓨터 그래픽스에서는 두 색상 C₁(R₁, G₁, B₁)과 C₂(R₂, G₂, B₂) 사이의 차이를 3차원 RGB 공간에서의 유클리드 거리(Euclidean Distance)로 계산합니다. 이 거리값을 d라고 하면 수식으로 표현했을 때 다음과 같습니다. (참고: 색차를 뜻하는 ΔE는 보통 CIE Lab 색공간 기반 공식(CIE76/94/2000)을 가리키는 용어이며, 아래 d는 RGB 공간에서의 단순 유클리드 거리로 ΔE와는 다른 값입니다.)

d = √((R₂ - R₁)² + (G₂ - G₁)² + (B₂ - B₁)²)

RGB 공간에서 나올 수 있는 최대 오차 거리는 R, G, B 각각의 차이가 255일 때이며, 계산하면 √(255² + 255² + 255²) ≈ 441.67 입니다. 이 최댓값을 기준으로 삼으면 오차 거리를 0~100 사이의 일치율(%)로 변환할 수 있습니다.

일치율(%) = max(0, 100 × (1 − d ÷ 441.67))

이 계산을 자바스크립트 함수로 옮기면 다음과 같은 구조가 됩니다.

function calculateColorMatchScore(targetRgb, userRgb) {
  const dr = targetRgb.r - userRgb.r;
  const dg = targetRgb.g - userRgb.g;
  const db = targetRgb.b - userRgb.b;

  const distance = Math.sqrt(dr * dr + dg * dg + db * db);
  const maxDistance = 441.673;

  const accuracy = Math.max(0, 100 * (1 - distance / maxDistance));
  return Math.round(accuracy); // 정수로 반올림 (예: 87%, 소수점 표시 없음)
}

매번 이 공식을 손으로 계산하는 대신, 화면에 제시되는 목표 색상을 보고 슬라이더로 맞춰보면서 바로 일치율을 확인하는 쪽이 더 빠릅니다. 직접 계산하지 않고 바로 확인해보고 싶다면 저희 도구로 확인하기.

직접 해보기 →

색 감각 훈련을 실무에 적용할 때 참고할 점

항목

설명

톤온톤 감각 잡기

슬라이더를 한 번에 세 개 다 움직이기보다, R 값을 먼저 목표에 맞춘 뒤 G, B 순서로 하나씩 좁혀가면 오차 폭을 더 빠르게 줄일 수 있습니다.

명암비 체크

배경색과 텍스트색의 명암비가 WCAG 기준 4.5:1 이상을 유지하는지 함께 확인하면 가독성과 디자인을 같이 챙길 수 있습니다.

목표 일치율

게임에서 슬라이더 조절로 95% 이상의 일치율을 반복해서 만들어보는 연습을 하면 색 오차를 감각적으로 인지하는 능력이 늘어납니다.

참고 이론으로 RGB 수치를 외우기보다, 화면에 제시되는 목표 색상을 슬라이더로 맞추면서 실제 오차를 눈으로 확인하는 연습이 감각을 익히는 데 더 효과적입니다.

정리

색상 오차는 RGB 값 사이의 유클리드 거리로 계산할 수 있고, 이를 정규화하면 0~100 사이의 일치율로 나타낼 수 있습니다. 목표 일치율을 95% 이상으로 잡고 반복 연습하면 미세한 톤 차이를 구분하는 감각을 기를 수 있습니다. R, G, B 슬라이더를 순서대로 하나씩 좁혀가는 방식은 톤온톤 배색 감각을 잡는 데 유용하고, WCAG 명암비 기준(4.5:1 이상)까지 함께 확인하면 실무에 바로 적용할 수 있는 색 감각을 갖출 수 있습니다.

자주 묻는 질문

색상 일치율 오차 연산은 어떤 공식을 쓰나요?

색상을 RGB 벡터 공간의 한 점으로 보고, 목표 색상과 사용자가 입력한 색상 두 점 사이의 유클리드 거리를 계산합니다. 두 색상의 차이가 0에 가까울수록 일치율은 100%에 가까워집니다.

게임에서 등급 피드백은 어떻게 확인하나요?

슬라이더로 색상을 맞춘 뒤 제출하면 목표 색상과의 정밀 오차율(%)을 분석해 보여주고, 오차 범위별 등급과 그동안의 맞춤 이력도 함께 확인할 수 있습니다.

최근 맞춤 기록은 몇 개까지 확인할 수 있나요?

직전에 제출한 매칭 결과가 최대 10개까지 화면 하단에 누적되어, 각 회차의 목표 색상과 내가 맞춘 색상, 그리고 그때의 일치율(%)을 나란히 비교해 볼 수 있습니다.