RGB to OKLCH converter

This RGB to OKLCH converter turns three familiar sRGB channels into perceptually uniform cylindrical color coordinates. Enter red, green, and blue values from 0 to 255 and receive OKLCH lightness, chroma, and hue, plus a ready-to-copy CSS-style string. The calculation follows the complete deterministic path: sRGB transfer-function decoding, linear RGB to OKLab matrices, and OKLab to cylindrical OKLCH conversion. Invalid, missing, non-finite, or out-of-range channels return a clear validation error instead of silently clipping the color. It is useful for design tokens, palette analysis, color interpolation, and modern CSS workflows that need more predictable visual relationships than direct RGB arithmetic provides.

Why convert sRGB coordinates to OKLCH

RGB describes how a display combines red, green, and blue light, but equal numerical changes in those channels do not usually look equally large to a person. Increasing one channel by twenty may create an obvious shift in one region of the gamut and a subtle shift somewhere else. OKLab was designed to make coordinate distances correspond more closely to perceived color differences.

OKLCH rearranges OKLab into cylindrical coordinates that are easier to reason about: lightness describes how light or dark the color appears, chroma describes its distance from the neutral axis, and hue gives the angle around that axis in degrees. This makes OKLCH especially convenient for building token ramps, generating related colors, and comparing palette entries. The converter keeps the input contract deliberately narrow: it accepts actual sRGB channel values between 0 and 255, including fractional values, rather than attempting to guess hex strings, percentages, named colors, or wide-gamut profiles.

A narrow contract prevents an innocent formatting mistake from becoming a plausible but incorrect color. The returned hue is normalized to the range from zero up to, but not including, 360 degrees. For an achromatic color whose hue is mathematically undefined, the result uses zero as a stable deterministic convention.

How the conversion is calculated

The calculation cannot apply an OKLab matrix directly to the displayed channel numbers because ordinary sRGB values are transfer-encoded. Each input channel is first divided by 255 and decoded with the standard piecewise sRGB transfer function. Low values use the linear segment; higher values use the power function.

The three resulting linear-light components are multiplied by the fixed linear RGB to LMS matrix used by the OKLab definition. A cube root is applied to each LMS component, followed by the second fixed matrix that produces OKLab lightness and the two opponent axes conventionally called a and b. Finally, cylindrical conversion computes chroma as the Euclidean length of the a and b pair and hue with atan2, converted from radians to degrees and normalized to a positive circle.

Lightness is returned on the conventional OKLab scale from approximately zero to one for in-gamut sRGB colors, not as a percentage. Chroma has no percentage sign and depends on gamut; hue is expressed in degrees. The included oklch string uses those same values, so it can be copied or transformed without reconciling a second rounding policy.

Using the result safely in design and code

Send numeric fields named r, g, and b. Every field is required and must be finite and within the inclusive range from 0 to 255. The converter accepts fractional channel values because sampled images and intermediate color pipelines sometimes preserve more than eight-bit integer precision, but it does not accept numeric strings, NaN, Infinity, arrays, or objects in place of a channel.

OKLCH is useful for perceptual editing, but a mathematically generated color may still fall outside the gamut of a target display or export format when you later increase chroma or change lightness. This converter reports the coordinates of the supplied in-gamut sRGB color; it does not perform gamut mapping, contrast checking, alpha compositing, color-profile conversion, or accessibility certification. Use a dedicated gamut mapper after editing coordinates and a contrast tool against the actual foreground and background pair.

Because the algorithm uses no network, clock, random source, or mutable state, identical inputs produce identical output in both execution channels.