How to Convert Between HEX, RGB, HSL, and HSV Colors

A designer hands you a HEX code. Your codebase expects rgb(). A design tool exports HSL. Colors show up in enough different formats in web and app work that converting between them by hand — or worse, by memory — wastes time and invites mistakes.

One Color, Four Formats, All in Sync

QR Ivify's Color Converter keeps HEX, RGB, HSL, and HSV in sync at all times. Type a value into any one field, and the other three update instantly — there's no separate "convert" button because there's no separate step. You can also just click the swatch to pick a color visually if you don't have an exact value to start from.

Step by Step

1. Open Color Converter.
2. Type a color into any field — HEX (#3B82F6), RGB (rgb(59, 130, 246)), HSL (hsl(217, 91%, 60%)), or HSV — or click the swatch to pick one visually.
3. The other three formats update instantly to match.
4. Click the copy icon next to any field to copy that value.

A Note on Precision

HSL and HSV are shown as whole-number percentages, since that's how they're normally written and read. That's a small trade-off: converting back and forth between formats can shift a color by a unit or two out of 255 — completely imperceptible to the eye, but worth knowing if you're comparing exact values programmatically rather than visually.

Frequently Asked Questions

Does this upload my color values anywhere? No. All conversion happens entirely in your browser — nothing is sent to a server.

What input formats are accepted? HEX (#3B82F6 or the short #38F), RGB (rgb(59, 130, 246) or bare 59, 130, 246), HSL (hsl(217, 91%, 60%)), and HSV (hsv(217, 76%, 96%)) — with or without the function-name wrapper.

Does this support transparency / alpha? No — this converts opaque colors only, with no alpha channel.

Why did a value shift by 1 or 2 after converting formats? HSL and HSV are shown as whole-number percentages for readability, which can lose a small amount of precision when converting back to RGB — the shift is at most a couple of units out of 255, not visible to the eye.

Try It

Need to convert a color between formats without doing the math yourself? QR Ivify's free Color Converter keeps every format in sync live. Working with JSON or code that needs formatting too? See JSON Formatter.