# 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/tailwind-color-scale. 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)/[tailwind](/tools/category/tailwind)

# Tailwind color scale generator

Turn one hex color into a full 50 to 950 Tailwind scale in OKLCH, with the @theme block and the shadcn tokens ready to paste.

Base color#4f46e5Scale name

50#f3f5ff100#e4e9ff200#cfd7ff300#b0bbff400#8894ff500#7178ff600#5f5cff700#4f46e5800#4038be900#3630a1950#1a125f

Tailwind @themeshadcn tokensHex object

theme.csscss

@theme {
  --color-brand-50: oklch(0.971 0.0138 276.97);
  --color-brand-100: oklch(0.936 0.0308 276.97);
  --color-brand-200: oklch(0.885 0.0564 276.97);
  --color-brand-300: oklch(0.808 0.0972 276.97);
  --color-brand-400: oklch(0.704 0.1562 276.97);
  --color-brand-500: oklch(0.637 0.1967 276.97);
  --color-brand-600: oklch(0.577 0.2346 276.97);
  --color-brand-700: oklch(0.5106 0.2301 276.97);
  --color-brand-800: oklch(0.444 0.2004 276.97);
  --color-brand-900: oklch(0.396 0.1756 276.97);
  --color-brand-950: oklch(0.258 0.1286 276.97);
}

Copy theme.css

[Made something you like?Browse blocks that use these tokens](/blocks)

## Questions

Why OKLCH instead of HSL?+

OKLCH is perceptually uniform, so every step of the scale looks like an equal step in lightness. HSL scales drift: the same lightness value reads much brighter for yellow than for blue. Tailwind v4 ships its own palette in OKLCH for the same reason.

How do I use the output in Tailwind v4?+

Paste the @theme block into your CSS entry file. Tailwind v4 reads theme variables from CSS, so a --color-brand-500 variable immediately gives you bg-brand-500, text-brand-500 and every other color utility.

What are the shadcn tokens for?+

shadcn/ui reads semantic variables such as --primary and --primary-foreground. The second tab maps the generated scale onto those variables for light and dark mode, so a Beste UI block picks up the new color with no class changes.

## Related tools

[Color contrast checkerCheck a text and background pair against every WCAG 2 threshold at once, with a live sample in both sizes and the ratio as you adjust the colors.](/tools/contrast-checker)[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)[CSS to TailwindTurn CSS declarations into Tailwind v4 utilities, with the spacing scale worked out and arbitrary values where there is no named class.](/tools/css-to-tailwind)

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.