# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/tools/oklch-gradient. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
[tools](/tools)/[color](/tools/category/color)

# OKLCH gradient comparison

Put the same two colors through both interpolation spaces side by side, see where sRGB loses its chroma, and copy the gradient that keeps it.

From#eab308To#2563eb

Stops

sRGB, the default

#eab308#d8ac1d#c6a431#b49d46#a2965b#908f6f#7f8784#6d8098#5b79ad#4972c2#376ad6#2563eb

OKLCH, in oklch

#eab308#cbb700#a5bb12#75be3e#26be5f#00bb7f#00b59c#00abb7#009dce#008cdf#0079e9#2563eb

Halfway along, the sRGB ramp has lost 86% of its chroma: that is the grey dip in the top strip. Interpolating in OKLCH keeps the color.

default.csscss

/* the browser interpolates in sRGB unless told otherwise */
.hero {
  background-image: linear-gradient(90deg, #eab308, #2563eb);
}

oklch.csscss

/* one phrase moves it to a space that keeps the chroma up */
.hero {
  background-image: linear-gradient(90deg in oklch, #eab308, #2563eb);
}

stops.csscss

/* or write the stops out, for anywhere without the syntax */
.hero {
  background-image: linear-gradient(90deg, #eab308, #cbb700, #a5bb12, #75be3e, #26be5f, #00bb7f, #00b59c, #00abb7, #009dce, #008cdf, #0079e9, #2563eb);
}

## Questions

Why does my gradient go grey in the middle?+

Because the browser interpolates in sRGB by default, and the straight line between two distant hues passes near the centre of the color space, which is grey. The further apart the hues, the worse the dip.

How do I fix it?+

Add the space to the gradient: linear-gradient(90deg in oklch, ...). One phrase, and the ramp travels round the hue circle instead of through the middle.

What about browsers without the syntax?+

Write the stops out. The third snippet lists the computed colors, which gives the same ramp anywhere, at the cost of a longer declaration.

## Related tools

[CSS gradient generatorBuild a linear, radial or conic gradient by dragging its stops, then copy it as plain CSS, as a Tailwind arbitrary value, or as a theme variable.](/tools/css-gradient)[Color mixerBlend two colors across as many steps as you need, in OKLCH or sRGB, and copy the ramp as color-mix() declarations or as plain hex.](/tools/color-mixer)[Color blindness simulatorSee a palette the way readers with protanopia, deuteranopia, tritanopia or achromatopsia see it, and get told which pairs collapse into each other.](/tools/color-blindness)

Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · 

## The tools are free. So is most of the library.

1935 blocks and 989 pieces for shadcn/ui and Tailwind, built on the same tokens these tools write. Install one with a command and the code is yours.

[Browse the blocksBrowse the blocks](/blocks)

No signup for the tools. MIT for free blocks, commercial licence for Pro.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.