Convert a color between HEX, RGB, HSL and HSV — all at once, with a live preview and one-click copy of ready-to-paste CSS. Type into any field and the rest update instantly.
Use the swatch to pick visually, or type an exact value on the right. Click any color box to copy it.
With or without #. Shorthand like #abc works too.
QADIR OS agents build accessible, on-brand pages end to end — palette, layout, copy and follow-up — automatically, on your own machine.
Join Early AccessJoin the waiting list for QADIR OS — the agentic operating system that turns a color and a sentence into a finished, high-converting page.
A color on screen is one thing described four ways. HEX and RGB both point to the same red, green and blue channels — HEX just writes them in base-16 (#2E75B6) and RGB in plain numbers (rgb(46, 117, 182)). HSL and HSV re-describe that same color by hue instead of channels, which is far easier to reason about when you want “the same blue but lighter” or “a touch less saturated.” This tool shows all four together and keeps them in sync: change any field and the others follow, with a live preview so you always see the result.
| Format | Looks like | Best when you want to… |
|---|---|---|
| HEX | #2E75B6 | paste one compact token into CSS, HTML or a design tool |
| RGB | rgb(46, 117, 182) | tweak individual red / green / blue channels, or add alpha |
| HSL | hsl(209, 60%, 45%) | lighten, darken or desaturate a hue predictably (CSS-native) |
| HSV / HSB | 209°, 75%, 71% | match the color picker in Photoshop, Figma and most design apps |
Both start with the same hue (0–360°, the position around the color wheel). They differ on the last two numbers. In HSL, Lightness runs black → vivid → white, so 50% is the most saturated version of the hue and 100% is always pure white. In HSV, Value runs black → brightest, so 100% is the most intense the hue gets and there is no automatic white. That is why the same color has different S and V numbers here than its S and L numbers — they are two honest descriptions of one point, not a mistake. HSL is what you write in CSS; HSV is what your design app's picker speaks.
HEX and RGB are perfectly interchangeable — both are three whole numbers from 0 to 255, so nothing is lost going back and forth. HSL and HSV are rounded to whole degrees and percentages so they stay readable, which means a full loop (RGB → HSL → RGB) can nudge a channel by a point or two. It is invisible on screen and safe for any design work. If you need byte-exact color, keep the HEX or RGB value as your source of truth.
Click any color box or press its Copy button to put a ready-to-paste value on your clipboard. Type a bare hex (no #) or a three-digit shorthand like #0af and it is expanded for you. Use the swatch to explore visually, then read off the exact numbers — handy for pulling a brand color into code, or for building a tint/shade ramp by nudging HSL lightness up and down.
Yes. Every conversion runs as plain JavaScript inside your browser — no server call, no upload, nothing logged or stored. Whatever you enter never leaves your device. Refresh the page and it is gone.