Color Format Converter

How to use

1. 1Paste a color in any supported format: a HEX value with or without a #, rgb()/rgba(), hsl()/hsla(), hwb(), cmyk(), or a named CSS color like tomato or rebeccapurple.
2. 2The tool auto-detects what you typed and shows the parsed result on a checker background so transparency is visible.
3. 3Copy any single format from the All formats grid, or use Copy all to grab a multi-line bundle of every format at once.
4. 4Try the sample buttons (HEX, rgb(), hsl(), hwb(), Named, and more) to see how each input looks in every other format.
5. 5Use Clear to reset the input and start fresh.

About this tool

Color Format Converter takes any CSS color value you paste and converts it into every other common format at once. The tool auto-detects what you typed (HEX, rgb(), rgba(), hsl(), hsla(), hwb(), cmyk(), or a named CSS color), parses it into a canonical sRGB representation, and then emits the value in 6-digit HEX, 8-digit HEX with alpha, the short 3 or 4 digit HEX form (when each pair repeats), legacy and modern rgb()/rgba(), hsl()/hsla() with degree-based hue, hwb() with whiteness and blackness, cmyk() approximated through sRGB, and the closest matching named CSS color when one exists. Hue angles are accepted with or without a unit (deg, rad, turn, grad), saturation, lightness, whiteness, and blackness use percentages, and rgb() channels accept either 0 to 255 integers or 0% to 100% percentages. Modern space-separated CSS Color Module Level 4 syntax (with a / before alpha) and the older comma-separated form are both parsed without configuration, so anything you copy from a design tool, browser inspector, or stylesheet just works. The result panel shows a live swatch on a checker background so transparency is obvious at a glance, and the bundle block joins every format into one block of plain text that copies cleanly into a variable file or design hand-off. Each row has its own copy button, plus the tool emits a ready-made CSS custom-property declaration and a Tailwind v3+ arbitrary-value utility class so you can drop the color straight into a stylesheet or markup. Useful for design hand-offs, theming, dark-mode work, comparing what a color looks like in different spaces, sanity checking print-targeted CMYK, and finding the named CSS equivalent for accent colors. Everything runs in your browser. Pasted values, design tokens, and brand colors never leave your device.

Free to use. Works in your browser. No signup, no login.