Reading this great article The HSB Color System: A Practitioner's Primer by Erik D. Kennedy inspired me to create a visual guide with controls that allows the user to change these parameters and learn what those changes do.
Somewhere to have some hands-on practice on this great and not so much used color system.
It has three sections:
The first section is a guide to the color wheel, from 0º to 350º. A quick reference to each color and its angle degree in the color wheel, to learn about the first value: "H" the hue.
In the second section the user can learn how the hue selected with a slider changes within the other tree values: "S" saturation, "L" lightness and "A" alpha.
The third part , my favourite, lets the user create a custom color palette of five colors, modifying every parameter with sliders.
What do you think about it? What do you think could be usefull to add? Do you have an idea for improving it?
- HTML
- CSS
- JavaScript
How To Change CSS Values With A Slider! - CSS Custom Properties (Variables) & JavaScript https://www.youtube.com/watch?v=FgSfzJPyxhg
HTML5 input type range show range value https://stackoverflow.com/questions/10004723/html5-input-type-range-show-range-value
;)