Skip to content

Commit 7ee4e37

Browse files
svgeesussvgeesus
committed
[css-color-4][editorial] Added gradients to the hue interpolation examples to make them clearer
1 parent 0da42c8 commit 7ee4e37

1 file changed

Lines changed: 38 additions & 12 deletions

File tree

‎css-color-4/Overview.bs‎

Lines changed: 38 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5479,13 +5479,17 @@ Hue Interpolation</h3>
54795479
between the starting and ending hues.
54805480

54815481
<div class="example" id="ex-shorter">
5482-
For example, the midpoint when interpolating in OkLCh from a red
5482+
<p>For example, the midpoint when interpolating in OkLCh from a red
54835483
<span class="swatch" style="--color: rgb(93.22% 7.98% 0.485%)"></span>&nbsp;oklch(0.6 0.24 30) to a yellow
54845484
<span class="swatch" style="--color: rgb(89.07% 72.28% 19.23%)"></span>&nbsp;oklch(0.8 0.15 90)
54855485
would be at a hue angle of 30 + (90 - 30) * 0.5 = 60 degrees,
54865486
along the shorter arc between the two colors,
54875487
giving a deep orange
5488-
<span class="swatch" style="--color: rgb(87.66% 51.96% 0%)"></span>&nbsp;oklch(0.7 0.195 60)
5488+
<span class="swatch" style="--color: rgb(87.66% 51.96% 0%)"></span>&nbsp;oklch(0.7 0.195 60)</p>
5489+
5490+
<!-- https://apps.colorjs.io/gradients/?color1=oklch(0.6%200.24%2030)%20&color2=%20oklch(0.8%200.15%2090) -->
5491+
5492+
<div style="width: 100%; height: 5em; background: linear-gradient(to right, color(display-p3 0.85564 0.2067 0.1305), color(display-p3 0.86525 0.25647 0.08503), color(display-p3 0.87307 0.30184 0.01956), color(display-p3 0.87915 0.34443 0), color(display-p3 0.88358 0.38509 0), color(display-p3 0.88645 0.42424 0), color(display-p3 0.88787 0.46214 0), color(display-p3 0.88795 0.49895 0), color(display-p3 0.88682 0.53474 0), color(display-p3 0.88463 0.56955 0.00893), color(display-p3 0.88154 0.60342 0.09436), color(display-p3 0.87773 0.63633 0.15435), color(display-p3 0.87339 0.66828 0.20709), color(display-p3 0.86872 0.69925 0.25696), color(display-p3 0.86396 0.72924 0.30547))"></div>
54895493
</div>
54905494

54915495
Angles are adjusted so that |θ₂ - θ₁| ∈ [-180, 180]. In pseudo-Javascript:
@@ -5505,13 +5509,18 @@ Hue Interpolation</h3>
55055509
between the starting and ending hues.
55065510

