HSL colour controller 🎨

A dynamic HSL colour controller

• Made with node.js, express.js and pug - a template engine for Node
• Using the W3Color JavaScript Library to convert the HSL values to RGB and HEX
• Fully responsive and mobile friendly
• HSL values are controlled by the range inputs which update the 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