—
—
OKLCH GRADIENT TOOL · BY ALLWEBSITES.DESIGN
Same colors. Different interpolation.
Paste a HEX gradient or build one from scratch. Compare the exact same stops in sRGB and native OKLCH, inspect what changes, choose the hue path, and copy production-ready CSS.
Native CSS · 4 hue routes · Named-color search · No signup
INSPECTOR
Inspect this point
Drag across the gradient to compare the color produced by each interpolation path at the same position.
Position50%
OKLCH path—
—sRGB path—
—sRGB mapping—
—Drag the center handle to compare interpolation.
01
Gradient
Current import supports HEX-based linear-gradient() values.
Color stops
Use the picker, enter a HEX value, or search a color name.
Hue routeChoose which way OKLCH travels around the hue circle.
Advanced fallback settings
Most workflows can keep the default 33 samples. This setting only affects the portable HEX fallback.
02
Why it changes
The endpoints are the same. The interpolation path is not.
—
—
Midpoint difference
0.000 ΔEOK
Perceptual distance measured in OKLab. This is not a quality score.
Midpoint chroma
sRGB — · OKLCH —
Higher chroma is not automatically better.
These measurements explain a difference. They do not decide which gradient is better.
03
Same colors. Different interpolation.
Both gradients use the exact same stops, positions and angle. Only the interpolation space changes.
Interpolation spacesRGB
Traditional sRGB interpolation.
Interpolation spaceNative OKLCH
Interpolation through perceptual lightness, chroma and hue.
04
Copy the gradient you actually want to ship.
Native first. Fallback second.
PRIMARY OUTPUT
Native CSS
The browser performs the OKLCH interpolation.
PORTABLE
HEX fallback
Samples the OKLCH path and exports conventional sRGB-compatible HEX stops.
METHOD
Native first. Fallback second.
The live OKLCH result uses native CSS interpolation when the browser supports it. The fallback is generated separately by sampling the OKLCH path and mapping those samples into sRGB where necessary. They solve different compatibility needs.
HOW IT WORKS
A gradient is more than its endpoints.
The browser has to calculate every color between your stops. Change the interpolation space and that journey changes. TrueGradient keeps the stops fixed so the difference is visible, inspectable and reproducible.
sRGB vs OKLCH
Traditional web gradients commonly interpolate legacy colors through sRGB channels. OKLCH describes color through perceptual lightness, chroma and hue. Neither is automatically “better”; they create different paths.
What does in oklch mean?
Native CSS declares OKLCH as the interpolation space. The browser calculates the colors between your original stops rather than TrueGradient inserting decorative midpoint colors.
Hue routes
Hue wraps around a circle. Shorter, longer, increasing and decreasing routes let you choose which direction OKLCH travels while keeping the endpoints fixed.
Native vs fallback
The native output is actual OKLCH interpolation. The HEX fallback is a sampled approximation for workflows that need ordinary sRGB-compatible stops.
FAQ
TrueGradient questions
Is TrueGradient an OKLCH gradient generator?
Yes, but its main purpose is controlling and comparing gradient interpolation rather than simply picking two colors.
Does TrueGradient change my endpoint colors?
The native comparison keeps the same stops and positions while changing the interpolation space.
Is the live OKLCH result native CSS?
Yes when the browser supports CSS gradient interpolation in OKLCH. TrueGradient detects support and clearly labels the status.
Is the HEX fallback native OKLCH?
No. It samples the OKLCH path and converts the result into ordinary sRGB-compatible HEX stops.
Is OKLCH always better than sRGB?
No. They are different interpolation choices. Use the path that produces the result you want.
Can I import any CSS gradient?
Not yet. The current parser intentionally supports HEX-based linear-gradient() values.
How many stops can I use?
The current editor supports 2–6 stops.
What is ΔEOK?
It is a perceptual color-distance measure in OKLab. TrueGradient uses it to compare results; it is not a quality score.