Methodology
Hue Codex image tools run in the browser. They use canvas pixels for sampling, extraction, and duotone rendering, with privacy and approximation caveats made visible.
Hue Codex processes user images locally in browser canvas, samples exact or averaged pixels, extracts palettes through bucketed color aggregation and Delta E diversity checks, and renders duotone PNG output from canvas pixels.
These badges identify which parts of this methodology are standards-backed, draft-track, Hue Codex-specific, approximate, or dependent on browser behavior.
This separates standards-based formulas from Hue Codex implementation decisions, product heuristics, and known limitations for this methodology.
Formula, threshold, syntax, or data behavior taken from a cited standard or standards-backed source.
How Hue Codex chooses to parse, normalize, round, export, or sequence calculations.
Product rankings, bands, labels, suggestions, or role hints that are useful guidance but not external standards.
Caveats, edge cases, browser dependencies, approximations, or contexts the method does not prove.
Image files selected in Hue Codex are loaded into the browser for canvas processing. Palette extraction, pixel sampling, and duotone preview calculations happen client-side.
Hue Codex does not need to upload the selected image to calculate these results. Browser limitations, cross-origin image rules, and user-selected files still determine whether canvas pixel data can be read.
Image Eyedropper maps pointer coordinates to the rendered image canvas, reads the selected pixel area, and returns HEX, RGB, HSL, OKLCH, contrast, and export metadata.
A sample size of one pixel reports the exact canvas pixel. Larger sample sizes average nearby pixels and can smooth JPEG artifacts, antialiasing, and texture noise.
Image Palette Extractor scans the sampled canvas at a quality-dependent pixel step. Pixels with alpha below 0.5 are skipped. Partially transparent pixels are composited over the Hue Codex paper color before bucketing.
Colors are bucketed by rounded RGB channel groups, with optional neutral merging. Candidate buckets are ranked by coverage and focus score, then filtered with Delta E diversity so near duplicates do not crowd out stronger palette entries.
Duotone Generator estimates source luminance from RGB channels, maps that luminance through contrast and midtone controls, then mixes between the selected shadow and highlight colors. Intensity blends the duotone result back toward the original pixel.
Downloaded PNG output is rendered from source image dimensions when a source image is available. CSS duotone output is an approximation for live treatments and may not match the exact PNG pixels.
| Check | Expected behavior |
|---|---|
| Fully transparent pixels | Skipped in palette extraction |
| Partial alpha pixels | Composited over paper color before bucketing |
| One-pixel eyedropper | Reports the canvas pixel at the mapped coordinate |
| Duotone intensity 0 percent | Keeps the source image colors |
| Duotone intensity 100 percent | Uses the mapped duotone colors |
These steps apply after the browser has decoded the image and exposed canvas pixels. Browser image decoding and color management can still change the input pixels.
quality presets:
quick: maxDimension 420, pixelStep 5, bucketSize 36, neutralSpread 18, neutralStep 28, diversityDelta 7
balanced: maxDimension 640, pixelStep 3, bucketSize 28, neutralSpread 16, neutralStep 22, diversityDelta 9
detailed: maxDimension 860, pixelStep 2, bucketSize 20, neutralSpread 12, neutralStep 16, diversityDelta 11
extract_palette(canvas, count, quality, focus, sort, merge_neutrals):
for y from 0 to canvas.height step quality.pixelStep:
for x from 0 to canvas.width step quality.pixelStep:
r, g, b, a8 = canvas_pixel(x, y)
alpha = a8 / 255
if alpha < 0.5: continue
# Composite partial alpha over Hue Codex paper #FBFAF5.
r = round(r * alpha + 251 * (1 - alpha))
g = round(g * alpha + 250 * (1 - alpha))
b = round(b * alpha + 245 * (1 - alpha))
spread = max(r,g,b) - min(r,g,b)
midpoint = (max(r,g,b) + min(r,g,b)) / 2
if merge_neutrals and spread <= quality.neutralSpread:
key = "neutral-" + round(midpoint / quality.neutralStep) * quality.neutralStep
else:
key = round(r / bucketSize) * bucketSize,
round(g / bucketSize) * bucketSize,
round(b / bucketSize) * bucketSize
bucket[key].count += 1
bucket[key].r += r; bucket[key].g += g; bucket[key].b += b
candidates = average each bucket into HEX
candidates = top max(80, count * 16) by bucket count
ranked = sort candidates by focus_score(entry, focus), then count
diversity = focus == dominant ? max(4, quality.diversityDelta - 3) : quality.diversityDelta
selected = []
for entry in ranked:
if selected is empty or min(delta_e_76(entry, selected_entry)) >= diversity:
selected.append(entry)
if selected length == count: break
if selected has fewer than count:
append highest ranked non-duplicate HEX entries
return selected sorted by requested sort mode and labeled by role heuristicfocus_score(entry, focus):
coverage = min(100, entry.coveragePercent * 7)
saturation = entry.hsl.s
lightness = entry.hsl.l
middleLightness = 100 - abs(lightness - 54)
surfaceBonus = entry.isNeutral and lightness >= 82 ? 28 : 0
inkBonus = entry.isNeutral and lightness <= 24 ? 28 : 0
accentBonus = saturation >= 36 and 32 <= lightness <= 72 ? 18 : 0
if focus == vivid:
return coverage*0.55 + saturation*1.25 + entry.oklch.c*140 + middleLightness*0.16
if focus == balanced:
return coverage*0.9 + min(saturation,72)*0.52 + middleLightness*0.28
if focus == ui:
return coverage*0.85 + surfaceBonus + inkBonus + accentBonus + middleLightness*0.18
# dominant
return coverage*1.45 + min(saturation,70)*0.18These vectors validate the deterministic pieces of image processing once canvas pixels are available. Browser decoding and color management can still affect real uploaded images.
| Input | Expected output | Notes |
|---|---|---|
| #FF0000 at 50% alpha over paper #FBFAF5 | #FD7D7B | Partial alpha is composited over the Hue Codex paper color before bucketing |
| Average of one #000000 pixel and one #FFFFFF pixel | #808080 | Averaged channels are rounded to displayable sRGB |
| Duotone shadow #10212B, highlight #4169E1, luminance 0 | #10212B; tone = 0 | Shadow endpoint |
| Duotone shadow #10212B, highlight #4169E1, luminance 0.5 | #294586; tone = 0.5 | Midpoint ramp color |
| Duotone shadow #10212B, highlight #4169E1, luminance 1 | #4169E1; tone = 1 | Highlight endpoint |
| Same duotone settings, luminance 0.5, midtone +20% | #3253AA; tone = 0.7 | Midtone control pushes the midpoint toward the highlight |
These Hue Codex tools link to this methodology because they depend on the formulas, assumptions, limits, or data policy described here.