RHSL is a lightweight color picker that uses the HSL color space, and alternatively supports HSLuv. It's made to be very easy for developers to implement on their website, and also very easy for the end user to utilize.

The following code is all that is required to implement RHSL:

<link rel="stylesheet" href="rhsl.css">
<script src="hsluv.min.js"></script>
<script src="rhsl.js" defer></script>

<input value="#4C65AE" rhslcolor>



You can download the latest version of RHSL along with HSLuv by clicking here.

Current Version: v2.0

Older releases are available on GitHub.


RHSL is provided under the ISC License and its source code is available on GitHub.

How To Use

After adding the color picker's files to your webpage, you can add rhslcolor to any <button> or <input> element. Once the page loads, it'll immediatelly scan the entire page, looking for elements with that attribute so it can connect them to RHSL.

In order to customize the color picker and how it'll behave, you can add properties to the rhslcolor attribute. Those properties are documented in more detail in this page, along with many functions which you can use to dynamically manipulate the color picker itself.