Skip to content

Methodology

Transparency builds trust. This page explains exactly how our color conversion tools work, how our test patterns are designed, and what standards we follow. We believe you should understand the tools you're using, especially when print quality and color accuracy matter.

Color Conversion Algorithms

Lossless Conversions

Some color conversions are mathematically exact — no information is lost. These include:

  • RGB to HEX / HEX to RGB: Direct mathematical mapping. Each RGB channel (0–255) converts to a two-digit hexadecimal value. The conversion is perfectly reversible.
  • RGB to HSL / HSL to RGB: Standard trigonometric conversion based on the RGB color model. Hue is expressed in degrees (0–360), saturation and lightness as percentages.
  • RGB to HSV / HSV to RGB: Similar to HSL but using Value (brightness) instead of Lightness. Both represent the same underlying color data.

Approximate Conversions

Conversions between fundamentally different color models involve approximation:

  • RGB to CMYK / CMYK to RGB: We use the standard formulaic conversion. CMYK is a subtractive model (ink on paper) while RGB is additive (light on screen), so the mapping is an approximation. We use the conventional formula: K = 1 – max(R, G, B), then derive C, M, Y relative to K. This does not account for printer-specific ICC profiles, but provides a reliable general-purpose result.
  • CMYK to HEX / HEX to CMYK: Two-step conversion via RGB as the intermediary (CMYK → RGB → HEX and vice versa).

Nearest-Match Conversions (Pantone, RAL, NCS)

Pantone, RAL, and NCS are proprietary or standardized color systems with fixed palettes. There is no mathematical formula to convert between these and RGB/CMYK — instead, we use a nearest-match algorithm:

  1. Color databases. We maintain curated databases of Pantone (65 colors), RAL Classic (71 colors), and NCS (46 colors), each stored with its official name and reference RGB value.
  2. Distance calculation. For each input color, we compute the Euclidean distance in RGB space to every color in the target database: √((R₁−R₂)² + (G₁−G₂)² + (B₁−B₂)²)
  3. Ranked results. We return the closest matches sorted by distance, with a percentage match score. A distance of 0 means an exact match; larger distances mean the match is approximate.
  4. Transparency. Every nearest-match result displays both the matched color swatch and the distance score, so you can judge the quality of the match yourself.

This approach is well-understood and widely used in the industry. For critical color work (brand identity, packaging, industrial applications), we recommend verifying against physical swatch books, as on-screen representations of Pantone, RAL, and NCS colors are inherently approximate.

Test Pattern Design

Our 13 printer test pages are designed to isolate and reveal specific print quality issues. Here is the reasoning behind each pattern type:

Precision Requirements

  • All colored elements use the print-color-adjust: exact CSS property (with vendor prefixes) to force browsers to print background colors faithfully rather than optimizing for ink savings.
  • Pixel-precise measurements on the ruler test page use the standard conversion: 1 mm ≈ 3.7795 px at 96 DPI. Users must print at 100% scale for accurate measurements.
  • Test patterns are pure HTML/CSS/SVG — no raster images — so they scale cleanly to any print resolution without pixelation.

What Each Pattern Tests

  • Black & White: Grayscale gradient (11 steps), checkerboard (ink bleed detection), text sharpness (8pt–28pt).
  • Color: Six solid bars (R, G, B, C, M, Y), rainbow gradient (banding detection), 20-color grid (color fidelity).
  • CMYK: Per-channel intensity strips (10 steps each), composite mixes, registration marks (channel alignment).
  • Nozzle Check: 120 alternating 1px lines per channel — any gap reveals a clogged nozzle.
  • Alignment: 20×20 precision grid, crosshair targets, diagonal lines (skew detection), mm rulers.
  • Photo Quality: Skin tone gradient, fine-detail checkerboard (4px), shadow/highlight ramps, Macbeth-like 24-color checker.
  • Ruler & Dimension: CM and inch rulers, 1cm measurement grid, 10cm and 1-inch reference lines for verifying print scaling accuracy.

Automated Testing

Our color conversion library includes an automated test suite (11 tests) that runs on every build. Tests verify:

  • RGB ↔ HEX roundtrip accuracy (lossless)
  • RGB ↔ HSL/HSV roundtrip accuracy
  • RGB ↔ CMYK conversion against known reference values
  • Nearest-match results for Pantone, RAL, and NCS databases
  • Edge cases (pure black, pure white, out-of-range inputs)

Run the test suite: npx tsx src/lib/color/test.ts

Known Limitations

  • No ICC profile support. Our CMYK conversions use the generic formulaic method, not printer-specific ICC profiles. For professional prepress work, use a color management system with the correct ICC profile for your printer and paper combination.
  • Limited color databases. Our Pantone (65 colors), RAL (71 colors), and NCS (46 colors) databases cover the most commonly used colors but not the full catalogs.
  • Screen vs. print. All on-screen color previews are approximations. The same color value will appear differently on different monitors depending on calibration, color profile, and ambient lighting.

For more about our content standards, see the editorial policy. For questions about methodology, please contact us.