Color mixing, opacity, and gradient interpolation

Representative automated fixture coverage

Hue Codex imports versioned JSON fixtures and tests the corresponding pure production functions directly. The groups below are the representative regression evidence most relevant to this methodology.

• Parsing fixtures: Accepted CSS color syntax, alpha behavior, clamping, invalid input, and out-of-gamut fallback cases. View the JSON fixtures.
• Conversion fixtures: sRGB, XYZ, Lab/LCH, OKLab/OKLCH conversion values, round trips, and precision boundaries. View the JSON fixtures.
• Export fixtures: Displayed-versus-exported values, parseable CSS and JSON, and safe allowlisted SVG output. View the JSON fixtures.

What a pass means. A passing group confirms the named vectors and tested properties still match the documented implementation. It does not prove every possible input, final browser rendering, full accessibility conformance, profile-aware print output, or every downstream export consumer.

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.

These swatches use the same endpoints and weight as the numeric vectors later on this page: Color A #FF0000, Color B #0000FF, weightA = 0.5, weightB = 0.5. The visual difference is intentional because each interpolation model follows a different path through color space.

The linear-light sRGB swatch is shown as a comparison case only. Hue Codex sRGB mode uses encoded 8-bit sRGB channel mixing, so its expected midpoint remains #800080.

Hue Codex sRGB mode interpolates encoded sRGB channel values after HEX input has been resolved to 8-bit RGB channels. It does not convert channels to linear-light sRGB before mixing, and it does not convert a linear-light result back to encoded sRGB.

For each channel, the formula is channel = round(clamp(A8 * weightA + B8 * (1 - weightA), 0, 255)). This makes 50 percent Color A #FF0000 and Color B #0000FF resolve to #800080. A linear-light sRGB mix of those same endpoints would be much lighter, approximately #BC00BC, so the domain choice is intentionally visible.

HSL mode first converts each resolved sRGB input to RGB-derived HSL. Hue angles are normalized into [0, 360), saturation and lightness are percentages, and the result is converted back through HSL-to-RGB with final channel rounding and clamping.

Hue travels the shorter signed path from Color A to Color B as Color A weight decreases. The signed delta is ((hueB - hueA + 540) % 360) - 180, so the range is [-180, 180). A perfect 180-degree tie resolves to -180, meaning it travels in the decreasing-hue direction from Color A.

Achromatic inputs have powerless hue because saturation is zero. Hue Codex currently uses the derived RGB-to-HSL fallback hue 0 for those colors during HSL mixing, while saturation and lightness still interpolate normally.

Color Mixer accepts concrete translucent endpoints. It interpolates endpoint alpha linearly, converts the visible Color A weight into an alpha-premultiplied component weight, interpolates the selected sRGB, HSL, Lab, or OKLab components with that weight, and attaches the mixed alpha to the result.

For opaque endpoints, the adjusted weight equals the visible slider weight. If one endpoint is more transparent, it contributes proportionally less to the mixed components while its alpha still contributes to the resulting opacity.

The internal mixer uses resolved sRGB fallback channels as the starting coordinates. The CSS color-mix() handoff preserves the authored endpoint syntax so a capable color-managed browser may retain more wide-gamut information than the internal fallback preview.

Color Mixer weight is the influence of Color A, the first input. The normalized value is weightA = clamp(weightPercent, 0, 100) / 100, and weightB = 1 - weightA.

For numeric channels or Cartesian components, Hue Codex uses result = A * weightA + B * (1 - weightA). Therefore 0 percent A returns Color B, 50 percent A returns an equal A/B mix, and 100 percent A returns Color A. Exported CSS follows the same orientation: color-mix(in space, A weightPercent%, B (100 - weightPercent)%).

CSS Color 5 defines color-mix() with percentage normalization. CSS can treat omitted or over-specified percentages as normalized mix weights, and if the specified percentages sum to less than 100 percent the resulting color can carry reduced alpha.

