Hex to OKLCH converter: lightness, chroma and hue from a hex code

The hex code gives sRGB values, and the converter turns each channel into linear light. A matrix then gives approximate cone responses, each response goes through a cube root, and a second matrix turns the result into L, a and b. Chroma is the length of the (a, b) pair and hue is its angle, so OKLCH is the same space in polar form. Björn Ottosson designed Oklab to be simple to use while still predicting perceived lightness, chroma and hue well. You don't need the matrix numbers, since the converter does that work.

Lightness is where OKLCH and HSL disagree. HSL gives pure yellow 50% lightness and pure blue 50%, but OKLCH gives 96.8% and 45.2%. Yellow is the lighter of the two in OKLCH. MDN calls the L in oklch() the perceived lightness, which is different from the L in hsl(), where it represents lightness as compared to other colors.

A gray has chroma 0, and the converter writes its hue as 0 too, since a gray has no real hue. Mid gray is oklch(59.99% 0 0) and white is oklch(100% 0 0). In CSS, chroma can be a number or a percent, and 100% equals 0.4. MDN says chroma has no fixed top, but in practice it doesn't exceed 0.5. The converter rounds lightness and hue to two decimals and chroma to four. That's just enough for the oklch() text to give back every hex code within one step per channel, but the hex code stays the exact source.