<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.