Hue Codex Color Mixer avoids those ambiguous percentage cases. It accepts two concrete colors, calculates an alpha-aware resolved sRGB fallback internally, and emits CSS in the form color-mix(in space, A weightA%, B weightB%) where weightA + weightB is always exactly 100 percent.

The visible Color Mixer weight control is an integer-percentage slider. CSS export uses the same clamped control value that drives the internal mix; it does not apply a separate rounding step that could make exported color-mix() drift from the calculated result.

The exported CSS is therefore a reproducible handoff for the selected two-color mix, not a parser or simulator for every valid color-mix() expression. Hue Codex does not generate leftover-percentage-alpha output, omitted-percentage output, more-than-two-color color-mix(), currentColor, system colors, or other contextual source values.

These compact formulas are the reproducible core for Hue Codex encoded sRGB mixing and opacity compositing. In the mixing formulas, w is the normalized Color A weight in [0, 1]. In the opacity formula, alpha is the normalized foreground opacity in [0, 1].

Both the sRGB mix formula and the opacity formula below operate on encoded 8-bit sRGB channel values after HEX parsing. Hue Codex does not convert those channels to linear-light RGB before mixing or compositing.

Given weight w in [0, 1]:

sRGB encoded mix:
R = round(Ra * w + Rb * (1 - w))
G = round(Ga * w + Gb * (1 - w))
B = round(Ba * w + Bb * (1 - w))

Source-over opacity in encoded sRGB channel space:
effective = foreground * alpha + background * (1 - alpha)

Per-channel opacity:
Re = round(Rf * alpha + Rbg * (1 - alpha))
Ge = round(Gf * alpha + Gbg * (1 - alpha))
Be = round(Bf * alpha + Bbg * (1 - alpha))

No srgb_to_linear() or linear_to_srgb() transfer step is applied.

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.

The channel space is encoded 8-bit sRGB from the resolved HEX values. Hue Codex does not linearize to linear-light RGB for opacity compositing, and it rounds the resulting encoded channels back to HEX.

This means #000000 at 50 percent alpha over #FFFFFF resolves to #808080 in Hue Codex. A linear-light compositing comparison would be much lighter, approximately #BCBCBC, so the channel-space choice is intentionally documented as a Hue Codex implementation choice.

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 accepts concrete CSS color literals, including alpha HEX, fixed named colors, RGB, HSL, HWB, Lab/LCH, OKLab/OKLCH, and supported color() profiles. It records those authored source colors with stop positions, optional midpoint hints, direction, shape, repeating state, and interpolation syntax, then creates a modern gradient plus a broader sRGB fallback.

Gradient Generator overlay text guidance samples the source stop colors plus each adjacent midpoint hint. Each sample is composited over the tool's declared white review canvas before contrast is scored. Midpoint alpha uses source-over-compatible premultiplied-alpha interpolation in encoded sRGB, so this remains a contrast heuristic rather than a full rendered-pixel proof for every interpolation mode and backdrop.

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.

When the selected gradient interpolation is modern syntax, Hue Codex creates a fallback by generating the same gradient with the interpolation override set to sRGB. In CSS output this means the modern "in oklab", "in display-p3", "in hsl shorter hue", or similar interpolation clause is removed for the fallback declaration.

Stop colors are not re-sampled through the modern interpolation path. The modern declaration retains each validated authored color literal. For the fallback declaration, every stop is converted to its resolved sRGB channels while preserving alpha as exact slash notation when needed. Stop positions, midpoint hints, type, repeating flag, linear direction, radial shape/size/position, and conic angle/position are preserved.

The fallback block is layered for the CSS cascade: first a solid background-color, then the sRGB fallback gradient, then the modern gradient only when it differs from the fallback. Browsers that cannot parse the modern interpolation declaration can keep the earlier sRGB gradient declaration.

The support caveat shown by the tool is: "Default gradient syntax is the broadest CSS option for production." for sRGB gradients, and "{Color space label} is modern gradient syntax; keep the sRGB gradient fallback for broader support." for non-sRGB interpolation modes.

