Personal project: A visual guide to HSLA color system

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” 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?

Check it out!
GitHub repo

Thank you!


Keep on coding!


Challenge… Make each of the last group of palletes selectable and bind them all to a single set of slider controls.

Also consider accessibility. A user confined to a keyboard will appeciate a number input control.

A clearer definition and demonstration of Saturation would also be a big plus. Show the relationship across the spectrum of a hue selection that is fully saturated, or that is a blend of its neighboring frequencies. Also a challenge.

This is awesome! My favourite forum moderator, thank you so much for your reply!

I love these challenges, adding some text explaining things and your sugestions would make the guide more succint and didactic… I will work on them as soon as I can!

I have a couple of challeges of my own that I’m going to add to yours:

I would love to make the custom palette downloadable (don’t know how, but I’ll find it out)

I would like to also use the old (rgb, hex, etc) and “new” color systems that are mentioned in this article from css tricks A Whistle-Stop Tour of 4 New CSS Color Features (I’ll have to study about this a bit more to understand them myself first)

Thank you!


1 Like

this tool is fantastic! I’m even more of an HSL fan now. I’m bookmarking it.


1 Like

Hello Dan!
I’m glad you found this useful, thank you for your comment!



UPDATE on the challenges by @mtf :

There are number input fields everywhere now, for accessibility.

More to come soon.


Cool! Same link as above?

Yes! I’ll copy it here again:


1 Like

Wicked! After all that work, and getting it right, the next part of the challenge is to have all the palettes in one strip (selectable hues) and a single set of controls that hook to the selected hue. Rather than having the same tool for multiple hues, it makes sense to have one tool that each can access. That’s my view, of course. This is still a challenge, tho.

There is a next challenge, TBA.

1 Like

Oh! Thank you! :dizzy:

There is something I have to finish with the accessibility challenge before the next one: that is to link the sliders to the number field in the custom palette form, so that the slider moves when typing a value, like it does in the HUE section, but right now is too late at night and I have to work tomorrow early… I’ll continue with this tomorrow!

And I haven’t forgotten about the “single set of controls” challenge (just haven’t figured out how to do that yet), nor about writing some texts to make this more didactic… I’ll try to get to that soon!

Thank you so much!


That was going to be the next challenge, but now you’ve discovered it, have at 'er. Do that first, then bring it down to one set of controls.

Think, delegation.

Say there are sixteen hue selectors in the strip. If we capture the strip as a group, each hue selector is a target within that context. We can direct the handler to apply any changes to that element’s properties.

Think, event bubbling.

When we give the group of elements in the strip a parent, events will bubble up to that parent. We can trigger a handler and let it work with the EventObject to capture the target and follow the action/data chain through that object.

<div id="strip">
    <li><div><!-- potential target --></div></li>
    <!-- ... -->

If the listener is bound to, "#strip" then the event object will have a binding to the target element which is visible at listener level. This all means just one listener, registered on the parent. The event object passes the instance bindings which are accessible to the handler, in that event. This is an extremely transient process.

1 Like

Extra Study

What are the properties of the EventObject? A challenge to the learner is find this out, both through documentation, and through code implementation, in that order. Do the docs, first, thoroughly.

How can we get our hands on the EventObject? Hint: We do it every time we handle one.

Maybe CC will cough up a prize for the first person to give us a breakdown of the event object, properties, first, methods, maybe.

1 Like