Color mixing, opacity, and gradient interpolation

The Color Mixer offers sRGB channel mixing, HSL shorter-hue mixing, Lab component mixing, and OKLab component mixing. The selected mode determines the midpoint and the exported CSS color-mix space where applicable.

HSL mixing interpolates hue along the shorter path and mixes saturation and lightness. Lab and OKLab mixing interpolate Cartesian components. sRGB mixing interpolates encoded channel values for predictable browser-oriented handoff.

Opacity Calculator resolves a transparent foreground over a chosen background with source-over channel math: effective channel equals foreground channel times alpha plus background channel times one minus alpha.

Contrast checks run against the effective composited color, not the original transparent declaration. Suggestion helpers can search for a source color whose composited result reaches the selected contrast target.

Gradient Generator records source colors, stop positions, optional midpoint hints, direction, shape, repeating state, and interpolation syntax. It creates a modern gradient plus a broader sRGB fallback.

Gradient Palette Extractor samples along normalized stop positions and can interpolate in sRGB, HSL, Lab, or OKLab depending on the selected mode. It labels extracted swatches by their source position and provides contrast and role hints.

• Sampled gradient contrast does not test every pixel in the final component.
• CSS interpolation support varies by browser and syntax; fallbacks are included for broader compatibility.
• Different mix spaces can be equally valid for different goals, so Hue Codex reports mode choice rather than hiding it.
• Composited values depend on the selected background; changing the backdrop changes the final color and contrast.

Hue Codex treats the selected interpolation space as part of the result. The pseudocode below makes percentage orientation, hue handling, stop hints, and sample positions explicit.

mix_number(a, b, weight_a):
  # weight_a is the fraction of color A.
  # 1.0 returns A; 0.0 returns B; 0.5 is an equal mix.
  return a * weight_a + b * (1 - weight_a)

shortest_hue_mix(hue_a, hue_b, weight_a):
  delta = ((hue_b - hue_a + 540) % 360) - 180
  return normalize_degrees(hue_a + delta * (1 - weight_a))

mix_hex(a, b, weight_a, mode):
  if mode == rgb:
    return rgb_to_hex(mix each encoded sRGB channel)
  if mode == hsl:
    h = shortest_hue_mix(hsl(a).h, hsl(b).h, weight_a)
    s = mix_number(hsl(a).s, hsl(b).s, weight_a)
    l = mix_number(hsl(a).l, hsl(b).l, weight_a)
    return rgb_to_hex(hsl_to_rgb(h, s, l))
  if mode == lab:
    return rgb_to_hex(lab_to_rgb(mix L, a, b components))
  if mode == oklab:
    return rgb_to_hex(oklab_to_rgb(mix L, a, b components))

sample_positions(count):
  if count == 1: return [0]
  return [index / (count - 1) for index in 0..count-1]

default_stops(source_color_count):
  stop[index] = source_color_count <= 1 ? 0 : index / (source_color_count - 1) * 100
  hint[index] = (stop[index] + stop[index + 1]) / 2

hinted_progress(raw_progress, local_hint):
  h = clamp(local_hint, 0.001, 0.999)
  if raw_progress <= h:
    return 0.5 * (raw_progress / h)
  return 0.5 + 0.5 * ((raw_progress - h) / (1 - h))

sample_gradient(source_colors, position_0_to_1, mode, stops, hints):
  p = clamp(position_0_to_1 * 100, 0, 100)
  if p <= first_stop: return first_color
  if p >= last_stop: return last_color

  segment = first index where p <= stop[index + 1]
  start = stop[segment]
  end = stop[segment + 1]
  raw = clamp((p - start) / (end - start), 0, 1)
  local_hint = (hint[segment] - start) / (end - start)
  progress = hinted_progress(raw, local_hint)

  # mix_hex weight is fraction of the segment start color.
  return mix_hex(source_colors[segment],
                 source_colors[segment + 1],
                 1 - progress,
                 mode)

These vectors show why Hue Codex names the active mix space. The same endpoints and percentage produce different midpoint colors in different models.

Tools using this methodology

These Hue Codex tools link to this methodology because they depend on the formulas, assumptions, limits, or data policy described here.