55075511
<div class="example" id="ex-longer">
5508-
For example, the midpoint when interpolating in OkLCh from a red
5512+
<p>For example, the midpoint when interpolating in OkLCh from a red
55095513
<span class="swatch" style="--color: rgb(93.22% 7.98% 0.485%)"></span>&nbsp;oklch(0.6 0.24 30) to a yellow
55105514
<span class="swatch" style="--color: rgb(89.07% 72.28% 19.23%)"></span>&nbsp;oklch(0.8 0.15 90)
55115515
would be at a hue angle of (30 + 360 + 90) * 0.5 = 240 degrees,
55125516
along the longer arc between the two colors,
55135517
giving a sky blue
5514-
<span class="swatch" style="--color: rgb(0% 66.25% 100%)"></span>&nbsp;oklch(0.7 0.195 240)
5518+
<span class="swatch" style="--color: rgb(0% 66.25% 100%)"></span>&nbsp;oklch(0.7 0.195 240)</p>
5519+
5520+
<!-- https://apps.colorjs.io/gradients/?color1=oklch(0.6%200.24%2030)%20&color2=%20oklch(0.8%200.15%2090) -->
5521+
5522+
<div style="width: 100%; height: 5em; background:linear-gradient(to right, color(display-p3 0.85564 0.2067 0.1305), color(display-p3 0.85667 0.20594 0.15629), color(display-p3 0.85754 0.20544 0.17925), color(display-p3 0.85825 0.2052 0.2003), color(display-p3 0.8588 0.2052 0.21997), color(display-p3 0.8592 0.20546 0.23859), color(display-p3 0.85944 0.20595 0.25639), color(display-p3 0.85953 0.20669 0.27354), color(display-p3 0.85946 0.20765 0.29014), color(display-p3 0.85924 0.20884 0.3063), color(display-p3 0.85887 0.21024 0.32207), color(display-p3 0.85835 0.21184 0.33752), color(display-p3 0.85768 0.21364 0.35269), color(display-p3 0.85686 0.21562 0.36761), color(display-p3 0.8559 0.21778 0.38231), color(display-p3 0.85478 0.2201 0.39681), color(display-p3 0.85353 0.22257 0.41114), color(display-p3 0.85213 0.22518 0.4253), color(display-p3 0.85059 0.22793 0.43932), color(display-p3 0.84891 0.23081 0.4532), color(display-p3 0.84708 0.23379 0.46694), color(display-p3 0.84512 0.23689 0.48057), color(display-p3 0.84303 0.24008 0.49407), color(display-p3 0.84079 0.24336 0.50746), color(display-p3 0.83843 0.24672 0.52075), color(display-p3 0.83593 0.25016 0.53392), color(display-p3 0.83329 0.25366 0.54698), color(display-p3 0.83053 0.25723 0.55994), color(display-p3 0.82764 0.26086 0.57279), color(display-p3 0.82462 0.26454 0.58554), color(display-p3 0.82148 0.26826 0.59818), color(display-p3 0.81821 0.27203 0.61071), color(display-p3 0.81482 0.27584 0.62313), color(display-p3 0.8113 0.27969 0.63543), color(display-p3 0.80767 0.28357 0.64763), color(display-p3 0.80391 0.28748 0.6597), color(display-p3 0.80004 0.29142 0.67166), color(display-p3 0.79605 0.29539 0.68349), color(display-p3 0.79195 0.29938 0.6952), color(display-p3 0.78773 0.3034 0.70677), color(display-p3 0.7834 0.30744 0.71822), color(display-p3 0.77895 0.31151 0.72953), color(display-p3 0.7744 0.31559 0.7407), color(display-p3 0.76973 0.3197 0.75173), color(display-p3 0.76496 0.32383 0.76261), color(display-p3 0.76008 0.32798 0.77334), color(display-p3 0.75509 0.33215 0.78391), color(display-p3 0.75 0.33634 0.79433), color(display-p3 0.74481 0.34056 0.80459), color(display-p3 0.73951 0.34479 0.81468), color(display-p3 0.73411 0.34905 0.8246), color(display-p3 0.7286 0.35334 0.83435), color(display-p3 0.723 0.35764 0.84392), color(display-p3 0.71729 0.36198 0.85331), color(display-p3 0.71149 0.36633 0.86252), color(display-p3 0.70558 0.37072 0.87154), color(display-p3 0.69958 0.37513 0.88037), color(display-p3 0.69348 0.37956 0.88901), color(display-p3 0.68728 0.38403 0.89745), color(display-p3 0.68098 0.38852 0.90568), color(display-p3 0.67459 0.39304 0.91371), color(display-p3 0.6681 0.39759 0.92154), color(display-p3 0.66151 0.40217 0.92915), color(display-p3 0.65483 0.40678 0.93655), color(display-p3 0.64805 0.41142 0.94374), color(display-p3 0.64117 0.41609 0.95071), color(display-p3 0.6342 0.42079 0.95745), color(display-p3 0.62713 0.42552 0.96397), color(display-p3 0.61996 0.43029 0.97026), color(display-p3 0.61269 0.43508 0.97633), color(display-p3 0.60533 0.4399 0.98216), color(display-p3 0.59786 0.44475 0.98777), color(display-p3 0.5903 0.44962 0.99313), color(display-p3 0.58263 0.45453 0.99827), color(display-p3 0.57486 0.45946 1), color(display-p3 0.56699 0.46442 1), color(display-p3 0.55901 0.46941 1), color(display-p3 0.55093 0.47441 1), color(display-p3 0.54274 0.47945 1), color(display-p3 0.53444 0.4845 1), color(display-p3 0.52603 0.48958 1), color(display-p3 0.51751 0.49467 1), color(display-p3 0.50886 0.49978 1), color(display-p3 0.50011 0.50491 1), color(display-p3 0.49122 0.51005 1), color(display-p3 0.48222 0.5152 1), color(display-p3 0.47308 0.52037 1), color(display-p3 0.46381 0.52554 1), color(display-p3 0.45441 0.53072 1), color(display-p3 0.44486 0.53591 1), color(display-p3 0.43517 0.5411 1), color(display-p3 0.42532 0.54629 1), color(display-p3 0.41532 0.55147 1), color(display-p3 0.40514 0.55666 1), color(display-p3 0.39479 0.56184 1), color(display-p3 0.38426 0.56701 1), color(display-p3 0.37352 0.57217 1), color(display-p3 0.36258 0.57731 1), color(display-p3 0.35142 0.58245 1), color(display-p3 0.34002 0.58756 1), color(display-p3 0.32836 0.59266 1), color(display-p3 0.31642 0.59773 1), color(display-p3 0.30418 0.60278 1), color(display-p3 0.2916 0.60781 1), color(display-p3 0.27864 0.6128 1), color(display-p3 0.26526 0.61777 1), color(display-p3 0.2514 0.6227 1), color(display-p3 0.237 0.62759 1), color(display-p3 0.22194 0.63245 1), color(display-p3 0.20612 0.63727 1), color(display-p3 0.18935 0.64204 1), color(display-p3 0.17139 0.64678 1), color(display-p3 0.15187 0.65146 1), color(display-p3 0.13019 0.6561 1), color(display-p3 0.10523 0.66069 1), color(display-p3 0.07454 0.66522 0.99755), color(display-p3 0.03037 0.6697 0.99279), color(display-p3 0 0.67412 0.98785), color(display-p3 0 0.67849 0.98273), color(display-p3 0 0.6828 0.97743), color(display-p3 0 0.68704 0.97197), color(display-p3 0 0.69122 0.96634), color(display-p3 0 0.69534 0.96054), color(display-p3 0 0.69939 0.95458), color(display-p3 0 0.70337 0.94847), color(display-p3 0 0.70728 0.94221), color(display-p3 0 0.71112 0.93581), color(display-p3 0 0.71489 0.92925), color(display-p3 0 0.71859 0.92257), color(display-p3 0 0.72221 0.91574), color(display-p3 0 0.72576 0.90879), color(display-p3 0 0.72923 0.90171), color(display-p3 0 0.73262 0.89451), color(display-p3 0 0.73593 0.88719), color(display-p3 0 0.73916 0.87975), color(display-p3 0 0.74231 0.87221), color(display-p3 0 0.74538 0.86457), color(display-p3 0 0.74837 0.85682), color(display-p3 0 0.75127 0.84898), color(display-p3 0 0.75409 0.84105), color(display-p3 0 0.75683 0.83303), color(display-p3 0 0.75948 0.82492), color(display-p3 0 0.76204 0.81674), color(display-p3 0 0.76452 0.80848), color(display-p3 0 0.76692 0.80016), color(display-p3 0 0.76922 0.79176), color(display-p3 0 0.77144 0.78331), color(display-p3 0 0.77358 0.7748), color(display-p3 0 0.77562 0.76623), color(display-p3 0 0.77758 0.75762), color(display-p3 0 0.77945 0.74896), color(display-p3 0 0.78124 0.74025), color(display-p3 0 0.78294 0.73152), color(display-p3 0 0.78455 0.72274), color(display-p3 0 0.78607 0.71394), color(display-p3 0.02324 0.78751 0.70512), color(display-p3 0.07355 0.78886 0.69627), color(display-p3 0.10755 0.79012 0.6874), color(display-p3 0.13486 0.7913 0.67853), color(display-p3 0.15854 0.79239 0.66964), color(display-p3 0.17986 0.7934 0.66074), color(display-p3 0.19954 0.79433 0.65185), color(display-p3 0.21797 0.79517 0.64295), color(display-p3 0.23542 0.79593 0.63406), color(display-p3 0.2521 0.7966 0.62518), color(display-p3 0.26812 0.79719 0.61632), color(display-p3 0.2836 0.7977 0.60747), color(display-p3 0.2986 0.79814 0.59864), color(display-p3 0.31319 0.79849 0.58983), color(display-p3 0.32742 0.79876 0.58105), color(display-p3 0.34132 0.79895 0.5723), color(display-p3 0.35492 0.79907 0.56359), color(display-p3 0.36826 0.79911 0.55492), color(display-p3 0.38136 0.79907 0.54629), color(display-p3 0.39423 0.79896 0.53771), color(display-p3 0.40688 0.79878 0.52918), color(display-p3 0.41934 0.79852 0.5207), color(display-p3 0.43162 0.7982 0.51228), color(display-p3 0.44372 0.7978 0.50393), color(display-p3 0.45565 0.79733 0.49565), color(display-p3 0.46742 0.7968 0.48743), color(display-p3 0.47904 0.7962 0.4793), color(display-p3 0.49051 0.79554 0.47124), color(display-p3 0.50184 0.79481 0.46327), color(display-p3 0.51303 0.79401 0.4554), color(display-p3 0.52409 0.79316 0.44762), color(display-p3 0.53502 0.79225 0.43994), color(display-p3 0.54582 0.79127 0.43238), color(display-p3 0.55649 0.79024 0.42492), color(display-p3 0.56704 0.78916 0.41759), color(display-p3 0.57747 0.78802 0.41039), color(display-p3 0.58778 0.78682 0.40333), color(display-p3 0.59797 0.78558 0.3964), color(display-p3 0.60805 0.78429 0.38963), color(display-p3 0.61801 0.78295 0.38301), color(display-p3 0.62785 0.78156 0.37657), color(display-p3 0.63758 0.78013 0.3703), color(display-p3 0.6472 0.77865 0.36421), color(display-p3 0.6567 0.77713 0.35832), color(display-p3 0.66609 0.77558 0.35263), color(display-p3 0.67537 0.77398 0.34716), color(display-p3 0.68454 0.77235 0.34192), color(display-p3 0.69359 0.77068 0.33691), color(display-p3 0.70253 0.76899 0.33215), color(display-p3 0.71136 0.76726 0.32764), color(display-p3 0.72008 0.7655 0.32341), color(display-p3 0.72869 0.76372 0.31946), color(display-p3 0.73718 0.76191 0.3158), color(display-p3 0.74556 0.76007 0.31244), color(display-p3 0.75382 0.75822 0.30939), color(display-p3 0.76198 0.75635 0.30667), color(display-p3 0.77001 0.75446 0.30427), color(display-p3 0.77794 0.75255 0.30222), color(display-p3 0.78575 0.75063 0.30051), color(display-p3 0.79344 0.7487 0.29915), color(display-p3 0.80102 0.74676 0.29816), color(display-p3 0.80849 0.74482 0.29752), color(display-p3 0.81583 0.74287 0.29725), color(display-p3 0.82306 0.74091 0.29734), color(display-p3 0.83017 0.73896 0.2978), color(display-p3 0.83717 0.737 0.29862), color(display-p3 0.84405 0.73505 0.29981), color(display-p3 0.8508 0.7331 0.30135), color(display-p3 0.85744 0.73117 0.30324), color(display-p3 0.86396 0.72924 0.30547))"></div>
5523+
55155524
</div>
55165525

