You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
according to the rules in <a href="https://www.w3.org/TR/compositing-1/#simplealphacompositing">Section 5.1 Simple alpha compositing</a> of [[!Compositing]].
4355
4355
4356
+
Interpolation {#interpolation}
4357
+
===================================
4358
+
4359
+
Color interpolation happens with
4360
+
gradients,
4361
+
compositing,
4362
+
filters,
4363
+
transitions,
4364
+
animations, and
4365
+
color mixing and color modification functions.
4366
+
4367
+
In general, interpolation between <<color>> values of the same [=colorspace=]
4368
+
occurs by linearly interpolating each component of the computed value of the color
4369
+
separately, in that colorspace.
4370
+
This provides Web compatibility; legacy sRGB content interpolates in the sRGB space by default.
4371
+
4372
+
4373
+
Interpolating to or from ''<color>/currentcolor'' is possible.
4374
+
The numerical value used for this purpose is the used value.
4375
+
4376
+
ISSUE: Computed value needs to be able to represent
4377
+
combinations of ''currentColor'' and an actual color.
4378
+
Consider the value of 'text-emphasis-color' in
4379
+
<code>div { text-emphasis: circle; transition: all 2s; }<br>
4380
+
div:hover { text-emphasis-color: lime; }<br>
4381
+
em { color: red; }</code>
4382
+
See <a href="https://github.com/w3c/csswg-drafts/issues/445">Issue 445</a>.
4383
+
4384
+
Color space for interpolation {#interpolation-space}
4385
+
------------------------------
4386
+
4387
+
Issue: Should gamut mapping occur before or after interpolation?
4388
+
4389
+
If colors are not in the same color space,
4390
+
they are first converted to Lab
4391
+
and then interpolated as Lab colors.
4392
+
Host syntax can override the interpolation color space and specify which color space is used for interpolation.
4393
+
For example, 'color-mix' and 'color-adjust' override the default to LCH.
4394
+
4395
+
4396
+
Interpolating with alpha {#interpolation-alpha}
4397
+
------------------------
4398
+
4399
+
When the colors to be interpolated are not fully opaque,
4400
+
they are transformed into <dfn export>premultiplied color values</dfn>
4401
+
as follows:
4402
+
4403
+
* For [=rectangular orthogonal color=] coordinate systems,
4404
+
all component values are multiplied by the alpha value
4405
+
* For [=cylindrical polar color=] coordinate systems,
4406
+
the hue angle is not premultiplied,
4407
+
but the other two axes are premultiplied.
4408
+
4409
+
To obtain a color value from a premultipled color value,
Issue(4928): How to handle achromatic interpolation?
4457
+
4458
+
For color functions with a hue angle (LCH, HSL, HWB etc), there are multiple ways to interpolate.
4459
+
We typically want to avoid arcs over 360 for the difference between the angles, as they are rarely desirable,
4460
+
so in most cases angles are fixed up prior to interpolation so that per-component interpolation is done over less than 360 degrees, often less than 180.
4461
+
4462
+
Host syntax can specify any of the following algorithms for hue interpolation
4463
+
(angles in the following are in degrees, but the logic is the same regardless of how they are specified).
4464
+
4465
+
Unless the type of hue interpolation is ''specified'', both angles need to be constrained to [0, 360) prior to interpolation.
4466
+
One way to do this is <code><i>θ</i> = ((<i>θ</i> % 360) + 360) % 360</code>.
4467
+
4468
+
: ''shorter''
4469
+
:: Angles are adjusted so that θ₂ - θ₁ ∈ [-180, 180]. In pseudo-Javascript:
4470
+
<pre>
4471
+
if (θ₂ - θ₁ > 180) {
4472
+
θ₁ += 360;
4473
+
}
4474
+
else if (θ₂ - θ₁ < -180) {
4475
+
θ₂ += 360;
4476
+
}
4477
+
</pre>
4478
+
4479
+
: ''longer''
4480
+
:: Angles are adjusted so that |θ₂ - θ₁| ∈ {0, [180, 360)}. In pseudo-Javascript:
4481
+
<pre>
4482
+
if (0 < θ₂ - θ₁ < 180) {
4483
+
θ₁ += 360;
4484
+
}
4485
+
else if (-180 < θ₂ - θ₁ < 0) {
4486
+
θ₂ += 360;
4487
+
}
4488
+
</pre>
4489
+
4490
+
: ''increasing''
4491
+
:: Angles are adjusted so that θ₂ - θ₁ ∈ [0, 360). In pseudo-Javascript:
4492
+
<pre>
4493
+
if (θ₂ < θ₁) {
4494
+
θ₂ += 360;
4495
+
}
4496
+
</pre>
4497
+
4498
+
: ''decreasing''
4499
+
:: Angles are adjusted so that θ₂ - θ₁ ∈ (-360, 0]. In pseudo-Javascript:
4500
+
<pre>
4501
+
if (θ₁ < θ₂) {
4502
+
θ₁ += 360;
4503
+
}
4504
+
</pre>
4505
+
4506
+
: ''specified''
4507
+
:: No fixup is performed. Angles are interpolated in the same way as every other component.
4508
+
4509
+
Unless otherwise specified, if no specific hue interpolation algorithm is selected by the host syntax, the default is ''shorter''.
4510
+
4511
+
If one of the angles has the value NaN,
4512
+
then for interpolation, NaN is replaced
4513
+
by the value of the other hue angle.
4514
+
If both angles have the value NaN,
4515
+
then for interpolation, NaN is replaced
4516
+
by the value 0 for both angles.
4517
+
4518
+
Issue(5277): How do these work when interpolating between multiple colors?
Issue(4928): How to handle achromatic interpolation?
850
-
851
-
For color functions with a hue angle (LCH, HSL, HWB etc), there are multiple ways to interpolate.
852
-
We typically want to avoid arcs over 360 for the difference between the angles, as they are rarely desirable,
853
-
so in most cases angles are fixed up prior to interpolation so that per-component interpolation is done over less than 360 degrees, often less than 180.
854
-
855
-
Host syntax can specify any of the following algorithms for hue interpolation
856
-
(angles in the following are in degrees, but the logic is the same regardless of how they are specified).
857
-
858
-
Unless the type of hue interpolation is ''specified'', both angles need to be constrained to [0, 360) prior to interpolation.
859
-
One way to do this is <code><i>θ</i> = ((<i>θ</i> % 360) + 360) % 360</code>.
860
-
861
-
: ''shorter''
862
-
:: Angles are adjusted so that θ₂ - θ₁ ∈ [-180, 180]. In pseudo-Javascript:
863
-
<pre>
864
-
if (θ₂ - θ₁ > 180) {
865
-
θ₁ += 360;
866
-
}
867
-
else if (θ₂ - θ₁ < -180) {
868
-
θ₂ += 360;
869
-
}
870
-
</pre>
871
-
872
-
: ''longer''
873
-
:: Angles are adjusted so that |θ₂ - θ₁| ∈ {0, [180, 360)}. In pseudo-Javascript:
874
-
<pre>
875
-
if (0 < θ₂ - θ₁ < 180) {
876
-
θ₁ += 360;
877
-
}
878
-
else if (-180 < θ₂ - θ₁ < 0) {
879
-
θ₂ += 360;
880
-
}
881
-
</pre>
882
-
883
-
: ''increasing''
884
-
:: Angles are adjusted so that θ₂ - θ₁ ∈ [0, 360). In pseudo-Javascript:
885
-
<pre>
886
-
if (θ₂ < θ₁) {
887
-
θ₂ += 360;
888
-
}
889
-
</pre>
890
-
891
-
: ''decreasing''
892
-
:: Angles are adjusted so that θ₂ - θ₁ ∈ (-360, 0]. In pseudo-Javascript:
893
-
<pre>
894
-
if (θ₁ < θ₂) {
895
-
θ₁ += 360;
896
-
}
897
-
</pre>
898
-
899
-
: ''specified''
900
-
:: No fixup is performed. Angles are interpolated in the same way as every other component.
901
-
902
-
Unless otherwise specified, if no specific hue interpolation algorithm is selected by the host syntax, the default is ''shorter''.
903
-
904
-
If one of the angles has the value NaN,
905
-
then for interpolation, NaN is replaced
906
-
by the value of the other hue angle.
907
-
If both angles have the value NaN,
908
-
then for interpolation, NaN is replaced
909
-
by the value 0 for both angles.
910
749
911
-
Issue(5277): How do these work when interpolating between multiple colors?
0 commit comments