Convert RGB to OKLCH

RGB to OKLCH Color Converter

RGB encodes light intensity. OKLCH encodes perception.

The three RGB channels map directly to the red, green, and blue phosphors of a display, which makes them useful for hardware but opaque for design decisions. OKLCH represents the same three colors as a lightness value (how bright each color looks), a chroma value (how colorful it is), and a hue angle (which color family it belongs to). Converting from RGB to OKLCH transforms a machine-centric encoding into one optimized for designers making perceptual adjustments.

How the conversion works

The RGB-to-OKLCH pipeline runs through three intermediate spaces. First, sRGB integers normalize to 0–1 floats and linearize by undoing the sRGB gamma curve. Then a matrix multiplication transforms the linear sRGB triplet to XYZ-D65, a device-independent color space. A second matrix converts XYZ-D65 to OKLab, the perceptual model underlying OKLCH. Finally, OKLCH extracts L directly from the OKLab L channel, computes chroma as √(a² + b²), and hue as atan2(b, a) in degrees.¹ The entire pipeline is a fixed sequence of linear algebra: no table lookups, no approximations, and no heuristic shortcuts. Every matrix coefficient is defined by the sRGB specification and the OKLab publication.

Where this comes up

RGB-to-OKLCH conversion appears at the intersection of existing tools and modern CSS. A developer who reads a color from a canvas getImageData() call, a computed CSS style, or a database row stored as rgb() integers needs to express it in OKLCH before using it in a Tailwind v4 config. Accessibility tools that compute WCAG contrast ratios in OKLCH space also require the input colors in that format, even when the original design stored them as RGB. Converting first means your contrast checks run against the same perceptual coordinates that the final stylesheet will ship. Design tokens stored as OKLCH survive a change of target format without losing their intended appearance.

Edge cases and rounding

RGB integers at the extremes (rgb(0, 0, 0) and rgb(255, 255, 255)) convert cleanly to oklch(0, 0, 0) and oklch(1, 0, 0) respectively. Achromatic values where r equals g equals b produce chroma 0 and an undefined hue, which the conversion outputs as 0° by convention. Very saturated sRGB colors near the gamut boundary may produce OKLCH chroma values above 0.4, which are still within the sRGB gamut but near its edge. Floating-point arithmetic across the four-space pipeline means a round-trip of RGB to OKLCH to RGB may differ by 1 in one channel due to accumulated rounding. This tolerance is within the threshold of visual indifference, so a one-unit shift does not indicate a conversion defect.

Using OKLCH values in CSS custom properties

CSS custom properties that store OKLCH coordinates give you direct access to perceptual channels from any rule in your stylesheet. Define --color-primary: oklch(0.612 0.212 261.5) in :root, then reference it anywhere with var(--color-primary). When you need a lighter variant for a hover state, use CSS relative color syntax: color(from var(--color-primary) oklch calc(l + 0.12) c h).² This produces a 12% lighter shade in pure CSS, without a second custom property or a preprocessor loop.

Deriving palette steps with relative color syntax

CSS Color Level 4 relative color syntax lets you derive multiple shades from a single OKLCH base without defining each one manually. Starting from --color-blue: oklch(0.612 0.212 261.5), you can express --color-blue-300 as color(from var(--color-blue) oklch calc(l + 0.22) calc(c * 0.7) h) and --color-blue-700 as color(from var(--color-blue) oklch calc(l - 0.15) calc(c * 0.9) h). Each derived value stays in OKLCH, preserving perceptual uniformity across the full shade range. Browsers that do not support relative color syntax ignore these declarations, so always provide a static fallback value before the derived one.

The relative syntax also keeps every shade bound to the same source token, so a later change to the base color propagates through the entire scale automatically. That single-source behavior is what makes OKLCH scales easier to maintain than hand-listed HSL steps, where each value is an isolated triple that has to be edited on its own. Because the derivation happens in CSS at parse time, the perceptual relationship between steps is preserved even after you swap the base for a different hue.

RGB to OKLCH for canvas and image data workflows

Canvas getImageData() returns raw pixel values as Uint8ClampedArray segments in RGBA order. When you sample a pixel from a canvas, you can read a pixel color as an OKLCH token for a design token or CSS custom property, and the RGB-to-OKLCH conversion is the bridge between the rendering layer and the design system layer.³ A pixel reading [59, 130, 246, 255] converts to approximately oklch(0.612 0.212 261.5), which you can then use in a stylesheet or store as a design token.

Handling alpha channels through the conversion

The OKLCH model does not encode alpha. When you convert an RGBA pixel to OKLCH, the alpha channel passes through unchanged as a separate value. Store it alongside the OKLCH coordinates as a two-part token: oklch(0.612 0.212 261.5 / 0.8) combines the color and alpha in a single CSS expression. For image processing pipelines that need to composite or blend colors, keep alpha as a separate float between 0 and 1 until the final CSS output stage.

Performance considerations for client-side conversion

Converting every pixel in a large image from RGB to OKLCH on the main thread blocks the UI. A 1920x1080 image contains over two million pixels; converting each through the four-space pipeline (sRGB to linear to XYZ to OKLab to OKLCH) takes measurable time on the main thread. Offload bulk conversions to a Web Worker, or use WebGL shaders that perform the matrix math in parallel on the GPU. For single-color conversions, the synchronous approach is fast enough: a single RGB-to-OKLCH conversion completes in under a millisecond on any modern device.

Caching converted values in a Map

When your application repeatedly converts the same RGB values (for example, reading palette colors from a fixed set of image regions), cache the results in a Map keyed by the RGB string. A lookup like cache.get("59,130,246") avoids re-running the full pipeline for values you have already converted. This pattern is especially useful in real-time applications like video frame analysis or interactive color pickers where the same dominant colors appear across consecutive frames.

When to use this

Use this when a color stored as RGB integers needs to be expressed in OKLCH for a CSS Color Level 4 variable, a Tailwind v4 theme config, or a perceptual color scale calculation.

Examples

rgb(200, 255, 0)

oklch(0.960 0.241 128.2)

rgb(59, 130, 246)

oklch(0.612 0.212 261.5)