55175526
Angles are adjusted so that |θ₂ - θ₁| ∈ {(-360, -180], [180, 360)}. In pseudo-Javascript:
@@ -5540,20 +5549,28 @@ Hue Interpolation</h3>
55405549
the interpolation will not flip to the other arc.
55415550

55425551
<div class="example" id="ex-increasing">
5543-
For example, the midpoint when interpolating in OkLCh from a deep brown
5552+
<p>For example, the midpoint when interpolating in OkLCh from a deep brown
55445553
<span class="swatch" style="--color: rgb(57.92% 29.44% 25.11%)"></span>&nbsp;oklch(0.5 0.1 30) to a turquoise
55455554
<span class="swatch" style="--color: rgb(26.29% 69.89% 67.49%)"></span>&nbsp;oklch(0.7 0.1 190)
55465555
would be at a hue angle of (30 + 190) * 0.5 = 110 degrees,
55475556
giving a khaki
5548-
<span class="swatch" style="--color: rgb(51.73% 52.26% 22.03%)"></span>&nbsp;oklch(0.6 0.1 110).
5557+
<span class="swatch" style="--color: rgb(51.73% 52.26% 22.03%)"></span>&nbsp;oklch(0.6 0.1 110).</p>
5558+
5559+
<!-- https://apps.colorjs.io/gradients/?color1=oklch(0.5%200.1%2030)&color2=oklch(0.7%200.1%20190)%20 -->
5560+
5561+
<div style="width: 100%; height: 5em; background: linear-gradient(to right, color(display-p3 0.54199 0.30934 0.26448), color(display-p3 0.55468 0.33447 0.23887), color(display-p3 0.56187 0.36244 0.21736), color(display-p3 0.56349 0.39269 0.20288), color(display-p3 0.55963 0.42453 0.19879), color(display-p3 0.55051 0.45724 0.20779), color(display-p3 0.53651 0.4901 0.23046), color(display-p3 0.51821 0.52242 0.26531), color(display-p3 0.49644 0.55355 0.30991), color(display-p3 0.47232 0.58292 0.36193), color(display-p3 0.44742 0.61005 0.41942), color(display-p3 0.4238 0.63453 0.48072), color(display-p3 0.40417 0.65606 0.54429), color(display-p3 0.39164 0.67448 0.60863), color(display-p3 0.3893 0.68974 0.67222))"></div>
55495562

