nKolorLib – JavaScript HSV Color Picker Without Dependencies

nKolorLib is a lightweight JavaScript HSV color picker library without dependencies, providing two pickers and a Color class for color conversion and management. Its goal is to offer functional HSV color selection without dependencies and without being tied to a specific UI framework.

Why use an HSV color picker

HSV (Hue, Saturation, Value) is more practical for color selection compared to RGB because it separates:

• the actual color (Hue)
• the intensity (Saturation),
• the brightness (Value).

This makes color adjustment more intuitive and closer to how we perceive and modify colors.

Available HSV color pickers

The library provides two different implementations:

SV Picker

A 2D Saturation / Value surface with sliders for Hue and Alpha. Suitable when you want control over intensity and brightness while keeping Hue separate.

HV Picker

A 2D Hue / Value surface with sliders for Saturation and Alpha. An alternative layout that may better suit different workflows.

Color class for color conversions

The Color class is based on HSV + Alpha and provides:

• Conversion to HEX
• Conversion to RGB
• Conversion to HSL
• HSV output
• Alpha channel support
• Similar color generation 
• Utility conversion methods

This avoids repeatedly implementing color conversion logic in each project.

Library features

• No dependencies
• Can be integrated into any UI
• Fully scoped styles via prefix (.nKolorLib-*)
• Does not require a framework

When it makes sense to use it

• In custom web applications with theming
• In tools that require precise HSV control
• When you do not want to depend on a large UI library

Usage in JavaScript (ES Module)

import nKolorLib from '../nKolorLib.js';
const svPicker = nKolorLib.getSVPicker(document.getElementById("svPicker"));
const hvPicker = nKolorLib.getHVPicker(document.getElementById("hvPicker"));
const color = nKolorLib.getColor(0.5, 0.5, 0.5, 1);

The picker has a default width of 350px. The height is adjusted automatically. To change the width, add the following to your CSS file:

nKolorLib-picker{
   width: 450px !important;
}

You can also use this rule for smaller screen sizes to make the picker responsive.

Download and source code

You can download the library by clicking here.

After downloading, extract the archive and update 'the import nKolorLib from' statement according to the directory where you saved the file.

The library is open source under the GNU GPL v3.0 license, and you can view the source code on GitHub here.

You can view an online implementation of it at this link.