Free online tool
Free Online Color Converter — Hex, RGB, HSL, OKLCH, Tailwind
Convert any CSS color — hex, RGB, HSL, OKLCH, or a named color — to all formats simultaneously. Instant swatch preview with alpha transparency support. Exact Tailwind class match for default palette colors. 100% client-side — no tracking, no upload, no signup.
01How it works
Enter any color value
Type or paste a color in any supported format: hex, rgb(), hsl(), oklch(), or a CSS named color like 'tomato'. The swatch and all output rows update instantly.
Use the color picker (optional)
Click the color picker to choose a color visually. It syncs bidirectionally with the text input — picking a color updates the hex value in the input field.
Copy the format you need
Each output row (hex, rgb, rgba, hsl, hsla, oklch, and the Tailwind class if matched) has its own Copy button. Click to copy just that value to your clipboard.
FAQ
Frequently asked questions
What input formats are accepted?
The tool accepts: hex (#rgb, #rrggbb, #rrggbbaa), rgb() and rgba() with comma or space syntax, hsl() and hsla() with comma or space syntax and optional /alpha, oklch() with optional /alpha, and all 148 CSS Color Module Level 4 named colors (tomato, rebeccapurple, cornflowerblue, etc.). Named colors are case-insensitive.
How is alpha handled across the different output formats?
Alpha is fully preserved in every conversion. Hex outputs an 8-character #rrggbbaa string when alpha < 1. The rgba() and hsla() outputs always include the alpha value. The oklch() output uses the CSS Level 4 slash syntax (oklch(l c h / a)) when alpha < 1. The rgb() and hsl() outputs omit alpha by design — use rgba/hsla variants when you need it.
What is OKLCH and why would I use it?
OKLCH (Oklab LCH) is a perceptually uniform color space developed by Björn Ottosson in 2020. Unlike HSL, equal numeric steps in OKLCH produce equal perceived differences in lightness and chroma — which makes it ideal for programmatic palette generation, accessible contrast work, and color interpolation. It is natively supported in CSS Color Level 4 (oklch() function) and in all major browsers as of 2023.
How does the Tailwind class matching work?
The Tailwind match is exact — byte-for-byte. The tool only reports a class name when the parsed RGB triple matches a Tailwind v3 default palette entry exactly. There is no nearest-neighbor or distance-threshold matching. If your color is one value off from a palette entry, the tailwind field will be empty. This is intentional: approximate matches produce noise and wrong class names.
Need AI-powered document extraction?
This tool uses client-side processing. anyrow uses AI to extract structured data from PDFs, images, and scanned documents with 99% accuracy. 150 free extractions/month — no credit card required.