color-picker

A color picker in TypeScript — a hue ring with an HSV triangle that rotates so its pure-hue corner always points at the hue handle. No runtime dependencies.

#FF0000

rgb
hsv

Usage

<link rel="stylesheet" href="dist/color-picker.min.css">
<script src="dist/color-picker.min.js"></script>

<script>
  var picker = new ColorPicker({
    appendTo: document.getElementById('container'),
    hex: '#ff0000',
    wheelDiameter: 250,
    wheelThickness: 24,
    handleDiameter: 16,
    onChange: function (color) {
      console.log(color.hex, color.rgb, color.hsv);
    }
  });
</script>

Notes

The triangle is a blend, not a lookup. An HSV color is exactly the linear RGB mix of the triangle's three corners — hue, white and black — so it renders as a barycentric interpolation with no color conversion per pixel.
Drag anywhere inside the ring. In the gaps at the triangle's corners the position clamps onto the nearest edge, so the hue never shifts mid-drag.
hex, rgb and hsv are readable and writable. Invalid hex is ignored, so the setter can be wired straight to an <input>. Gray and black keep the hue and saturation you already had.
Keyboard accessible. Both handles are focusable sliders: arrow keys move by 1, Shift by 10, Home/End jump to the extremes.