Single file HTML color picker using Oklab, a perceptual color space invented by Björn Ottosson.
Besides RGB (red, green, blue), this color picker also exposes LCH:
- Luminocity: How bright the color is.
Goes from black to white. - Chroma: How strong or saturated the color is.
Goes from colorless, grey, to colorful. - Hue: The actual color value.
LCH is the polar form of Oklab. This means hue represents an angle and wraps around. The angle is in radians, which goes from negative PI to positive PI, or -3.141 to +3.141.
Note that Oklab is a larger color space than RGB. This means not every Oklab color can be represented as an RGB color. You can choose whether you want to clamp or hide invalid Oklab colors. In case of hiding, invalid colors will be drawn as magenta #ff00ff.
If you selected an invalid RGB color, it will be marked by this emoji: 🛑 Clicking on the emoji will clamp the color into valid range.
See a fully embedded, working version on my website: https://www.rismosch.com/article?id=color-picker