5550-
However, if the hue of the second color is animated to
5563+
<p>However, if the hue of the second color is animated to
55515564
<span class="swatch" style="--color: rgb(33.09% 66.63% 81.81%)"></span>&nbsp;oklch(0.7 0.1 230),
55525565
the midpoint of the interpolation will be (30 + 230) * 0.5 = 130 degrees,
55535566
continuing in the same increasing direction,
55545567
giving another green
55555568
<span class="swatch" style="--color: rgb(42.44% 54.95% 28.93%)"></span>&nbsp;oklch(0.6 0.1 130)
5556-
rather than flipping to the opponent color part-way through the animation.
5569+
rather than flipping to the opponent color part-way through the animation.</p>
5570+
5571+
<!-- https://apps.colorjs.io/gradients/?color1=oklch(0.5%200.1%2030)&color2=oklch(0.7%200.1%20230) -->
5572+
5573+
<div style="width: 100%; height: 5em; background: linear-gradient(to right, color(display-p3 0.54199 0.30934 0.26448), color(display-p3 0.54838 0.32269 0.2462), color(display-p3 0.55265 0.3372 0.22912), color(display-p3 0.55477 0.35276 0.2138), color(display-p3 0.55473 0.36922 0.20096), color(display-p3 0.55255 0.38642 0.19142), color(display-p3 0.54827 0.40419 0.18607), color(display-p3 0.54193 0.42235 0.18568), color(display-p3 0.53362 0.44072 0.19077), color(display-p3 0.52343 0.45911 0.20138), color(display-p3 0.51148 0.47737 0.21721), color(display-p3 0.49794 0.49532 0.23765), color(display-p3 0.48299 0.51282 0.26203), color(display-p3 0.46685 0.52972 0.28969), color(display-p3 0.44982 0.54588 0.32004), color(display-p3 0.43223 0.5612 0.3526), color(display-p3 0.41451 0.57556 0.38691), color(display-p3 0.39715 0.58887 0.42259), color(display-p3 0.38079 0.60107 0.45928), color(display-p3 0.36614 0.61209 0.4966), color(display-p3 0.35401 0.62189 0.53422), color(display-p3 0.34525 0.63046 0.57177), color(display-p3 0.34069 0.6378 0.60889), color(display-p3 0.34095 0.64393 0.64523), color(display-p3 0.34643 0.64888 0.68042), color(display-p3 0.35714 0.65272 0.71412), color(display-p3 0.3728 0.65554 0.74598), color(display-p3 0.39286 0.65743 0.77568), color(display-p3 0.41667 0.65849 0.80292))"></div>
55575574
</div>
55585575

