CSS color-mix Percent in OKLab

Mix opaque gamma-sRGB colors in OKLab using CSS-style normalized weights and alpha reduction if total weight below 100%; explicit two weights, no missing components, premultiplied input alpha, hue interpolation or gamut-mapping certification.

Description

OKLab mixing averages perceptual coordinates rather than encoded RGB channels.

OKLab mixing averages perceptual coordinates rather than encoded RGB channels. CSS-style weights below 100% reduce resulting alpha.^{[1, 2]}

Enter two opaque normalized sRGB triples and individual weights 0–100 with positive sum. Decode/convert to OKLab, blend, convert back and clip linear RGB before encoding. Return OKLab/RGB, alpha and excursions beyond 1 e−7 tolerance.

When to use CSS color-mix Percent in OKLab

Use CSS color-mix Percent in OKLab when you need to evaluate the supplied records under the calculation and evidence rules below. No input alpha, missing components, hue interpolation or full CSS gamut-mapping certification is supplied.

Prepare colors in the stated color space and scale. Use encoded RGB fractions, linear RGB, Lab, xy, byte values or ink percentages exactly as requested; supply caller tolerances and reference conditions.

How to use CSS color-mix Percent in OKLab and understand its results

Prepare colors in the stated color space and scale. Use encoded RGB fractions, linear RGB, Lab, xy, byte values or ink percentages exactly as requested; supply caller tolerances and reference conditions.
Enter firstRgb, secondRgb, firstWeightPercent, secondWeightPercent using the field table and calculation rules, then run the tool.
Read mixedOklab, mixedRgb, resultAlpha, clippedLinearChannelIndices. The explanation below defines the units, signs, ordering and any flags or placeholder values.
If the tool reports an input issue, correct the values and run it again. Apply the stated assumptions when interpreting a successfully returned result.

Input field	Meaning	Value type; see rules below	Requirement
firstRgb	First rgb	list of number	Required
secondRgb	Second rgb	list of number	Required
firstWeightPercent	First weight percent	number	Required
secondWeightPercent	Second weight percent	number	Required

mix=(w1Lab1+w2Lab2)/(w1+w2); alpha=min(1,(w1+w2)/100)

Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.

Output field	Meaning	Value type
mixedOklab	Mixed oklab	list of number
mixedRgb	Mixed rgb	list of number
resultAlpha	Result alpha	number
clippedLinearChannelIndices	Clipped linear channel indices	list of number

json

{
  "input": {
    "firstRgb": [
      0,
      0,
      0
    ],
    "secondRgb": [
      1,
      1,
      1
    ],
    "firstWeightPercent": 50,
    "secondWeightPercent": 50
  },
  "output": {
    "mixedOklab": [
      0.4999999967367731,
      4.047642776505711e-11,
      1.8636953813544466e-8
    ],
    "mixedRgb": [
      0.3885728718975863,
      0.3885728554029942,
      0.38857281075518224
    ],
    "resultAlpha": 1,
    "clippedLinearChannelIndices": []
  }
}

Limitations and assumptions

No input alpha, missing components, hue interpolation or full CSS gamut-mapping certification is supplied.

Numeric inputs, where present, must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Numeric lists are limited to 10,000 entries; string lists to 128 strings of at most 128 characters each. The rules above may impose smaller limits. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors.

Alternative or Complementary methods

Use CSS Relative Color Syntax Builder: CSS relative-color syntax can substitute explicit OKLCH channels from a literal source color. This builder creates text without evaluating CSS. For a complementary task, use Tones Generator Mix Gray Percent: A tone ladder mixes a base color toward a caller-selected neutral gray. Encoded-channel mixing is not pigment mixing.

Further background: CSS Color Module Level 5: relative colors and color mixing.

References

CSS color-mix Percent in OKLab — tool.io
CSS Color Module Level 5: relative colors and color mixing — World Wide Web Consortium

Similar or alternative tools

CSS Relative Color Syntax Builder
CSS relative-color syntax can substitute explicit OKLCH channels from a literal source color. This builder creates text without evaluating CSS.
Tones Generator Mix Gray Percent
A tone ladder mixes a base color toward a caller-selected neutral gray. Encoded-channel mixing is not pigment mixing.