RHSL is a lightweight color picker that uses the HSL color space, and alternatively supports HSL_uv. 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>

Features

• Lightweight: It only occupies 31KB of space (with HSLuv). Its interface is very compact and out of the way as well. It also comes with a minified version that occupies even less space.
• Cross-browser: It is fully functional on the latest versions of all major desktop and mobile browsers, including Internet Explorer.
• Completely customizable: By clever use of the rhslcolor attribute, it's possible to change the color picker's size, theme, and updating properties.

Download

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

Current Version: v2.0

Older releases are available on GitHub.

License

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.