55595576
Angles are adjusted so that |θ₂ - θ₁| ∈ [0, 360). In pseudo-Javascript:
@@ -5579,20 +5596,29 @@ Hue Interpolation</h3>
55795596
the interpolation will not flip to the other arc.
55805597

55815598
<div class="example" id="ex-decreasing">
5582-
For example, the midpoint when interpolating in OkLCh from a deep brown
5599+
<p>For example, the midpoint when interpolating in OkLCh from a deep brown
55835600
<span class="swatch" style="--color: rgb(57.92% 29.44% 25.11%)"></span>&nbsp;oklch(0.5 0.1 30) to a turquoise
55845601
<span class="swatch" style="--color: rgb(26.29% 69.89% 67.49%)"></span>&nbsp;oklch(0.7 0.1 190)
55855602
would be at a hue angle of (30 + 360 + 190) * 0.5 = 290 degrees,
55865603
giving a purple
5587-
<span class="swatch" style="--color: rgb(49.98% 46.03% 72.08%)"></span>&nbsp;oklch(0.6 0.1 290).
5604+
<span class="swatch" style="--color: rgb(49.98% 46.03% 72.08%)"></span>&nbsp;oklch(0.6 0.1 290).</p>
5605+
5606+
<!-- https://apps.colorjs.io/gradients/?color1=oklch(0.5%200.1%2030)&color2=oklch(0.7%200.1%20190) -->
5607+
5608+
<div style="width: 100%; height: 5em; background: linear-gradient(to right, color(display-p3 0.54199 0.30934 0.26448), color(display-p3 0.55783 0.31818 0.33366), color(display-p3 0.56548 0.33196 0.40432), color(display-p3 0.56507 0.35041 0.47454), color(display-p3 0.55696 0.37309 0.54199), color(display-p3 0.54171 0.39951 0.60414), color(display-p3 0.52008 0.42921 0.6585), color(display-p3 0.49308 0.46166 0.70284), color(display-p3 0.46215 0.4962 0.7354), color(display-p3 0.4294 0.53195 0.75506), color(display-p3 0.39801 0.56785 0.76144), color(display-p3 0.37269 0.6027 0.7549), color(display-p3 0.35949 0.63532 0.73659), color(display-p3 0.36418 0.66463 0.70825), color(display-p3 0.3893 0.68974 0.67222))"></div>
55885609

