# 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/color-palette. 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)

# Color palette generator

Build a palette from one color using the classic hue relationships, each hue shown at five lightness steps and exported as @theme variables.

Base color#4f46e5RelationshipAnalogous

#a4d3ff#2ea5ff#007fce#005992#00355b#c1caff#8792ff#605efe#422fd0#270093#debeff#c075ff#9e43e1#7702b5#490072

palette.csscss

@theme {
  --color-accent-1-100: oklch(0.85 0.0786 246.97); /* #a4d3ff */
  --color-accent-1-200: oklch(0.7 0.1665 246.97); /* #2ea5ff */
  --color-accent-1-300: oklch(0.58 0.1524 246.97); /* #007fce */
  --color-accent-1-400: oklch(0.45 0.1183 246.97); /* #005992 */
  --color-accent-1-500: oklch(0.32 0.0841 246.97); /* #00355b */
  --color-accent-2-100: oklch(0.85 0.0746 276.97); /* #c1caff */
  --color-accent-2-200: oklch(0.7 0.1585 276.97); /* #8792ff */
  --color-accent-2-300: oklch(0.58 0.2301 276.97); /* #605efe */
  --color-accent-2-400: oklch(0.45 0.2301 276.97); /* #422fd0 */
  --color-accent-2-500: oklch(0.32 0.1981 276.97); /* #270093 */
  --color-accent-3-100: oklch(0.85 0.0953 306.97); /* #debeff */
  --color-accent-3-200: oklch(0.7 0.2034 306.97); /* #c075ff */
  --color-accent-3-300: oklch(0.58 0.2301 306.97); /* #9e43e1 */
  --color-accent-3-400: oklch(0.45 0.2301 306.97); /* #7702b5 */
  --color-accent-3-500: oklch(0.32 0.1645 306.97); /* #490072 */
}

[Made something you like?Blocks to try the palette on](/blocks)

## Questions

What do the relationships mean?+

They are rotations around the hue wheel. Complementary is the opposite side, analogous the neighbours, triadic three evenly spaced, and split complementary the two colors either side of the opposite. Each one is a different amount of tension.

Why five steps per hue?+

Because a hue on its own is not a palette. An interface needs a light fill, a mid tone to sit on, and a dark one for text, and generating them together keeps the chroma consistent across the set.

Are the colors all displayable?+

Yes. Each step is clamped into sRGB by lowering chroma while lightness and hue stay put, so a bright hue at a dark lightness comes back muted rather than clipped to something else.

## Related tools

[Tailwind color scale generatorTurn one hex color into a full 50 to 950 Tailwind scale in OKLCH, with the @theme block and the shadcn tokens ready to paste.](/tools/tailwind-color-scale)[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.