<div class="hsl-named-longer">
  <p>HSL linear gradient</p>
</div>

<div class="lch-named-longer">
  <p>LCH linear gradient</p>
</div>

.hsl-named-longer {
  background: linear-gradient(to right in hsl longer hue, orange, yellow);
}

.lch-named-longer {
  background: linear-gradient(to right in lch longer hue, orange, yellow);
}

body {
  margin: 1rem;
  font-family: sans-serif;
  font-size: x-large;
  font-weight: bold;
  color: white;
}

div {
  outline: 4px dashed cornflowerblue;
  margin-bottom: 1rem;
}

p {
  padding: 1rem;
}