# 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-converter. 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 converter

Paste a color in any notation and read it back in all of them, including OKLCH, Lab and Display P3, each one a click from your clipboard.

Color#4f46e5Or paste a notation

HEX#4f46e5

RGBrgb(79 70 229)

HSLhsl(243.4 75.4% 58.6%)

OKLCHoklch(0.5106 0.2301 276.97)

LABlab(39.38 41.55 -80.97)

LCHlch(39.38 91 297.16)

Display P3color(display-p3 0.3039 0.2758 0.8646)

## Questions

Which notations can I paste in?+

Hex with three, six or eight digits, and rgb(), hsl(), oklch() or lab() with or without commas. Whatever goes in, every other notation comes out beside it.

Why does Lab use a different white point?+

Because CSS defines lab() and lch() against D50, the white point print work uses, while sRGB and P3 are D65\. The conversion here does the Bradford adaptation between them, which is why the numbers match what a browser reports.

What is the Display P3 row for?+

It is the same color expressed in the wider gamut most current screens can show. Values inside 0 to 1 are reachable there; a component outside that range means the color cannot be displayed in P3 either.

## Related tools

[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 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)[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.