5589-
However, if the hue of the second color is animated to
5610+
<p>However, if the hue of the second color is animated to
55905611
<span class="swatch" style="--color: rgb(33.09% 66.63% 81.81%)"></span>&nbsp;oklch(0.7 0.1 230),
55915612
the midpoint of the interpolation will be (30 + 360 + 230) * 0.5 = 310 degrees,
55925613
continuing in the same decreasing direction,
55935614
giving another purple
55945615
<span class="swatch" style="--color: rgb(57.47% 43.44% 67.8%)"></span>&nbsp;oklch(0.6 0.1 310)
5595-
rather than flipping to the opponent color part-way through the animation.
5616+
rather than flipping to the opponent color part-way through the animation.</p>
5617+
5618+
<!-- https://apps.colorjs.io/gradients/?color1=oklch(0.5%200.1%2030)&color2=oklch(0.7%200.1%20230) -->
5619+
5620+
<div style="width: 100%; height: 5em; background: linear-gradient(to right, color(display-p3 0.54199 0.30934 0.26448), color(display-p3 0.55881 0.31921 0.32275), color(display-p3 0.5704 0.33226 0.38231), color(display-p3 0.57674 0.34842 0.44229), color(display-p3 0.57793 0.3675 0.50159), color(display-p3 0.57416 0.38928 0.55894), color(display-p3 0.56573 0.41352 0.613), color(display-p3 0.553 0.44 0.66246), color(display-p3 0.53648 0.46847 0.70607), color(display-p3 0.51682 0.49862 0.74276), color(display-p3 0.49493 0.53008 0.77168), color(display-p3 0.47202 0.56237 0.79226), color(display-p3 0.44976 0.59494 0.80424), color(display-p3 0.43039 0.6272 0.80767), color(display-p3 0.41667 0.65849 0.80292))"></div>
5621+
55965622
</div>
55975623

55985624
Angles are adjusted so that |θ₂ - θ₁| ∈ (-360, 0]. In pseudo-Javascript:

0 commit comments

Comments
 (0)