Gradient Paths: an interactive gradient generator that bends gradients through color space

A gradient between two colors is a path through a color space. Gradient Paths shows that path in 3D, inside the sRGB gamut as it sits in OKLab, OKLCH, CIELAB, CIE LCh, HSL, HSV, sRGB or linear sRGB, and lets you change its shape: a straight line, an orbit around the gray axis, a circular arc, quadratic and cubic Bézier curves, waypoints, or a smooth spline.

Stops can be spaced evenly by perceived color difference (OKLab ΔE), out-of-gamut colors are mapped by reducing chroma, and the result is exported as a CSS linear-gradient. Charts show each channel and the perceptual speed along the gradient, next to the browser's own CSS interpolation for comparison.

Space
Path

Hue direction
Control points

    Drag the numbered squares in the slice view. In waypoint modes, double-click the slice to add one.

    Spacing
    Out-of-gamut colors

    3D

    Channels

    2D slice

    Perceptual speed ΔE OK per 1% — flat means even

    This path
    Stops
    Browser