How to Build an OKLCH CSS Gradient

How do you copy an OKLCH CSS gradient?

Type two colors. The page blends them in OKLCH and puts the CSS on one line. Copy CSS is the declaration to paste. Blue #0000ff to yellow #ffff00 is the pair that opens the page.

The strip is painted from sampled hex stops, so you can see the blend before you paste. Copying an OKLCH linear gradient into a stylesheet is the job the button is for.

What is an OKLCH CSS gradient?

An OKLCH CSS gradient is a linear gradient whose stops are blended in OKLCH. Lightness, chroma, and hue move from the start color to the end color. The copied line names that space, so a supporting browser does the same blend.

The declaration reads linear-gradient, to the right, in oklch, then the two hex stops. Nine samples sit under the strip. Each sample is a hex you can copy on its own.

It works by stepping lightness, chroma, and hue, then writing the declaration. For example, this css gradient generator oklch interpolates #0000ff to #ffff00. Input: blue #0000ff and yellow #ffff00 as the two stops.

Output: one linear gradient generator line, plus sampled hex stops. Browsers that lack OKLCH interpolation still paint the strip from those samples. The sRGB midpoint is the gray the note compares with the OKLCH middle.

Why does blue to yellow go gray?

Checking whether blue to yellow goes muddy in sRGB is why that pair is the default. Channel blending walks red, green, and blue in a straight line. Those channels do not track how bright a color looks, so the middle loses chroma.

The note fires when the OKLCH middle keeps at least 0.04 more chroma than the sRGB middle. Two grays, such as #777777 to #bbbbbb, stay quiet because there was little chroma to lose. A clamped sample is named only when the middle is not muddy.

What is the difference between an OKLCH gradient and an sRGB gradient?

The difference between an OKLCH gradient and an sRGB gradient is which numbers get blended. OKLCH blends lightness, chroma, and hue along the short way around the hue circle. sRGB blends the three channels, and that is the mix that goes gray between saturated stops.

Sampling hex stops when a browser does not interpolate in OKLCH is what the row under the strip is for. Paste the OKLCH line when the browser understands it. Keep the samples when it does not. A shade scale from one stop is a different page: the color shades generator.

Which gradient mistakes show up late?