• Sampled gradient contrast does not test every pixel in the final component.
• Gradient-list share state preserves supported concrete CSS source strings and exact parsed decimal alpha. Older links that already contain eight-digit HEX retain that exact 8-bit alpha value when reopened.
• 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.

weight_a_from_percent(weight_percent):
  # The UI weight is Color A's percentage.
  # 0 percent A returns Color B; 100 percent A returns Color A.
  return clamp(weight_percent, 0, 100) / 100

mix_number(a, b, weight_a):
  # weight_a is the fraction of Color A.
  # weight_b = 1 - weight_a is the fraction of Color B.
  # Formula: result = (a * weight_a) + (b * (1 - weight_a)).
  return a * weight_a + b * (1 - weight_a)

shortest_hue_mix(hue_a, hue_b, weight_a):
  # Hue values are normalized to [0, 360).
  # delta is in [-180, 180). A 180 degree tie becomes -180.
  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:
    rgb_a = hex_to_encoded_srgb_8bit(a)
    rgb_b = hex_to_encoded_srgb_8bit(b)
    # This is encoded sRGB channel interpolation, not linear-light sRGB.
    # No srgb_to_linear() or linear_to_srgb() transfer step is applied.
    return rgb_to_hex(
      r = mix_number(rgb_a.r, rgb_b.r, weight_a),
      g = mix_number(rgb_a.g, rgb_b.g, weight_a),
      b = mix_number(rgb_a.b, rgb_b.b, weight_a)
    )
  if mode == hsl:
    hsl_a = rgb_to_hsl(hex_to_rgb(a))
    hsl_b = rgb_to_hsl(hex_to_rgb(b))
    # Achromatic RGB values have s = 0 and derived hue h = 0.
    # Hue is powerless in those cases, but this mixer uses the derived 0 value.
    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:
    # weight_a has already been adjusted for endpoint alpha.
    return rgb_to_hex(lab_to_rgb(mix L, a, b components))
  if mode == oklab:
    # weight_a has already been adjusted for endpoint alpha.
    return rgb_to_hex(oklab_to_rgb(mix L, a, b components))

premultiplied_mix_weight(color_a, color_b, weight_a):
  alpha = alpha_a * weight_a + alpha_b * (1 - weight_a)
  component_weight_a =
    if alpha > 0 then (alpha_a * weight_a) / alpha
    else weight_a

  return { alpha, component_weight_a }

alpha_aware_internal_mix(color_a, color_b, weight_a, mode):
  weights = premultiplied_mix_weight(color_a, color_b, weight_a)
  base_hex = mix_hex(
    opaque_srgb_channels(color_a),
    opaque_srgb_channels(color_b),
    weights.component_weight_a,
    mode
  )
  return attach_alpha(base_hex, weights.alpha)

composite_hex_encoded_srgb(foreground_hex, background_hex, alpha):
  # Hue Codex opacity tools use encoded 8-bit sRGB channels from HEX.
  # They do not linearize to linear-light RGB before compositing.
  fg = hex_to_encoded_srgb_8bit(foreground_hex)
  bg = hex_to_encoded_srgb_8bit(background_hex)
  a = clamp(alpha, 0, 1)

  return rgb_to_hex(
    r = round(fg.r * a + bg.r * (1 - a)),
    g = round(fg.g * a + bg.g * (1 - a)),
    b = round(fg.b * a + bg.b * (1 - a))
  )

linear_light_comparison_only(foreground_hex, background_hex, alpha):
  fg = srgb_to_linear(hex_to_srgb_unit(foreground_hex))
  bg = srgb_to_linear(hex_to_srgb_unit(background_hex))
  mixed = fg * alpha + bg * (1 - alpha)
  return linear_to_srgb(mixed)

css_space_for_mode(mode):
  if mode == rgb:   return "srgb"
  if mode == hsl:   return "hsl shorter hue"
  if mode == lab:   return "lab"
  if mode == oklab: return "oklab"

