Skip to main content
colorscope

Tolerance

Tolerance is a small module with an important job: it turns a user-facing 0-1 slider into a perceptual threshold that works well for OKLab matching.

Slider position0.45
Threshold
0.111
Interpretation
related
Typical use
Broad browse

Near neutrals

#7f8f6a
#889178

OKLab distance

0.024

Within threshold

Related terracottas

#c2704a
#b06040

OKLab distance

0.053

Within threshold

Warm vs cool accent

#c2704a
#335f99

OKLab distance

0.259

Outside threshold

Deep neutrals

#303030
#4b2a23

OKLab distance

0.054

Within threshold
import { toleranceToThreshold } from "colorscope/tolerance";

Function

toleranceToThreshold

function toleranceToThreshold(tolerance: number): number

The mapping is intentionally non-linear so the strict end of the slider has more control.

toleranceToThreshold(0);    // 0.02
toleranceToThreshold(0.45); // 0.089...
toleranceToThreshold(1);    // 0.18

Why it exists

Raw distance thresholds are too technical for most users. A tolerance slider is much easier to reason about, but it still needs to map back to values that mean something in perceptual color space.

Rough interpretation:

  • ~0.02: almost identical
  • ~0.05: close / same family
  • ~0.10: related but looser
  • ~0.15+: broad browsing

Typical usage

import { computeSearchTarget } from "colorscope/search";
import { toleranceToThreshold } from "colorscope/tolerance";

const target = computeSearchTarget({ state });
const threshold = toleranceToThreshold(uiTolerance);