I made this fully responsive dynamic HSL colour controller with express.js and pug - a template engine for Node.

I used the W3Color JavaScript Library to convert the HSL values to RGB and HEX.

The HSL values are controlled by the range inputs which update CSS variables, which in turn display the colour and values in real time.

The colours object, in views/index.pug is used to render the range inputs

colours = { 
  h: { prop:'h', name: 'Hue', max: 360 }, 
  s: { prop:'s', name: 'Saturation', max: 100 }, 
  l: { prop:'l', name: 'Lightness', max: 100 }};
}

Here is how to iterate through the object to render each input. Notice the indentation which is necessary for pug to work:

each key in Object.keys(colours)
  div.v-center
    h3.m-5 #{colours[key].name}
    input(
      type='range'
      class='slider'
      name=`--${colours[key].prop}`
      value=`${colours[key].max / 2}`
      max=`${colours[key].max}`
      min="0" 
    )
    label #{colours[key].max / 2}

Links 🔗

• Live demo
• Source code
• Github repo

Further reading

• A great article from css-tricks.com:
  HSL() / HSLa() is great for programmatic color control
• A useful colours tutorial from w3schools.com