color_mix_export(color_a_source, color_b_source, weight_percent, mode):
  # Hue Codex preserves concrete authored endpoint syntax, including alpha,
  # and emits explicit complementary weights.
  # The visible Color Mixer slider is step=1, so normal UI state is integer percent.
  # If restored/imported state supplies a fractional control value, export that
  # same clamped value so the CSS handoff matches the internal mix.
  weight_a = clamp(weight_percent, 0, 100)
  weight_b = 100 - weight_a
  space = css_space_for_mode(mode)
  return "color-mix(in {space}, {color_a_source} {weight_a}%, {color_b_source} {weight_b}%)"

css_color_mix_normalization_context(percent_a, percent_b):
  total = percent_a + percent_b
  if total < 100:
    # CSS can multiply the mixed color alpha by total / 100.
    # Hue Codex Color Mixer does not emit this form.
    return "leftover-alpha color-mix form; not generated"
  if total > 100:
    # CSS can normalize the percentages back to a 100% total.
    # Hue Codex does not rely on this branch because output already sums to 100.
    return "over-specified color-mix form; not generated"
  return "Hue Codex export form"

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

gradient_generator_default_stops(source_color_count):
  if source_color_count <= 1:
    stop[0] = 0
  else if source_color_count == 3:
    # Gradient Generator's 3-color fixture uses an intentional center bias.
    stop = [0, 52, 100]
  else:
    stop[index] = index / (source_color_count - 1) * 100
  hint[index] = (stop[index] + stop[index + 1]) / 2

gradient_generator_overlay_samples(source_colors, stops, hints):
  # Used for suggested overlay text in the Gradient Generator.
  # Samples are source stop colors plus one 50/50 preview mix per adjacent pair.
  samples = []
  for index, hex in source_colors:
    samples.push({ position: stops[index], hex: hex })
    if index < source_colors.length - 1:
      samples.push({
        position: hints[index],
        hex: mix_hex(hex, source_colors[index + 1], 0.5, rgb)
      })
  return samples

gradient_palette_extractor_positions(count):
  # UI choices are 5, 7, or 9 samples.
  # 5 => [0, .25, .5, .75, 1]
  # 7 => [0, .1666667, .3333333, .5, .6666667, .8333333, 1]
  # 9 => [0, .125, .25, .375, .5, .625, .75, .875, 1]
  return sample_positions(count)

gradient_palette_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)

gradient_interpolation_method(interpolation, hue_method):
  if interpolation is empty or interpolation == srgb:
    return ""
  if interpolation is polar and hue_method is present:
    return " in " + interpolation + " " + hue_method + " hue"
  return " in " + interpolation

gradient_css(data, interpolation_override = data.interpolation):
  interpolation_text = gradient_interpolation_method(
    interpolation_override,
    data.hue_method
  )
  stop_list = join([
    color[index] + " " + stop[index] + "%"
    plus hint[index] + "%" between adjacent stops
  ])

  if data.type == linear:
    head = data.direction_keyword or data.angle + "deg"
  if data.type == radial:
    head = data.radial_shape + " " + data.radial_size +
           " at " + data.position_x + "% " + data.position_y + "%"
  if data.type == conic:
    head = "from " + data.angle + "deg at " +
           data.position_x + "% " + data.position_y + "%"

  return gradient_function(data.type, data.repeating) +
         "(" + head + interpolation_text + ", " + stop_list + ")"

gradient_fallback_css(data):
  # Source colors are already resolved six-digit sRGB HEX values.
  # The fallback does not resample the modern gradient path.
  # It preserves colors, stop positions, midpoint hints, type, direction,
  # radial/conic placement, and repeating state.
  data.fallback_css = gradient_css(data, srgb)
  data.modern_css = gradient_css(data, data.interpolation)
  data.solid_fallback = encoded_srgb_midpoint_at_50_percent(data)

  declarations = [
    "background-color: " + data.solid_fallback,
    "background-image: " + data.fallback_css
  ]

  if data.modern_css != data.fallback_css:
    declarations.push("background-image: " + data.modern_css)

  return declarations

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.

Report a calculation issue

If a result does not match the documented formula or fixture, send the exact input, tool settings, displayed result, expected result, precision mode, and browser details. Please do not include private images, personal information, or secrets.