<header>
  <h2>Gradient Hue Interpolation</h2>
  <p>Gradient is just an angle rotation in HSL, but with Color 4 you can tell it which way around to go.</p>
</header>

<main id="app"></main>
@import "https://unpkg.com/open-props" layer(design.system);
@import "https://unpkg.com/open-props/normalize.min.css" layer(demo.support);

@layer demo {
  main {
    display: grid;
    gap: var(--size-5);
    inline-size: clamp(90%, calc(var(--size-content-3) * 1.5), 90vw);
  }
  
  .ramp {
    display: flex;
    block-size: 5vh;
  }
  
  .swatch {
    flex: 1;
  }
  
  header {
    text-align: center;
  }
  
  header > p {
    max-inline-size: var(--size-content-2);
    margin-inline: auto;
  }
}

@layer demo.support {
  body {
    display: grid;
    place-content: center;
    padding: var(--size-5);
    gap: var(--size-5);
    justify-items: center;
  } 
}
import Color from 'https://colorjs.io/dist/color.js'

function updateUI() {
  const color1 = new Color('hsl(180deg 100% 75%)')
  const color2 = new Color('hsl(240deg 100% 75%)')
  
  const interpolations = ['shorter', 'longer', 'increasing', 'decreasing']
  
  let mix = null
  let rows = ''

  for (let strategy of interpolations) {
    mix = color1.steps(color2, {
      hue: strategy,
      space: 'hsl',
      steps: 200,
      outputSpace: 'srgb',
    })

    rows += `
      <div>
        <h4>${strategy}</h4>
        <div class="ramp">
          ${mix.reduce((acc, item) => {
            return acc += `<div class="swatch" style="background: ${item}"></div>`
          }, '')}
        </div>
      </div>
    `
  }
  app.innerHTML = rows
}

updateUI()
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.