Color Converter
Paste any CSS color and get it in every format, plus tints and shades.
------How to use the Color Converter
- Type or paste a color in any CSS format, such as #3b82f6, rgb(59 130 246), hsl(217 91% 60%), oklch(…) or a name like "tomato".
- Or pick a color visually with the color picker.
- Every format appears on the right. Click Copy next to the one you need.
- Click a swatch in the tints and shades strip to explore lighter and darker versions.
About this tool
Colors on the web can be written in many ways. Designers often hand over HEX codes, older stylesheets use rgb() and hsl(), print work needs CMYK, and modern CSS increasingly uses oklch() because its lightness matches what the eye perceives. This converter reads any of them, including the 148 named CSS colors and 4- or 8-digit HEX with transparency, and shows the same color in every format at once.
OKLCH is especially useful for building palettes. Changing only the L (lightness) value keeps the hue looking consistent, which is not true of HSL, where a yellow and a blue with the same "lightness" look very different. The tints and shades strip uses exactly this approach: it steps OKLCH lightness from very light to very dark while keeping hue and chroma, then brings any out-of-range colors back inside the sRGB gamut.
Tip: CMYK values here are a simple mathematical conversion. Real printed color depends on the paper and ink profile, so ask your printer for a proof when exact color matters.
Frequently asked questions
Does this tool upload anything?
No. Parsing and conversion run in your browser. Nothing you type is sent anywhere.
What is OKLCH and why use it?
OKLCH describes a color by perceived lightness (L), chroma or colorfulness (C) and hue angle (H). Equal steps in L look like equal steps to the eye, which makes it great for consistent palettes and accessible contrast.
Why did my OKLCH color change slightly?
Some OKLCH values describe colors that screens using the standard sRGB range cannot show. The tool lowers the chroma just enough to fit, keeping lightness and hue, and shows the result.
Are the CMYK values accurate for printing?
They are a device-independent approximation. Professional printing uses color profiles (ICC) that vary by press and paper, so treat these values as a starting point.
Does it support transparency?
Yes. 4- and 8-digit HEX and the alpha part of rgb(), hsl(), hwb() and oklch() are kept. CMYK has no alpha, so it is ignored there.