Skip to content

[css-color-4] rewrite 13. Color interpolation to be more explicit about all the steps and effects #14347

Description

@romainmenke

For example:

color-mix(in hsl, hsl(30deg 40% 80% / 25%), hsl(90deg 0 80% / 25%))
color-mix(in hsl, hsl(30deg 40% 80% / 25%), hsl(90deg none 80% / 25%))

In both cases browsers do a linear interpolation between 30deg and 90deg while in my implementation the 90deg is powerless and becomes missing. This missing hue is then filled in with the 30deg from the other color.

I suggest rewriting section 13 to make it clearer what all the steps are.


  1. changing any powerless components to missing values

This step seems redundant as it is already included in https://drafts.csswg.org/css-color-4/#color-conversion


Add a step between what is now 4. and 5. for "the missing component is treated as having the other color’s component value"

or maybe at another position in the sequence?


With those suggestions the spec text would be become:

  1. checking the two colors for analogous components and analogous sets which will be carried forward
  2. converting them both to a given color space which will be referred to as the interpolation color space below.
  3. (if required) re-inserting carried forward values in the converted colors
  4. fill in missing components with the other color's component values
  5. (if required) fixing up the hues, depending on the selected <hue-interpolation-method>
  6. changing the color components to premultiplied form
  7. linearly interpolating each component of the computed value of the color separately
  8. undoing premultiplication

If color space conversion (and there for powerless to missing) is actually intended to be a conditional step, then step 2. should explicitly state this.

For example:

  1. (if required) converting them both to a given color space which will be referred to as the interpolation color space below.

With this last change I think the spec would match browser behavior.
No idea if we actually want to change the spec to match :)


@svgeesus @weinig

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Closed Accepted as Obvious BugfixFixed an obvious error with the obvious solution.Commenter SatisfiedCommenter has indicated satisfaction with the resolution / edits.css-color-4Current Work

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions