Benchmark / 03

Blur and color fields

Experiment construction

How the comparison is built

reference CSS

Author target

Create a reference blur field with explicit color zones, softness, flow, and internal region shape.

candidate CSS

Generate candidates

Ask each candidate to reconstruct the same field in code, then keep only the rendered output for judging.

same viewport

Render equally

Place reference and candidates into the same vertical frame so the outer container never affects the score.

pixel scan

Measure fields

Compare hard color masks, gradient spread, local vector coherence, saturation spread, and grayscale range.

verifier output

Programmatic review

Batch the rows through verifier scores and failure notes, then use human inspection to calibrate the rubric.

Scalable verifiers

Blur coherence + color fields

Blur field sample

Problem

Blur-heavy designs can look plausible while color regions drift, merge, or become uniform haze. The current score checks some of those changes, but cannot tell whether a field moves in the intended direction.

Actually done

Rendered target and candidate CSS, then scored pixels.

Not done yet

No human baseline or production visual evaluator in this score.

Displayed score

Weighted sum minus 0.4 × standard deviation of all seven subscores.

Metric	Wt	Input	How score is calculated	Caveat
Hue placementShows whether magenta, cyan, yellow, green, and purple land in the same parts of the rectangle.	5%	Rendered target and candidate pixels in the same 180 x 225 frame.	For five fixed RGB hues, mask pixels within distance 100; average clamp(1 - centroid distance / (0.38 × max dimension)).	Missing hues use a zero centroid; soft blends near the hard threshold may be misread.
Region scalePenalizes a color field that is too tiny, too dominant, or missing.	30%	Pixel counts in five hard RGB masks (distance < 100).	For each reference hue, compare candidate area to target area: avg min(candidate/reference, reference/candidate).	An absent hue in both images scores 100 here, while a missing hue in only one scores 0.
Internal shapeChecks whether the color region stayed blob-like, diagonal, split, wide, narrow, etc.	5%	One Boolean mask per hue inside the shared rectangle.	For each hue mask: 65% mask IoU + 35% centroid closeness, then average across hues.	Two empty masks receive only 35% shape credit in the original scorer. Hard masks do not measure a true contour.
Softness / falloffScores whether the blur feels similarly soft instead of hard-edged or washed out.	35%	Luminance-gradient strength across the rendered field.	Compare gradient standard deviation: 1 - abs(log(candidate / target)) / log(2.4).	Global gradient spread can miss local edges and over-reward extreme blur.
Blur flowChecks whether neighboring gradients have a similar degree of local alignment.	5%	Normalized grayscale gradient vectors, smoothed with a 5 × 5 Gaussian kernel.	Compare the mean length of each smoothed vector field: clamp(1 - absolute coherence difference).	It discards absolute direction and position: perpendicular fields can score 100.
Bleed controlCatches fields that muddy together or become too evenly blended.	15%	Saturation distribution for the whole rendered field.	Compare HSV saturation standard deviation: clamp(1 - absolute spread difference / 0.22).	This is a global saturation proxy, not a boundary bleed detector.
Range / contrastFlags fields that become too flat to support foreground content.	5%	Luminance distribution for target and candidate renders.	Compare grayscale standard deviation: clamp(1 - absolute spread difference / 55).	This checks visual range only; it does not test real text contrast yet.

Scores use seven metrics with weights [5, 30, 5, 35, 5, 15, 5], then subtract 0.4 × the population standard deviation of the seven scores. These scores need human calibration before use as a reward.

Color + blur rows

Inspect color, blur, and region shape

Magenta cyan corner reference field — Blur target

GPT-6 Astra rendered color field — Hover score

GPT-5.6 Sol rendered color field — Hover score

Claude Opus 5.5 · medium rendered color field — Hover score

Vertical warm flow reference field — Blur target

Three-zone soft field reference field — Blur target

Green cyan split reference field — Blur target

Warm top, cyan base reference field — Blur target

Cyan-left wash reference field — Blur target

Yellow cyan split reference field — Blur target

Magenta blue edge reference field — Blur target

Yellow magenta field reference field — Blur target

Purple green cyan field reference field — Blur target

Interactive score lab

Move the candidate. Watch the score.

Edit the candidate SVG while the reference stays fixed. All seven metrics recalculate in your browser.

The candidate starts with only its radius too small. Drag its center or change one control at a time; reset to repeat the experiment.

Fixed reference with one soft magenta circle — Original reference · fixed

Candidate SVG · edit one circle

Circle color

Radius · reference 72px42pxSoftness9pxOpacity0.9Horizontal position91pxVertical position112px

Live score against reference

—/ 100

Loading reference…

Credit for colors absent from both images100%The benchmark gives these empty masks 35% shape credit. Full credit lets an identical image reach 100. Saved model scores use the 35% setting.

Back to poster dissection Next case study: Layer retrieval